• 图片滚动切换效果插件


    当页面刷新是,效果如图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;' + 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

  • 相关阅读:
    【模仿】一个充满BUG的小程序
    JAVA中的内部类
    oracle删除实例的方法
    牢记每个死循环都要有跳出语句【这个要看】
    删除无效服务的命令
    Oracle触发器和new、old特殊变量
    Python模块之os 系统操作
    Python模块之pyautogui 模拟按下键盘
    Python模块之platform 获取平台信息
    Python官方内置函数V3.10详解
  • 原文地址:https://www.cnblogs.com/chenguiya/p/3167527.html
Copyright © 2020-2023  润新知