图片滚动切换效果插件

当页面刷新是，效果如图1：

图片的第一张显示出来，没过几秒钟图片循环轮播，当鼠标在右边小图上移动的时候，鼠标所在的位置显示亮，其他小图就显示成灰色透明状态，大图也显示的是当前鼠标在的位置的小图的大图，如图2：

当鼠标移开位置的时候，图片的显示就跟图1的样式一样的，所以这个是一个不错的效果插件。

---

 $(function(){
  var markers = [];
  function blockhight(boxCls, itemCls, sizeArr) {
        var box = $(boxCls);
        itemCls = itemCls || "a";
        box.find(itemCls).each(function (i) {
            var self = $(this);
            var arr, w, h, marker;
            if (typeof sizeArr !== "undefined") {
                arr = sizeArr[i].split(",");
                w = arr[0];
                h = arr[1];
            } else {
                w = self.width() || self.find("img").attr("width");
                h = self.height() || self.find("img").attr("height");
            }
            marker = $('<div style="cursor:pointer;top:0;left:0;position:absolute;width:' + w + 'px;height:' + h + 'px;filter:alpha(opacity=0);opacity: 0;background-color:#000;"></div>');
            self.css({
                "position": "relative"
            });
            self.append(marker);
            self.mouseover(function () {
                var i;
                for (i = 0; i < markers.length; i++) {
                    markers[i].show().css({
                        "opacity": '0.2',
                        "filter": "alpha(opacity=20)"
                    });
                }
                marker.hide();
            });
            markers.push(marker);

 

        });
        box.mouseleave(function () {
            var i;
            for (i = 0; i < markers.length; i++) {
                markers[i].css({
                    "opacity": '0',
                    "filter": "alpha(opacity=0)"
                });
            }
        });
    };
 var  controller=function(){
   var initialize=0;
   var IndexLi =$('.L_slider_wrap').find('.L_slider_nav li').size();
   $('.L_slider_nav li').mouseover(function(){  
   var index = $('.L_slider_nav li').index($(this));
       go(index);
   
   });
   if(true){
         var _self =$('.L_slider_wrap').find('.L_slider_nav li');
         var _selfelse = $('.L_slider_wrap').find('.L_slider_banner li');
            loop();
   }
  
     _self.mouseenter(function() {
            stop();
        });
        _self.mouseleave(function() {
            stop();
            loop();
        })
        _selfelse.mouseenter(function() {
            stop();
        });

 

        _selfelse.mouseleave(function() {
            stop();
            loop();
        })
   function loop(){
   startRun=setInterval(function(){
      var currIndex = initialize + 1;
                if (currIndex>=IndexLi) {
                    initialize= 0;
     currIndex=0;
                } else {
                    initialize = currIndex;
                }               
                go(currIndex);
    },2000);
   }
   
     function stop() {
            clearInterval(startRun);
        }
 
     function go(page){
  $('.L_slider_banner li').hide();
  $('.L_slider_banner li').eq(page).show();
  }  
  };
  controller(); 
 blockhight(".L_slider_nav", "a", ["140,110", "140,110", "140,110", "140,110"]); 
 });

 

---

 

分享文件代码下载网址：http://yunpan.cn/Qtc7QEAyeSTZb