美文网首页
轮播图实现

轮播图实现

作者: 白柏更好 | 来源:发表于2018-01-31 22:54 被阅读0次

原理

轮播图的原理(js对图片位置的修改+动画+逻辑对应)
1 将图片列表浮动并放置在尺寸小于列表尺寸的div中,再将溢出部分隐藏(overflow: hidden)
2 在图片所在列表中分别克隆包含首个图片的li和最后一张图片的li,并将克隆出的第一张放在最后,将克隆后的最后一张放在最前面
3 对上一页&下一页的按钮绑定点击事件,事件中分别添加函数playPre()&playNext()
4 在两个函数中分别添加动画,使其水平滑动(分别向左向右滑动一个图片的宽度imgWidth)
5 函数中应存在判断,一是防止在左右滑动中图片列表偏移大于图片列表的尺寸从而出现白屏;二是为了实现轮播图首尾循环(在函数中应用pageIndex标记滑动页数,对应轮播图中的图片页数。 当标记数等于图片数n时,重新设置图片列表偏移距离,也就是恢复至第一张图片显示时的距离,并重置pageIndex为0; 当标记数小于0时,重新设置图片列表的偏移距离,也就是最后一张图片显示时的距离,并将pageIndex重置为n-1)
6 轮播图中下方的标记块的功能实现
6.1 通过让全局变量pageIndex作为标记块列表的索引值,再对对应标记块添加类名active,使标记块和图片逻辑顺序相对应
6.2 对标记块绑定点击事件,通过this获得标记块的索引值,再与pageIndex做减法,差m大于零则playNext(m),小于零,则playPre(m)

抽象出的函数

playPre()

function playPre(len){
            if(isAnimate) return ;
            isAnimate = true;
            $imgGroup.animate({
                left: "+=" + len*imgWidth
            },function(){
                pageIndex -= len;
                if(pageIndex < 0){
                    $imgGroup.css("left", "-1400px");
                    pageIndex = 3;
                }
                setBullet();
                isAnimate = false
            });
        }

playNext()

function playNext(len){
            if(isAnimate) return ;
            isAnimate = true;
            $imgGroup.animate({
                left: "-=" + len*imgWidth
            },function(){
                    pageIndex +=len;
                    if(pageIndex === imgCount){
                        $imgGroup.css("left", "-350px");
                        pageIndex = 0;
                    }
                setBullet();
                isAnimate = false;
            });
        }

setBullet()

 function setBullet(){
            $bullet.removeClass("active").eq(pageIndex).addClass("active");
        }

代码实现

效果演示

<html>
<head>
    <meta charset="UTF-8">
    <title>carousel</title>
    <style>
        .img-ct img {
            width: 350px;
            height: 210px;
        }
        .carousel {
            width: 350px;
            height: 210px;
            overflow: hidden;
            position: relative;
        }           //设置展示台尺寸
        .carousel ul,
        .carousel li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .content {
            width: 2100px;
            overflow: hidden;
            position: absolute;
        }
        .img-ct {
            float: left;
        }
        .arrow {
            width: 40px;
            height: 40px;
            border: 3px solid #dddddd;
            border-radius: 50%;
            color: #dddddd;
            font-size: 40px;
            line-height: 35px;
            text-align: center;
            position: absolute;
            bottom: 50%;
            margin-bottom: -20px;
            z-index: 1;
            cursor: pointer;
        }       //左右箭头
        .pre {
            left: 5%;
        }
        .next {
            right: 5%;
        }
        .bullet {
            position: absolute;
            width: 100%;
            bottom: 10px;
            text-align: center;
            z-index: 1;
            font-size: 0;
        }
        .bullet li {
            display: inline-block;
            width: 30px;
            height: 10px;
            border: 1px solid #dddddd;
            border-radius: 3px;
            cursor: pointer;
            margin: 0 3px;
        }
        .active {
            background-color: #dddddd;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
    <div class="carousel">
        <ul class="content">
            <li class="img-ct"><a><img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg"/></a></li>
            <li class="img-ct"><a><img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg"/></a></li>
            <li class="img-ct"><a><img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg"/></a></li>
            <li class="img-ct"><a><img src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg"/></a></li>
        </ul>
        <a class="pre arrow"><</a>
        <a class="next arrow">></a>
        <ul class="bullet">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var $ct = $(".carousel");
        var $img = $(".img-ct");
        var $imgGroup = $(".content");
        var imgCount = $img.length;
        var $preBtn = $(".pre");
        var $nextBtn = $(".next");
        var imgWidth = $img.width();
        var $bullet = $(".bullet li");

        var isAnimate = false;
        var pageIndex = 0;
        $imgGroup.css("left", "-350px");
        $(".content").append($img.first().clone());
        $(".content").prepend($img.last().clone());

        $preBtn.click(function(){
            playPre(1);
        });
        $nextBtn.click(function(){
            playNext(1);
        });
        function playPre(len){
            if(isAnimate) return ;
            isAnimate = true;
            $imgGroup.animate({
                left: "+=" + len*imgWidth
            },function(){
                pageIndex -= len;
                if(pageIndex < 0){
                    $imgGroup.css("left", "-1400px");
                    pageIndex = 3;
                }
                setBullet();
                isAnimate = false
            });
        }
        function playNext(len){
            if(isAnimate) return ;
            isAnimate = true;
            $imgGroup.animate({
                left: "-=" + len*imgWidth
            },function(){
                    pageIndex +=len;
                    if(pageIndex === imgCount){
                        $imgGroup.css("left", "-350px");
                        pageIndex = 0;
                    }
                setBullet();
                isAnimate = false;
            });
        }
        function setBullet(){
            $bullet.removeClass("active").eq(pageIndex).addClass("active");
        }

        $bullet.click(function(){
            var index = $(this).index();
            if(index > pageIndex){
                playNext(index - pageIndex);
            } else if (index < pageIndex) {
                playPre(pageIndex - index);
            }
        });
        setInterval(function(){playNext(1)},3000);    //自动轮播
    </script>
</body>
</html>

相关文章

  • 轮播图心得

    轮播图 写轮播图之前我们要认识到几个问题:一、什么是轮播图?二、怎么实现轮播效果?三、轮播图还有什么小功能可以实现...

  • 轮播图实现

    轮播图在实际应用开发使用较多,本文说明一下具体的实现过程。 一、实现轮播图的基本控件介绍。实现轮播图需要将多张图片...

  • swift UICollectionView 实现无限轮播图

    无线轮播图的实现方式有很多,这里介绍如何通过 UICollectionView 实现无线轮播图.效果图如下: 具体...

  • swift轮播图的实现-UIScrollView

    目标 :UIScrollView+三UIImageView的轮播图实现 原理:利用UIScrollView实现轮播...

  • 项目-轮播图

    整个轮播图分为三部分:轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多,...

  • 传统&呼吸 轮播

    传统的轮播图 一个 carousel 轮播图,图片实现自动轮播,可以左右按钮播放,点小圆点也能实现换图。同时设置节...

  • UIScrollView实现循环轮播Banner(自定义Cell

    实现循环轮播图的各种方案 轮播图的实现方案有很多种,大体上分为CollectionView和ScrollView实...

  • 2019-03-05

    实现轮播图 HTML: css样式 body {...

  • 仿造天猫、京东、凡客等,轮播图的开发(jQuery)

    轮播图思路:1、轮播图布局2、定时器实现轮播效果3、指示器的鼠标移入(mouseenter)、移出(mousele...

  • android轮播图效果

    先上效果图: viewpager+handler+runnableTask实现轮播图效果。可以自动轮播,左右无限滑...

网友评论

      本文标题:轮播图实现

      本文链接:https://www.haomeiwen.com/subject/gggnaxtx.html