码迷,mamicode.com
首页 > 其他好文 > 详细

图片预览、画廊、查看、幻灯片插件

时间:2014-08-14 19:58:49      阅读:314      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   java   使用   os   

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

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

DEMO:

bubuko.com,布布扣

调用方法:

<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

图片预览、画廊、查看、幻灯片插件,布布扣,bubuko.com

图片预览、画廊、查看、幻灯片插件

标签:des   style   blog   http   color   java   使用   os   

原文地址:http://www.cnblogs.com/yangliulang/p/3423088.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!