常见轮播图实现效果

2019-12-04 admin

<html lang=“en”> <head> <meta charset=“UTF-8”> <title>轮播图</title> <style> * { margin: 0; padding: 0; } ul,ol { list-style: none; } #play { margin: 100px auto; width: 900px; height: 350px; position:relative; } #play img { display: block; } .image-list li { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 1s; } .image-list li.current { opacity: 1; } .icon-list { position: absolute; bottom: 10px; right: 10px; } .icon-list li { float: left; margin-right: 8px; width: 20px; height: 20px; color: #fff; font-size: 14px; text-align: center; line-height: 20px; border: 1px solid #fff; border-radius: 50%; cursor: pointer; } .icon-list li.current { color: #f60; border-color: #f60; background: #000; } .prev-btn,.next-btn { position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; width: 40px; height: 100px; background: url(‘images/play/index.png’) no-repeat; } .prev-btn { left: 0; } .next-btn { right: 0; background-position:-50px 0; } </style> </head> <body> <div id=“play”> <ul class=“image-list”> <li class=“current”><img src=“images/play/01.jpg” alt=“轮播图”></li> <li><img src=“images/play/02.jpg” alt=“轮播图”></li> <li><img src=“images/play/03.jpg” alt=“轮播图”></li> <li><img src=“images/play/04.jpg” alt=“轮播图”></li> <li><img src=“images/play/05.jpg” alt=“轮播图”></li> </ul> <ol class=“icon-list”> <li class=“current”>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <div class=“control-btns”> <div class=“prev-btn”></div> <div class=“next-btn”></div> </div> </div>

<script>
    //获取元素
    var play = document.querySelector('#play');  //包裹元素
    var imageItems = play.querySelectorAll('.image-list li'); //所有图片的集合
    var iconItems = play.querySelectorAll('.icon-list li');  //所有的控制按钮元素
    var prevBtn = play.querySelector('.prev-btn'); //上一张的按钮
    var nextBtn = play.querySelector('.next-btn'); //下一张的按钮
    var currentIndex = 0; //标记当前显示的图片的索引
    var itemLength = iconItems.length; //图片的数量
    var duration = 3000;  //自动播放时间间隔

    // 给每一个控制按钮 绑定单击事件
    iconItems.forEach(function (iconItem, index) {
        iconItem.onclick = function(){
            //重新设置索引标记
            currentIndex = index;
            //设置高亮
            setPlay();
        }
    });
    //点击上一张
    prevBtn.onclick = function() {
        setIndex('prev');
    };

    //点击下一张
    nextBtn.onclick = function(){
        setIndex('next');
    };

    // 自动播放
    var intervalId = setInterval(function () {
        setIndex('next');
    }, duration);

    // 鼠标悬停在轮播图上,停止定时
    play.onmouseenter = function () {
        clearInterval(intervalId);
    };

    //鼠标离开轮播图,轮播继续
    play.onmouseleave = function(){
      intervalId = setInterval(function(){
          setIndex('next');
      }, duration);
    };

    /**
     * @param tag 值是prev表示上一张, 值是next表示下一张
     */
    function setIndex(tag) {
        if (tag === 'prev') {
            //当前的索引 -1
            currentIndex --;
            //判断范围
            if (currentIndex < 0) {
                currentIndex = itemLength - 1;
            }
            //设置高亮
            setPlay();
        } else if (tag === 'next') {
            //当前的索引标记 +1
            currentIndex ++;
            //如果 currentIndex 超出范围
            if (currentIndex > itemLength - 1) {
                currentIndex = 0;
            }
            //设置高亮
            setPlay();
        }
    }

    // 实现根据 currentIndex 显示当前的图片和控制按钮
    function setPlay() {
        //排他 所有控制按钮的取消高亮,所有图片的隐藏
        iconItems.forEach(function (item, index) {
            item.classList.remove('current');
            imageItems[index].classList.remove('current');
        });
        //当前控制按钮设置高亮 当前的图片显示
        iconItems[currentIndex].classList.add('current');
        imageItems[currentIndex].classList.add('current');
    }
</script>

</body> </html>


#### jQuery实现代码

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <title>jQuery</title> <style> * { margin: 0; padding: 0; } ul,ol { list-style: none; } #play { position: relative; margin: 100px auto; width: 900px; height: 350px; } .image-list li { position: absolute; left:0; top: 0; width: 900px; height: 350px; opacity: 0; transition: opacity .5s; } .image-list li img { display: block; } .image-list li.actived { opacity: 1; } .icon-list { position: absolute; left: 0; bottom: 10px; width: 100%; text-align: center; font-size: 0; } .icon-list li { display: inline-block; margin: 2px; width: 20px; height:20px; text-align: center; line-height:20px; color: #fff; font-size: 16px; background-color: #000; border:1px solid #000; border-radius: 50%; cursor: pointer; } .icon-list li.actived { border-color: #f90; color: #f90; } .prev-btn,.next-btn { position: absolute; top: 50%; margin-top: -50px; width: 40px; height: 100px; background-image: url(images/play/index.png); background-repeat: no-repeat; cursor: pointer; } .prev-btn { left: 0; } .next-btn { right: 0; background-position: -50px 0; }

</style>

</head> <body> <div id=“play”> <ul class=“image-list”> <li class=“actived”><img src=“images/play/p01.jpg” alt=“图”></li> <li><img src=“images/play/p02.jpg” alt=“图”></li> <li><img src=“images/play/p03.jpg” alt=“图”></li> <li><img src=“images/play/p04.jpg” alt=“图”></li> <li><img src=“images/play/p05.jpg” alt=“图”></li> </ul> <ol class=“icon-list”> <li class=“actived”>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <div class=“prev-btn”></div> <div class=“next-btn”></div> </div>

<script src="js/jquery-1.11.1.js"></script>
<script>
    $(function(){
        //定义全局变量 表示索引
        var index = 0;
        //时间间隔
        var delay = 5000;

        //按钮单击事件
        $('.icon-list li').click(function(){
            index = $(this).index();
            setPlay();
        });
        //点击上一个 下一个
        $('.prev-btn').click(function(){
            index --;
            if (index < 0) {
                index = $('.image-list li').length - 1;
            }
            setPlay();
        });
        $('.next-btn').click(function(){
            index ++;
            if (index > $('.image-list li').length - 1) {
                index = 0;
            }
            setPlay();
        });

        //定时器
        var intervalId = setInterval(runPlay, delay);

        //鼠标移入暂停定时
        $('#play').mouseenter(function () {
            clearInterval(intervalId);
        }).mouseleave(function(){
            intervalId = setInterval(runPlay, delay);
        });

        //定时器函数
        function runPlay(){
            index ++;
            if (index > $('.image-list li').length - 1) {
                index = 0;
            }
            setPlay();
        }
        //设置轮播图
        function setPlay(){
            $('.icon-list li').removeClass('actived').eq(index).addClass('actived');
            $('.image-list li').removeClass('actived').eq(index).addClass('actived');
        }
    });
</script>

</body> </html>


## 无缝滚动

#### 实现原理

**布局:** 将轮播图片排在一排,定位在父元素上,设置图片父元素宽度为一张图片宽度,overflow为hidden,布局好左右按钮及下方高亮数字按钮位置。
**js实现:** 在原图片元素列表中的最前面添加原图片的最后一张图片元素、最后面添加原图片的第一张图片元素,利用索引值和图片元素的left偏移值的关系来切换轮播的图片,当图片到达图片列表临界点时,瞬间调整图片列表的位置以实现无缝滚动,最后设置定时。

#### 实现代码

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“UTF-8”> <title>轮播图</title> <style> * { margin: 0; padding: 0; } ul,ol { list-style: none; } #play { margin: 100px auto; width: 900px; height: 350px; overflow: hidden; position:relative; } #play img { display: block; } .image-list { position: absolute; left: 0; top: 0; } .image-list li { float: left; width: 900px; height: 350px;

    }
    .image-list li.current {

    }
    .icon-list {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
    .icon-list li {
        float: left;
        margin-right: 8px;
        width: 20px;
        height: 20px;
        color: #fff;
        font-size: 14px;
        text-align: center;
        line-height: 20px;
        border: 1px solid #fff;
        border-radius: 50%;
        cursor: pointer;
    }
    .icon-list li.current {
        color: #f60;
        border-color: #f60;
        background: #000;
    }
    .prev-btn,.next-btn {
        position: absolute;
        top: 0;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto;
        width: 40px;
        height: 100px;
        background: url('images/play/index.png') no-repeat;
    }
    .prev-btn {
        left: 0;
    }
    .next-btn {
        right: 0;
        background-position:-50px 0;
    }
</style>

</head> <body> <div id=“play”> <ul class=“image-list”> <li><img src=“images/play/01.jpg” alt=“轮播图”></li> <li><img src=“images/play/02.jpg” alt=“轮播图”></li> <li><img src=“images/play/03.jpg” alt=“轮播图”></li> <li><img src=“images/play/04.jpg” alt=“轮播图”></li> <li><img src=“images/play/05.jpg” alt=“轮播图”></li> </ul> <ol class=“icon-list”> <li class=“current”>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <div class=“control-btns”> <div class=“prev-btn”></div> <div class=“next-btn”></div> </div> </div>

<script>
    //获取元素
    var play = document.querySelector('#play');  //包裹元素
    var imageList = play.querySelector('.image-list');
    var imageItems = imageList.getElementsByTagName('li'); //所有图片的集合
    var iconItems = play.querySelectorAll('.icon-list li');  //所有的控制按钮元素
    var prevBtn = play.querySelector('.prev-btn'); //上一张的按钮
    var nextBtn = play.querySelector('.next-btn'); //下一张的按钮
    var currentIndex = 0; //标记图标的索引
    var currentImageIndex = 1; //标记当前图片的索引
    var itemLength = iconItems.length; //图片的数量
    var duration = 5000;  //自动播放时间间隔

    //把原来的第一张图片克隆追加到最后,把原来的最后一张克隆追加到最前
    var firstImageItemClone = imageItems[0].cloneNode(true);
    var lastImageItemClone = imageItems[imageItems.length-1].cloneNode(true);
    imageList.appendChild(firstImageItemClone);
    imageList.insertBefore(lastImageItemClone, imageList.firstElementChild);

    //设置ul.image-list 元素的宽度, 宽度=所有图片宽度和
    imageList.style.width = imageItems[0].offsetWidth * imageItems.length + 'px';

    // 调整图片的位置
    setPlay();

    // 给每一个控制按钮 绑定单击事件
    iconItems.forEach(function (iconItem, index) {
        iconItem.onclick = function(){
            //重新设置索引标记
            currentIndex = index;
            //设置图片的索引
            currentImageIndex = index + 1;
            //设置高亮
            imageList.style.transition = 'left .5s';
            setPlay();
        }
    });

    //点击上一张
    prevBtn.onclick = function() {
        setIndex('prev');
    };

    //点击下一张
    nextBtn.onclick = function(){
        setIndex('next');
    };

    // 自动播放
    var intervalId = setInterval(function () {
        setIndex('next');
    }, duration);

    // 鼠标悬停在轮播图上,停止定时
    play.onmouseenter = function () {
        clearInterval(intervalId);
    };

    //鼠标离开轮播图,轮播继续
    play.onmouseleave = function(){
      intervalId = setInterval(function(){
          setIndex('next');
      }, duration);
    };

    /**
     * @param tag 值是prev表示上一张, 值是next表示下一张
     */
    function setIndex(tag) {
        if (tag === 'prev') {
            //当前的索引 -1
            currentIndex --;
            //判断范围
            if (currentIndex < 0) {
                currentIndex = itemLength - 1;
            }
            // 图片索引变化
            currentImageIndex --;
            // 判断图片的索引范围
            if (currentImageIndex < 0) {
                //瞬间切换imageList的位置
                imageList.style.transition = 'none';
                imageList.style.left = -imageItems[0].offsetWidth*(imageItems.length-2) + 'px';
                //重新设置currentImageIndex
                currentImageIndex = imageItems.length - 3;
            }
            setTimeout(function(){
                // 设置过渡
                imageList.style.transition = 'left .5s';
                //设置高亮
                setPlay();
            }, 1);
        } else if (tag === 'next') {
            //当前的索引标记 +1
            currentIndex ++;
            //如果 currentIndex 超出范围
            if (currentIndex > itemLength - 1) {
                currentIndex = 0;
            }
            // 图片的索引变化
            currentImageIndex ++;
            // 如果图片的索引超出范围
            if (currentImageIndex > imageItems.length - 1) {
                //瞬间 调整imageList的位置,调整到索引是1的位置
                imageList.style.transition = 'none';
                imageList.style.left = -imageItems[0].offsetWidth + 'px';
                //设置索引应该显示第二张图片
                currentImageIndex = 2;
            }
            setTimeout(function(){
                // 设置过渡
                imageList.style.transition = 'left .5s';
                //设置高亮
                setPlay();
            }, 1);
        }
    }

    // 实现根据 currentIndex 显示当前的图片和控制按钮
    function setPlay() {
        //排他 所有控制按钮的取消高亮,所有图片的隐藏
        iconItems.forEach(function (item, index) {
            item.classList.remove('current');
        });
        //当前控制按钮设置高亮 当前的图片显示
        iconItems[currentIndex].classList.add('current');
        //设置相应图片显示
        imageList.style.left = -currentImageIndex * imageItems[0].offsetWidth + 'px'

    }
</script>

</body>

[转载]原文链接:https://segmentfault.com/a/1190000021197382

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-80436.html

文章标题:常见轮播图实现效果

相关文章
js实现手机拍照上传功能
在前段时间的项目开发中,用到了拍照上传的地方,后来发现了最为简单的一种方法,现总结如下: &lt;form id=&quot;form&quot; method=&quot;post&quot; action=&quot;http:&#x2...
2017-03-06
纯JS实现旋转图片3D展示效果
CSS: &lt;style type=&quot;text&#x2F;css&quot;&gt; #show{position:relative;margin:20px auto;width:800px;} .item{position:...
2017-03-22
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
js实现文字向上轮播功能
话不多说,请看实现代码: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...
2017-03-10
微信公众号实现无限制推送模板消息!可向指定openID群发
微信认证的服务号才有推送模板消息接口 所以本文需要在认证服务号的情况下学习 以上就是模板消息,只有文字和跳转链接,没有封面图。 在服务号的后台添加功能插件-模板消息即可。 模板消息,都是在后台选择一个群发模板的,然后获取模板ID,根据这...
2018-01-14
纯css实现窗户玻璃雨滴逼真效果
这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAML和Sass。 案例效果 看到上面的效果是不是...
2017-03-29
图片优化的那些工具
图片作为页面的一个主要因素,它的大小直接影响了页面的加载速度,这一点在移动端尤显突出。 怎么让图片的大小更小?除了选择合适的格式(jpeg、gif、png),我们还可以利用网上的应用(如smushit、tinypng、imagemin、im...
2016-01-13
JavaScript实现简单的数字倒计时
这里是一个JavaScript中显示倒计时的方法,从10一秒一秒地往下减直到计时结束(即0),代码如下: runCount(10); function runCount(t){ if(t&gt;0){ document.getE...
2017-03-23
回到顶部