常见轮播图实现效果

轮播图
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
<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>
#### jQuery实现代码
jQuery
原文链接:segmentfault.com

上一篇:简单版前端页面国际化
下一篇:爬虫必备:Python 执行 JS 代码 —— PyExecJS、PyV8、Js2Py

相关推荐

  • 鼠标选中文本划词高亮、再次选中划词取消高亮效果

    当我们需要鼠标选中文本后,文本高亮。当再次将选中的文本选中后,取消高亮效果时该如何实现呢? 效果图(/public/upload/1b8a77b96d37b9776f3d9be7e68a19f2)...

    3 个月前
  • 鼠标跟随炫彩效果

    以前在网上看到了别人这个效果,感觉很酷也很难,但当真的去了解怎么做的时候会发现其实没那么难。用到的就是canvas。 先来看一下效果 (https://img.javascriptcn.com/4...

    1 年前
  • 鼠标移入移出效果 -- jQuery/Vue版

    元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接(http://www.bestvist.com/p/56) ...

    2 年前
  • 页面回滚到顶部的顺滑效果

    小弟是菜狗一枚,记录一波页面回滚到顶部的顺滑效果。如果有更好的实现方法可以发起评论一起分享分享哦~ image.png(/public/upload/23dadd032f9dfe4d99c7a6b...

    3 个月前
  • 面试必备! HTML常见面试题汇总

    基本按所有面经出现的频率来进行汇总 一、 script标签为什么要放在body标签的底部,【defer async】 因为浏览器在渲染html的时候,从上到下依次执行,遇到js文件就会停止当前页面的渲...

    11 天前
  • 附加一个具有淡入淡出效果的元素[ jQuery ]

    Pablo FernandezTIMEX(https://stackoverflow.com/users/7595/pablofernandez)提出了一个问题:Append an element w...

    2 年前
  • 阅读 material-ui 实现「水波纹效果」

    介绍 阅读源码是学习的最好方式,materialui 是知名的 react ui 库,目前在 github 上有 55.8k star,非常值得我们去学习 本系列文章会借鉴 materialui 源...

    3 个月前
  • 镂空遮盖层效果的研究

    图片描述(https://img.javascriptcn.com/e0414d8a6dd2ff040fc689bed2ca85a1 "图片描述") 上图是“QQ截图”选择区域时的画面,可以看到除了中...

    1 年前
  • 那些不常见,但却非常实用的css属性(整理不易)

    1、webkitlineclamp 可以把 块容器 中的内容限制为指定的行数。并且在超过行数后,在最后一行显示"..." 这是正常的展示 image(/public/upload/170c7c4a...

    1 个月前
  • 遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)

    首先给大家展示演示效果: (https://img.javascriptcn.com/5e7c39131b463667413a82fb2d67f762.jpg) 基于JavaScript的...

    3 年前

官方社区

扫码加入 JavaScript 社区