Jquery之轮播插件

1. 前言

轮播插件是js最常见的插件之一,本次试验,加入的需求有:
. 自动播放模式
. pre next摁键查看====》2000ms后恢复自动播放模式
. 跳转模式:点击页面下方预览栏,点击后高亮,之间跳转对应图片, 2000ms后恢复自动播放模式

2.let's shit out of this!

2.1 原理

想象你通过一扇窗户观察外面跑过的列车,列车可以左右通过,你通过摁键控制火车方向,这里火车就是拍成一排的图片,窗户就是我们观察的实际页面窗口。这里有一个问题:为了满足循环播放,照片不可能是无限长度。
解决方法有2:
1.操作dom元素,将最后一张图片遍历后移到第一张图片之前,依次类推,但问题是重新绘制dom造成网页刷新,得不偿失。
2.将最后一张图片复制到第一张图片之前,原来第一张图片到最后一张图片之后,然后我们制造一个标志位:currentPage 并计数,当点击nextBt,则+1,反之则-1,当到达边界图片时,先显示我们的复制图片,然后直接操作dom元素的css瞬间位移到初始正确位置。
搞定

2.2 what it looks like?

   talk is cheap,lets shit the code

基本页面结构如下:

<body>
    <div class="carousel-ct">
        <ul class="carousel">
            <li>
                <a href="#">![](./img/1.jpg)</a>
            </li>
            <li>
                <a href="#">![](./img/2.jpg)</a>
            </li>
            <li>
                <a href="#">![](./img/3.jpg)</a>
            </li>
            <li>
                <a href="#">![](./img/4.jpg)</a>
            </li>
            <li>
                <a href="#">![](./img/5.jpg)</a>
            </li>
            <li>
                <a href="#">![](./img/6.jpg)</a>
            </li>
        </ul>
        <ul class="thumbnail">
            <li class="active">![](./img/thumbnail/1.jpg)</li>
            <li>![](./img/thumbnail/2.jpg)</li>
            <li>![](./img/thumbnail/3.jpg)</li>
            <li>![](./img/thumbnail/4.jpg)</li>
            <li>![](./img/thumbnail/5.jpg)</li>
            <li>![](./img/thumbnail/6.jpg)</li>
        </ul>
        <a href="" class="btnpre"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
        <a href="" class="btnnext"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
       </div>

css重要部分(完整部分见下文git链接):其实虽然也没什么可重要的。。。照屏幕调试而已

.carousel-ct{
    width: 1000px;
    overflow: hidden;
    margin:0 auto;
    position:relative;
    height:560px;
}
.carousel{
    width: 6000px;
    position:absolute;
}
.carousel>li {
    float: left;
}
.carousel img{
    width:1000px;
}
.thumbnail{
    width: 610px;
    position:absolute;
    left:50%;
    bottom:0px;
    transform: translateX(-50%);
    z-index:10;

}

.thumbnail>li{
    display: inline-block;
    opacity: 0.5;
    cursor: progress;
}
.thumbnail>li:hover{
  opacity: 1;
}
.thumbnail>li>img{
    width:80px;
}
.active{
    opacity: 1 !important;
}

重点来了!js中的前进,后退,自动播放功能函数:

function playNext(){
    $imgCt.animate({left:'-=1000'},
        function(){
            curPageIndex++;
            thumbnail(curPageIndex);
            if(curPageIndex===imgLength){
                $imgCt.css({'left':'-1000px'});
                curPageIndex=0;
            }
        })
} 
function playPre(){
    $imgCt.animate({left:'+=1000'},
        function(){
            curPageIndex--;
            thumbnail(curPageIndex);
            if(curPageIndex<0){
                $imgCt.css({'left':-(imgLength*$firstImg.width())});
                curPageIndex=imgLength-1;
            }
        })
} 
function autoplay(){
     timer = setInterval(function(){playNext();},4000);
}
function stopAuto() {
            clearInterval(timer);
        }
function remainplay(){
    setTimeout(function(){autoplay();},2000);
}
function thumbnail(index) {
            $thumbnail.children().removeClass('active');
            $thumbnail.children().eq(index).addClass('active');
        }

3.预览:

Screen Shot 2017-02-22 at 3.59.16 PM.png

github:下载后直接点击html文件即可查看
预览地址:jsbin

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容