zoukankan      html  css  js  c++  java
  • 图片预览、画廊、查看、幻灯片插件

    当年面对这样一个效果的时候,真是蛋疼,觉得自己尼玛出来还能靠这个吃饭嘛,唏嘘叹惋之余还是坚定信心,很多人都看不起你能做这一行(我特妈自己也不信),当你认真的做一件事时,自己都觉得可怕,加油吧,没什么能阻止你认真。老罗说的好:我尼玛不在乎输赢,我就是特么认真。

    但是今年自己遇到很多事,总是不能安心,所以今天试着格式化自己,认真的写了这个以前让我蛋疼的插件。

    DEMO:

    调用方法:

    <head>
        <script type="text/javascript" src="jq.js"></script>
        <script type="text/javascript" src="slide-image.js"></script>
    </head>

    DOM结构:

    <div id="slide-galleries-main">
      <div id="slide-galleries-con">
        <h1>组图:广州一大巴闹市行驶中自燃</h1>
        <ul id="slide-galleries-toolbar">
          <li><a href="javascript:void(0);" id="slide-auto-play">自动播放</a>|</li>
          <li><a href="#11" id="slide-origin-url" target="_blank">查看图片</a>|</li>
          <li>提示:支持键盘翻页 ←左 右→</li>
        </ul>
        <div id="slide-image-wrap">
          <div class="slide-btn slide-btn-prev">
            <div class="slide-btn-bg-opacity"></div>
            <div class="slide-btn-arrow">&lt;</div>
          </div>
          <img id="slide-image-change" src="1.jpg" />
          <div class="slide-btn slide-btn-next">
            <div class="slide-btn-bg-opacity"></div>
            <div class="slide-btn-arrow">&gt;</div>
          </div>
          <div id="loading-state">加载中</div>
        </div>
        <div id="slide-image-title">
          <p>火情发生不过10分钟,6辆消防车就呼啸而至。经过约10分钟的扑救后,大火被扑灭。记者在下午2时50分到达现场,银色大巴烧得只剩框架,车内驾驶座烧得面目全非,车头玻璃全无。在烧焦客车的四周地面,可见零星的玻璃碎片。图为事发现场。柯皓 摄</p>
          <p class="date-time"><span>2012年11月12日09:16</span><span>文/广州日报</span><span>版权图片,请勿转载</span></p>
        </div>
        <div id="slide-list-view-wrap">
          <div id="slide-box">
            <ul>
              <li class="selected" data-origin="1.jpg"><img src="1-l.jpg" height="68" /><span>1/20</span></li>
              <li data-origin="2.jpg"><img src="2-l.jpg" height="68" /><span>2/20</span></li>
              <li data-origin="3.jpg"><img src="3-l.jpg" height="68" /><span>3/20</span></li>
              <li data-origin="4.jpg"><img src="4-l.jpg" height="68" /><span>4/20</span></li>
              <li data-origin="5.jpg"><img src="5-l.jpg" height="68" /><span>5/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782780_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782780_200x200_0.jpg" height="68" /><span>6/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782784_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782784_200x200_0.jpg" height="68" /><span>7/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782781_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782781_200x200_0.jpg" height="68" /><span>8/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666734_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666734_116x86_0.jpg" height="68" /><span>9/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666731_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666731_116x86_0.jpg" height="68" /><span>10/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666729_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666729_116x86_0.jpg" height="68" /><span>11/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666733_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666733_116x86_0.jpg" height="68" /><span>12/20</span></li>
              <li data-origin="2.jpg"><img src="2-l.jpg" height="68" /><span>2/20</span></li>
              <li data-origin="3.jpg"><img src="3-l.jpg" height="68" /><span>3/20</span></li>
              <li data-origin="4.jpg"><img src="4-l.jpg" height="68" /><span>4/20</span></li>
              <li data-origin="5.jpg"><img src="5-l.jpg" height="68" /><span>5/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782780_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782780_200x200_0.jpg" height="68" /><span>6/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782784_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782784_200x200_0.jpg" height="68" /><span>7/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782781_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782781_200x200_0.jpg" height="68" /><span>8/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666734_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666734_116x86_0.jpg" height="68" /><span>9/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666731_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666731_116x86_0.jpg" height="68" /><span>10/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666729_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666729_116x86_0.jpg" height="68" /><span>11/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666733_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666733_116x86_0.jpg" height="68" /><span>12/20</span></li>
              <li data-origin="2.jpg"><img src="2-l.jpg" height="68" /><span>2/20</span></li>
              <li data-origin="3.jpg"><img src="3-l.jpg" height="68" /><span>3/20</span></li>
              <li data-origin="4.jpg"><img src="4-l.jpg" height="68" /><span>4/20</span></li>
              <li data-origin="5.jpg"><img src="5-l.jpg" height="68" /><span>5/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782780_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782780_200x200_0.jpg" height="68" /><span>6/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782784_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782784_200x200_0.jpg" height="68" /><span>7/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782781_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782781_200x200_0.jpg" height="68" /><span>8/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666734_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666734_116x86_0.jpg" height="68" /><span>9/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666731_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666731_116x86_0.jpg" height="68" /><span>10/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666729_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666729_116x86_0.jpg" height="68" /><span>11/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666733_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666733_116x86_0.jpg" height="68" /><span>12/20</span></li>
              <li data-origin="2.jpg"><img src="2-l.jpg" height="68" /><span>2/20</span></li>
              <li data-origin="3.jpg"><img src="3-l.jpg" height="68" /><span>3/20</span></li>
              <li data-origin="4.jpg"><img src="4-l.jpg" height="68" /><span>4/20</span></li>
              <li data-origin="5.jpg"><img src="5-l.jpg" height="68" /><span>5/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782780_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782780_200x200_0.jpg" height="68" /><span>6/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782784_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782784_200x200_0.jpg" height="68" /><span>7/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782781_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782781_200x200_0.jpg" height="68" /><span>8/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666734_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666734_116x86_0.jpg" height="68" /><span>9/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666731_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666731_116x86_0.jpg" height="68" /><span>10/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666729_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666729_116x86_0.jpg" height="68" /><span>11/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666733_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666733_116x86_0.jpg" height="68" /><span>12/20</span></li>
              <li data-origin="2.jpg"><img src="2-l.jpg" height="68" /><span>2/20</span></li>
              <li data-origin="3.jpg"><img src="3-l.jpg" height="68" /><span>3/20</span></li>
              <li data-origin="4.jpg"><img src="4-l.jpg" height="68" /><span>4/20</span></li>
              <li data-origin="5.jpg"><img src="5-l.jpg" height="68" /><span>5/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782780_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782780_200x200_0.jpg" height="68" /><span>6/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782784_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782784_200x200_0.jpg" height="68" /><span>7/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782781_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782781_200x200_0.jpg" height="68" /><span>8/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666734_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666734_116x86_0.jpg" height="68" /><span>9/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666731_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666731_116x86_0.jpg" height="68" /><span>10/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666729_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666729_116x86_0.jpg" height="68" /><span>11/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666733_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666733_116x86_0.jpg" height="68" /><span>12/20</span></li>
              <li data-origin="2.jpg"><img src="2-l.jpg" height="68" /><span>2/20</span></li>
              <li data-origin="3.jpg"><img src="3-l.jpg" height="68" /><span>3/20</span></li>
              <li data-origin="4.jpg"><img src="4-l.jpg" height="68" /><span>4/20</span></li>
              <li data-origin="5.jpg"><img src="5-l.jpg" height="68" /><span>5/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782780_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782780_200x200_0.jpg" height="68" /><span>6/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782784_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782784_200x200_0.jpg" height="68" /><span>7/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/778/77827/7782781_1200x1000_0.jpg"><img src="http://img1.gtimg.com/7/778/77827/7782781_200x200_0.jpg" height="68" /><span>8/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666734_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666734_116x86_0.jpg" height="68" /><span>9/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666731_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666731_116x86_0.jpg" height="68" /><span>10/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666729_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666729_116x86_0.jpg" height="68" /><span>11/20</span></li>
              <li data-origin="http://img1.gtimg.com/7/766/76667/7666733_980x1200_0.jpg"><img src="http://img1.gtimg.com/7/766/76667/7666733_116x86_0.jpg" height="68" /><span>12/20</span></li>
            </ul>
            <div id="slide-selected-frame"></div>
          </div>
          <div class="slide-list-btn slide-list-btn-prev">&lt;</div>
          <div class="slide-list-btn slide-list-btn-next">&gt;</div>
          <div id="scrollbar-track">
            <div class="scrollbar-handle"></div>
          </div>
        </div>
      </div>
    </div>

    CSS样式,可以自定义更改:

    #slide-galleries-main{ margin-top:20px;border-top:1px solid #333;font-size:12px;color:#9A9A9A;}
    #slide-galleries-main a{color:#9A9A9A;text-decoration:none;}
    #slide-galleries-con{width:1000px; margin:0 auto;padding:20px 0;}
    #slide-galleries-con h1{color:#fff;font-size:26px; text-align:center;}
    #slide-galleries-toolbar{height:20px; margin:30px 0 10px;}
    #slide-galleries-toolbar li{float:left; margin-right:10px;}
    #slide-galleries-toolbar li a{ margin-right:10px;color:#ccc;}
    #slide-image-wrap{position:relative; text-align:center;}
    #slide-image-wrap .slide-btn{width:50%;height:100%; position:absolute;top:0;cursor:pointer;}
    #slide-image-wrap .slide-btn-prev{left:0;}
    #slide-image-wrap .slide-btn-next{right:0;}
    #slide-image-wrap .slide-btn .slide-btn-bg-opacity{width:100%;height:100%; background:#000;opacity:0;filter:alpha(opacity:0);}
    #slide-image-wrap .slide-btn .slide-btn-arrow{width:100px;height:100px; text-align:center;line-height:105px; background:#131313; position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-50px;opacity:0.7;filter:alpha(opacity:70);color:#fff;font-size:100px;border-radius:20px; display:none;}
    #slide-image-wrap .slide-btn-next .slide-btn-arrow{margin-left:50px;}
    #slide-image-wrap .slide-btn:hover .slide-btn-arrow{ display:block;}
    #slide-image-title p{width:950px; margin:20px auto; line-height:180%;}
    #slide-image-title p.date-time{ text-align:right;}
    
    #slide-list-view-wrap{height:155px;border:1px solid #333; position:relative;}
    #loading-state{width:80px;height:40px; line-height:40px; text-align:center;color:#fff; background:#000;border-radius:10px; position:absolute;left:50%;top:50%;margin-left:-40px;margin-top:-20px;opacity:0.8;filter:alpha(opacity=80); display:none;}
    
    #slide-box{width:872px;height:76px; position:relative;overflow:hidden; margin:20px auto;}
    #slide-box ul{height:68px;margin-top:3px;}
    #slide-box ul li{ float:left;width:116px; text-align:center; margin-right:10px; position:relative; cursor:pointer;}
    #slide-box ul li span{ position:absolute;bottom:0px;right:0; background:#000;color:#fff;}
    
    #slide-list-view-wrap .slide-list-btn{width:20px;height:60px; cursor:pointer;text-align:center;line-height:60px;color:#fff;font-size:24px;border:1px solid #333; position:absolute;left:15px;top:24px;border-radius:5px; background:#333;opacity:0.5;filter:alpha(opacity=50);}
    #slide-list-view-wrap .slide-list-btn-next{left:auto;right:15px;}
    #slide-list-view-wrap .slide-list-btn:hover{ background:#666;}
    #scrollbar-track{width:950px;height:10px; border-bottom:1px solid #333; margin:0 auto;}
    #scrollbar-track .scrollbar-handle{width:100px;height:10px;border-radius:5px; position:relative;top:5px; background:#333;}
    #scrollbar-track .scrollbar-handle:hover{ background:#666;}
    
    #slide-selected-frame{ position:absolute;left:0;top:0;height:68px;width:113px;border:3px solid orange;}

    基于JQ的js代码:

    (function(){
        /**
        @幻灯片预览插件
        @版权:杨永
        @2014-8-14
        @模仿腾讯图片查看控件
        */
        function SildeImage(slide){
            var _this_=this;
            this.slide=slide;
            //保存幻灯片主图
            this.slideMainImage=$("#slide-image-change",slide);
            //保存小图列表和父节点
            this.slideBox=$("#slide-box ul",slide);
            this.imagesList=$("li",this.slideBox);
            this.imagesSize=this.imagesList.size();
            //保存加载提示
            this.loadingState=$("#loading-state",slide);
            //alert(this.imagesSize);
            //如果小图列表大于7个,就启动滑块
            if(this.imagesSize>=7){
                if(this.imagesSize!=7){
                    //获取滑道和滑块和滑道的偏移
                    this.slideTrack=$("#scrollbar-track",slide);
                    this.sliderHandle=$(".scrollbar-handle",slide);
                    //获取滑道和滑块的差
                    this.trackAndHandleWidth=this.slideTrack.width()-this.sliderHandle.width();
                    //注册事件
                    this.sliderHandle.mousedown(function(e){
                        //隐藏掉框选
                        _this_.slideSelectedFrame.fadeOut();
                        //获取鼠标相对于自身的偏移
                        _this_.layerX=e.pageX-$(this).offset().left;
                        //注册document事件()
                        $(document).bind("mousemove",function(e){_this_.mouseMove(e);});
                        $(document).bind("mouseup",function(){_this_.cancelEvents();});;
                    });
                    //获得小图隐藏部分的宽度
                    this.imagesHideWidth=this.imagesSize*126-this.slideBox.parent().width()-10;    
                };
                //设置小图列表的宽度
                this.slideBox.width(this.imagesSize*126);
            };
            //保存框选对象
            this.slideSelectedFrame=$("#slide-selected-frame",slide);
            //绑定小图事件
            this.imagesList.click(function(){
                    _this_.goto(this);    
            });
            //保存上下切换按钮和计数器
            this.loop=0;
            this.slideListBtnPrev=$(".slide-list-btn-prev",slide);
            this.slideListBtnNext=$(".slide-list-btn-next",slide);
            this.slideListBtnPrev.click(function(){
                _this_.loop--;
                if(_this_.loop<0){
                    _this_.loop=_this_.imagesSize-1;
                };
                _this_.imagesList.eq(_this_.loop).click();
            });
            this.slideListBtnNext.click(function(){
                _this_.loop++;
                if(_this_.loop>_this_.imagesSize-1){
                    _this_.loop=0;
                };
                _this_.imagesList.eq(_this_.loop).click();
            });
            //保存大图切换按钮
            this.slideBtnPrev=$(".slide-btn-prev",slide);
            this.slideBtnNext=$(".slide-btn-next",slide);
            this.slideBtnPrev.click(function(){
                _this_.slideListBtnPrev.click();
            });
            this.slideBtnNext.click(function(){
                _this_.slideListBtnNext.click();
            });
            //绑定翻页按钮
            $(document).keyup(function(e){
                if(e.which==37){
                    _this_.slideListBtnPrev.click();
                };
            });
            $(document).keyup(function(e){
                if(e.which==39){
                    _this_.slideListBtnNext.click();
                };
            });
            //保存查看图片按钮
            this.viewBigImg=$("#slide-origin-url",slide);
            //当页面发生刷新时,定位到锚点当前图片
            this.reloadPageInto();    
            //定义一个自动播放定时器和自动播放的按钮
            this.timer=null;    
            this.autoPlayBtn=$("#slide-auto-play",slide);
            this.autoPlayBtn.click(function(){
                if(!this.isAuto){
                    _this_.autoPlay();
                    this.isAuto=true;
                    $(this).text("暂停播放");
                }else{
                    window.clearInterval(_this_.timer);
                    this.isAuto=false;
                    $(this).text("自动播放");
                };
            });    
    
        };
        SildeImage.prototype={
            changeBigImg:function(target){
                var _this=this;
                var url=$(target).attr("data-origin");
                this.loadingState.show();
                //加载大图
                this.preLoadImg(url,function(){
                    _this.slideMainImage.attr("src",url);
                    _this.loadingState.fadeOut();
                });
                
            },
            preLoadImg:function(url,callBack){
                var img=new Image();
                if(!!window.ActiveXObject){
                    img.onreadystatechange=function(){
                        if(this.readyState=="complete"){
                                    callBack();
                        };
                    };
                }else{
                    img.onload=function(){
                            callBack();
                    };
                };
                img.src=url;
            },
            //自动播放幻灯片
            autoPlay:function(){
                var _this=this;
                this.timer=window.setInterval(function(){
                    _this.slideBtnNext.click();
                },5000);
            },
            reloadPageInto:function(){
                var url=window.location.href,
                    url=url.split("#")[1]||"page1",
                    pageIndex=parseInt(url.substr(4));
                    this.imagesList.eq(pageIndex-1).click();
                    //设置计数器
                    this.loop=pageIndex-1;
            },
            goto:function(target){
                var index=$(target).index();
                //切换选中状态
                this.imagesList.eq(index).addClass("selected").siblings().removeClass("selected");
                this.loop=index;
                //设置锚点
                var url=window.location.href.split("#")[0];
                window.location.href=url+"#page"+(index+1);
                //显示框选
                if(this.slideSelectedFrame.is(":hidden")){
                    this.slideSelectedFrame.fadeIn();
                };
                //设置查看原图href
                this.viewBigImg.attr("href",this.imagesList.eq(index).attr("data-origin"));
                
                //切换图片
                this.changeBigImg(target);
                if(this.imagesSize<=7){
                    if(index==6){
                        this.slideSelectedFrame.animate({"left":index*126-3});
                    }else{
                        this.slideSelectedFrame.animate({"left":index*126});
                    };
                }else{
                    if(index<=3){
                        this.slideSelectedFrame.animate({"left":index*126});
                        this.slideBox.animate({marginLeft:0});
                        if(this.sliderHandle){
                            this.sliderHandle.animate({marginLeft:0});
                        };
                    }else if(index>3&&index<this.imagesSize-3){
                        this.slideSelectedFrame.animate({"left":3*126});
                        this.slideBox.animate({marginLeft:-(index-3)*126});
                        var bili=(index-3)*126/this.imagesHideWidth;
                        this.sliderHandle.animate({marginLeft:bili*this.trackAndHandleWidth});
                    }else{
                        if(index==this.imagesSize-1){
                            this.slideSelectedFrame.animate({"left":(7-(this.imagesSize-index))*126-3});
                        }else{
                            this.slideSelectedFrame.animate({"left":(7-(this.imagesSize-index))*126});
                        };
                        this.slideBox.animate({marginLeft:-(this.imagesSize-7)*126});
                        this.sliderHandle.animate({marginLeft:this.trackAndHandleWidth});
                    };
                };
            },
            mouseMove:function(e){
                var moveLayerX=e.pageX-this.slideTrack.offset().left-this.layerX;
                moveLayerX=moveLayerX<0?0:moveLayerX>this.trackAndHandleWidth?this.trackAndHandleWidth:moveLayerX;
                //设置滑块的位置
                this.sliderHandle.css("marginLeft",moveLayerX);
                //设置隐藏部分的位置
                this.slideBox.css("marginLeft",-((moveLayerX/this.trackAndHandleWidth).toFixed(3)*this.imagesHideWidth));
            },
            cancelEvents:function(){
                $(document).unbind("mousemove");
                $(document).unbind("mouseup");
                //检测鼠标抬起后移动列表位置
                var i=Math.round(Math.abs(parseInt(this.slideBox.css("marginLeft"))/116))>this.imagesSize-7?this.imagesSize-7:Math.round(Math.abs(parseInt(this.slideBox.css("marginLeft"))/116));
                this.slideBox.animate({marginLeft:-i*126});
                //设置滑块的移动
                var bili=i*126/this.imagesHideWidth;
                this.sliderHandle.animate({marginLeft:bili*this.trackAndHandleWidth});
            }
        
        };
        window["SildeImage"]=SildeImage;
    })();

    创建方式:

    var sildeImage=new SildeImage($("#slide-galleries-main"));

    使用时有任何问题加我Q:377746756

  • 相关阅读:
    jquery map.js
    json序列指定名称
    如何将后台传来的json反序列化为前端具体对象
    创建随机码!!
    用户(三次)登录--作业小编完成
    求出1-2+3-4+5------100求和
    if -else 条件语句原理
    联系:中奖彩票小编译
    求出1-100内所有奇数。
    练习题:求1-100所有数偶数
  • 原文地址:https://www.cnblogs.com/yangliulang/p/3423088.html
Copyright © 2011-2022 走看看