js实现的简易轮播图，适合初学者

最新推荐文章于 2024-06-29 23:13:31 发布

(ɔˆ ³(ˆ⌣ˆc)

最新推荐文章于 2024-06-29 23:13:31 发布

阅读量1.3k

点赞数 1

分类专栏：前端文章标签： javascript css css3

本文链接：https://blog.csdn.net/qq_45634787/article/details/128853026

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该文章提供了一段JavaScript代码，用于创建一个具有左右箭头、动态小圆点和自动播放功能的轮播图。当鼠标悬停在轮播图上时，显示控制箭头，离开时隐藏。用户可以通过点击箭头或小圆点来切换图片。代码适用于JavaScript初学者学习。

摘要由CSDN通过智能技术生成

js实现的简易轮播图，适合初学者

功能点

1 鼠标进入轮播图展示左右箭头，鼠标移除时隐藏
2 动态生成图片和小圆圈
3 图片移动时，对应的小圆圈会改变颜色
4 点击左右箭头可以切换轮播图
5 点击小圆圈可以切换到对应的图片
6 轮播图自动播放，鼠标移入轮播图，自动播放停止

css

 <div id="banner_wrap">
        <ul id="banner">
        </ul>
        <!-- 小圆圈 -->
        <ul class="focus">
        </ul>
        <!-- 左右箭头 -->
        <div class="btn left"></div>
        <div class="btn right"></div>
    </div>

样式

    <style type="text/css">
        *,
        ul,
        a {
            margin: 0;
            padding: 0;
            list-style: none;
            text-decoration: none;
            /*超链接下划线*/
        }

        #banner_wrap {
            height: 400px;
            width: 1000px;
            margin: 70px auto;
            border: 1px solid #dddddd;
            overflow: hidden;
            /*盒子溢出的部分不显示*/
            position: relative;
            /*相对定位*/
        }

        #banner {
            height: 400px;
            width: 4000px;
            position: absolute;
            /*绝对定位*/
        }

        #banner img {
            width: 1000px;
            height: 400px;
            float: left;
        }

        .btn {
            display: none;
            width: 35px;
            height: 70px;
            position: absolute;
            z-index: 2;
            opacity: .5;
            /*透明度*/
            top: 50%;
            margin-top: -35px;
            border-radius: 3px;
            /*方框的边角弧度*/
            cursor: pointer;
            /*鼠标放到上面的样式*/
        }

        .right {
            left: 960px;
            background: url("../image/right.png") #ccc no-repeat 50%;
        }

        .left {
            left: 5px;
            background: url("../image/left.png") #ccc no-repeat 50%;
        }

        /*用伪类选择器做出鼠标放置在div相框中左右箭头的淡入淡出*/
        #banner_wrap:hover>.btn {
            display: block;
        }

        .focus {
            width: 108px;
            height: 20px;
            position: absolute;
            z-index: 3;
            left: 50%;
            margin-left: -54px;
            bottom: 12px;
        }

        .focus>li {
            width: 12px;
            height: 12px;
            background: #FFFFFF;
            float: left;
            border-radius: 50%;
            margin: 4px 4px;
            cursor: pointer;
        }
    </style>

js 代码

 <script>
            var imgArr = [
                {
                    src: 'http://p1.music.126.net/4YaMKQZ5UVRzFklcVZjXcQ==/109951168267766752.jpg?imageView&quality=89'
                },
                {
                    src: 'http://p1.music.126.net/sDRfXlvOUsVx5o87oxKo5A==/109951168267554057.jpg?imageView&quality=89'
                },
                {
                    src: 'http://p1.music.126.net/xdK46YZW1eI__3OjGXsucw==/109951168267964406.jpg?imageView&quality=89'
                },
                {
                    src: 'http://p1.music.126.net/Sevs60nRGz0PCKq6iM5umg==/109951168267742401.jpg?imageView&quality=89'
                },
            ]
            // 鼠标经过轮播图时显示按钮，离开时隐藏
            var banner = document.querySelector('#banner');
            var wrap = document.querySelector('#banner_wrap');
            for (var i = 0; i < imgArr.length; i++) {
                var li = document.createElement('li');
                var a = document.createElement('a');
                a.href = '#';
                var img = document.createElement('img');
                img.src = imgArr[i].src;
                img.alt = '';
                a.appendChild(img);
                li.appendChild(a);
                banner.appendChild(li);
            }
            //左箭头
            var left = document.querySelector('.left');
            var right = document.querySelector('.right');
            //小圆点
            var focus = document.querySelector('.focus');
            //所有li
            var images = banner.querySelectorAll('img');
            //图片长度
            var imagesLength = images.length;
            //图片宽度
            var imgWidth = images[0].offsetWidth;
            //动画是否结束
            var animateSuccess = true;
            //当前图片的下标
            var curImgIndex = 0;
            //自动播放时间间隔
            var autoPlayInterval = 3000;
            //遍历li
            for (var i = 0; i < imagesLength; i++) {
                var li = document.createElement('li');
                li.setAttribute('index', i);
                focus.appendChild(li);
                li.addEventListener('click', function () {
                    if (animateSuccess) {
                        animateSuccess = false;
                        var idx = parseInt(this.getAttribute('index'));
                        var interval = idx * imgWidth;
                        animate(banner, -interval, function () {
                            animateSuccess = true;
                        });
                        curImgIndex = idx;
                        setCurrentFocus();
                    }
                })
            }
            //设置圆点背景色
            setCurrentFocus();
            //左箭头
            left.addEventListener('click', function () {
                if (animateSuccess) {
                    //如果当前是第一张，则定位到最后一张
                    if (curImgIndex == 0) {
                        curImgIndex = imagesLength - 1;
                        banner.style.left = -(banner.offsetLeft + imgWidth * curImgIndex) + 'px';
                    } else {
                        animateSuccess = false;
                        animate(banner, banner.offsetLeft + imgWidth, function () {
                            animateSuccess = true;
                        })
                        curImgIndex--;
                    }
                    //设置小圆点
                    setCurrentFocus()

                }
            })
            //右箭头
            right.addEventListener('click', function () {
                if (animateSuccess) {
                    //如果当前最后一张，则定位到第一张
                    if (curImgIndex == imagesLength - 1) {
                        curImgIndex = 0;
                        banner.style.left = (banner.offsetLeft + imgWidth * (imagesLength - 1)) + 'px';
                    } else {
                        animateSuccess = false;
                        animate(banner, banner.offsetLeft - imgWidth, function () {
                            animateSuccess = true;
                        })
                        curImgIndex++;
                    }
                    setCurrentFocus()

                }
            })
            //自动播放定时器
            var autoPlayTimer = setInterval(function () {
                right.click();
            }, autoPlayInterval);

            //鼠标移入移除自动播放定时器
            wrap.addEventListener('mouseenter', function () {
                clearInterval(autoPlayTimer);
                autoPlayTimer = null;
            })
            //鼠标移出开启自动播放定时器
            wrap.addEventListener('mouseleave', function () {
                autoPlayTimer = setInterval(function () {
                    right.click();
                }, autoPlayInterval);
            })
            /*
            *简单的一个左右移动的动画效果，用定时器实现
            */
            function animate(obj, target, callback) {
                clearInterval(obj.timer);
                obj.timer = setInterval(() => {
                    //移动的距离 / 10 == 步长
                    var distance = target - obj.offsetLeft;
                    //步长
                    var step = distance / 10;
                    step = step > 0 ? Math.ceil(distance) : Math.floor(distance);
                    obj.style.left = obj.offsetLeft + step + 'px';
                    //移动到目标位置结束定时器，执行回调函数
                    if (obj.offsetLeft == target) {
                        clearInterval(obj.timer);
                        callback && callback();
                    }
                }, 50)
            }
            //设置当前的小圆圈
            function setCurrentFocus() {
                for (var i = 0; i < focus.children.length; i++) {
                    focus.children[i].style.background = '#FFFFFF';
                }
                focus.children[curImgIndex].style.background = 'red';
            }
        </script>

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style type="text/css">
       *,
       ul,
       a {
           margin: 0;
           padding: 0;
           list-style: none;
           text-decoration: none;
           /*超链接下划线*/
       }

       #banner_wrap {
           height: 400px;
           width: 1000px;
           margin: 70px auto;
           border: 1px solid #dddddd;
           overflow: hidden;
           /*盒子溢出的部分不显示*/
           position: relative;
           /*相对定位*/
       }

       #banner {
           height: 400px;
           width: 4000px;
           position: absolute;
           /*绝对定位*/
       }

       #banner img {
           width: 1000px;
           height: 400px;
           float: left;
       }

       .btn {
           display: none;
           width: 35px;
           height: 70px;
           position: absolute;
           z-index: 2;
           opacity: .5;
           /*透明度*/
           top: 50%;
           margin-top: -35px;
           border-radius: 3px;
           /*方框的边角弧度*/
           cursor: pointer;
           /*鼠标放到上面的样式*/
       }

       .right {
           left: 960px;
           background: url("../image/right.png") #ccc no-repeat 50%;
       }

       .left {
           left: 5px;
           background: url("../image/left.png") #ccc no-repeat 50%;
       }

       /*用伪类选择器做出鼠标放置在div相框中左右箭头的淡入淡出*/
       #banner_wrap:hover>.btn {
           display: block;
       }

       .focus {
           width: 108px;
           height: 20px;
           position: absolute;
           z-index: 3;
           left: 50%;
           margin-left: -54px;
           bottom: 12px;
       }

       .focus>li {
           width: 12px;
           height: 12px;
           background: #FFFFFF;
           float: left;
           border-radius: 50%;
           margin: 4px 4px;
           cursor: pointer;
       }
   </style>
</head>

<body>
   <div id="banner_wrap">
       <ul id="banner">
       </ul>
       <!-- 小圆圈 -->
       <ul class="focus">
       </ul>
       <!-- 左右箭头 -->
       <div class="btn left"></div>
       <div class="btn right"></div>
   </div>
       <!-- 
               功能点：
               1 鼠标经过轮播图时显示按钮，离开时隐藏
               2 点击右侧按钮，图片往左播放一张，点击左侧按钮相反
               3 图片播放的同时，下面的圆圈模块会跟随一起变化
               4 点击小圆圈，可以播放相应图片
               5 鼠标不经过轮播图时，自动播放图片；鼠标经过轮播图时，自动播放停止
            -->
       <script>
           var imgArr = [
               {
                   src: 'http://p1.music.126.net/4YaMKQZ5UVRzFklcVZjXcQ==/109951168267766752.jpg?imageView&quality=89'
               },
               {
                   src: 'http://p1.music.126.net/sDRfXlvOUsVx5o87oxKo5A==/109951168267554057.jpg?imageView&quality=89'
               },
               {
                   src: 'http://p1.music.126.net/xdK46YZW1eI__3OjGXsucw==/109951168267964406.jpg?imageView&quality=89'
               },
               {
                   src: 'http://p1.music.126.net/Sevs60nRGz0PCKq6iM5umg==/109951168267742401.jpg?imageView&quality=89'
               },
           ]
           // 鼠标经过轮播图时显示按钮，离开时隐藏
           var banner = document.querySelector('#banner');
           var wrap = document.querySelector('#banner_wrap');
           for (var i = 0; i < imgArr.length; i++) {
               var li = document.createElement('li');
               var a = document.createElement('a');
               a.href = '#';
               var img = document.createElement('img');
               img.src = imgArr[i].src;
               img.alt = '';
               a.appendChild(img);
               li.appendChild(a);
               banner.appendChild(li);
           }
           //左箭头
           var left = document.querySelector('.left');
           var right = document.querySelector('.right');
           //小圆点
           var focus = document.querySelector('.focus');
           //所有li
           var images = banner.querySelectorAll('img');
           //图片长度
           var imagesLength = images.length;
           //图片宽度
           var imgWidth = images[0].offsetWidth;
           //动画是否结束
           var animateSuccess = true;
           //当前图片的下标
           var curImgIndex = 0;
           //自动播放时间间隔
           var autoPlayInterval = 3000;
           //遍历li
           for (var i = 0; i < imagesLength; i++) {
               var li = document.createElement('li');
               li.setAttribute('index', i);
               focus.appendChild(li);
               li.addEventListener('click', function () {
                   if (animateSuccess) {
                       animateSuccess = false;
                       var idx = parseInt(this.getAttribute('index'));
                       var interval = idx * imgWidth;
                       animate(banner, -interval, function () {
                           animateSuccess = true;
                       });
                       curImgIndex = idx;
                       setCurrentFocus();
                   }
               })
           }
           //设置圆点背景色
           setCurrentFocus();
           //左箭头
           left.addEventListener('click', function () {
               if (animateSuccess) {
                   //如果当前是第一张，则定位到最后一张
                   if (curImgIndex == 0) {
                       curImgIndex = imagesLength - 1;
                       banner.style.left = -(banner.offsetLeft + imgWidth * curImgIndex) + 'px';
                   } else {
                       animateSuccess = false;
                       animate(banner, banner.offsetLeft + imgWidth, function () {
                           animateSuccess = true;
                       })
                       curImgIndex--;
                   }
                   //设置小圆点
                   setCurrentFocus()

               }
           })
           //右箭头
           right.addEventListener('click', function () {
               if (animateSuccess) {
                   //如果当前最后一张，则定位到第一张
                   if (curImgIndex == imagesLength - 1) {
                       curImgIndex = 0;
                       banner.style.left = (banner.offsetLeft + imgWidth * (imagesLength - 1)) + 'px';
                   } else {
                       animateSuccess = false;
                       animate(banner, banner.offsetLeft - imgWidth, function () {
                           animateSuccess = true;
                       })
                       curImgIndex++;
                   }
                   setCurrentFocus()

               }
           })
           //自动播放定时器
           var autoPlayTimer = setInterval(function () {
               right.click();
           }, autoPlayInterval);

           //鼠标移入移除自动播放定时器
           wrap.addEventListener('mouseenter', function () {
               clearInterval(autoPlayTimer);
               autoPlayTimer = null;
           })
           //鼠标移出开启自动播放定时器
           wrap.addEventListener('mouseleave', function () {
               autoPlayTimer = setInterval(function () {
                   right.click();
               }, autoPlayInterval);
           })
           /*
           *简单的一个左右移动的动画效果，用定时器实现
           */
           function animate(obj, target, callback) {
               clearInterval(obj.timer);
               obj.timer = setInterval(() => {
                   //移动的距离 / 10 == 步长
                   var distance = target - obj.offsetLeft;
                   //步长
                   var step = distance / 10;
                   step = step > 0 ? Math.ceil(distance) : Math.floor(distance);
                   obj.style.left = obj.offsetLeft + step + 'px';
                   //移动到目标位置结束定时器，执行回调函数
                   if (obj.offsetLeft == target) {
                       clearInterval(obj.timer);
                       callback && callback();
                   }
               }, 50)
           }
           //设置当前的小圆圈
           function setCurrentFocus() {
               for (var i = 0; i < focus.children.length; i++) {
                   focus.children[i].style.background = '#FFFFFF';
               }
               focus.children[curImgIndex].style.background = 'red';
           }
       </script>


  
</body>

</html>