手写轮播图

lululu_
于 2022-07-10 23:57:14 发布
阅读量158
点赞数
分类专栏： JavaScript 文章标签： css css3 html
本文链接：https://blog.csdn.net/lululu_/article/details/125713135
版权
JavaScript 专栏收录该内容
6 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写轮播图</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #outer {
            width: 420px;
            height: 730px;
            margin: 10px auto;
            padding: 10px 0;
            background-color: yellowgreen;
            /* 开启相对定位 */
            position: relative;
            /* 裁剪溢出的内容 */
            overflow: hidden;
        }

        #imgLists {
            list-style: none;
            /* 开启绝对定位 */
            position: absolute;
            /* 每往左移动420px(outer的宽度)，图片左移一张 */
            left: 0;
        }
        #imgLists li {
            float: left;
            margin: 0 10px;
        }
        #imgLists img {
            width: 400px;
            height: 730px;
        }

        /* 设置导航按钮 */
        #navDiv {
            /* 开启绝对定位 */
            position: absolute;
            left: 50%;
            bottom: 15px;
        }
        #navDiv a {
            /* 设置超链接浮动 */
            float: left;
            width: 10px;
            height: 10px;
            /* 设置左右外边距 */
            margin: 0 5px;
            background-color: red;
            /* 设置透明 */
            opacity: 0.5;
            /* 兼容IE8透明 */
            filter: alpha(opacity=50);
        }

        /* 设置鼠标移入样式 */
        #navDiv a:hover {
            background-color: #000;
        }
    
    </style>

    <script>
        window.onload = function() {
    
            // 获取 imgLists
            var imgLists = document.getElementById("imgLists");
            // 获取页面所有的 img 标签
            var imgArr = document.getElementsByTagName("img");
            // 动态设置 imgLists 的宽度
            imgLists.style.width = 420 * imgArr.length + "px";

            // 获取box1元素对象
            var outer = document.getElementById("outer");
            // 获取navDiv元素对象
            var navDiv = document.getElementById("navDiv");
            // 动态设置navDiv导航按钮居中
            navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";

            // 获取导航按钮所有 a标签
            var allA = document.getElementsByTagName("a");
            // 默认展示按钮的索引
            var index = 0;
            // 默认展示第一个按钮的图片
            allA[index].style.backgroundColor = "#000";

            // 设置自动切换
            autoChange();

            // 提取自动切换函数
            var timer;
            function autoChange() {
                timer = setInterval(function(){
                index++;
                funcA();
                move(imgLists, "left", -(index % imgArr.length)*420, 300, function(){});                
                }, 2000);
            }

           // 点击超链接，展示对应的图片
           for(var i = 0; i < allA.length; i++) {
               allA[i].num = i;
           }
           
            // 给 ul 绑定单击事件
           navDiv.onclick = function(event) {
                event = event || window.event;

                clearInterval(timer);

                // 只有点击的是 a 标签才会响应
                if(event.target.localName == "a") {
                    // 获取点击超链接的索引，并将其设置为 index
                    index = event.target.num;

                    funcA();

                    // 也可以使用动画设置移动来切换图片
                    move(imgLists, "left", -index*420, 500, function(){
                        // 当动画执行完毕，继续开启自动切换
                        autoChange();
                    });                   
                }
           }

           // 设置导航栏按钮事件
           function funcA() {

               if(index > allA.length - 1) {
                   index = 0;
                   imgLists.style.left = 0;
               }
               for(var i = 0; i < allA.length; i++) {
                   allA[i].style.backgroundColor = "";
               }
               allA[index].style.backgroundColor = "black";
           }

		  // move移动函数
		  function move(obj, attr, target, speed, callback) {
		    // 关闭上一次的定时器
		    clearInterval(obj.timer);
		
		    // 获取元素当前的位置
		    var currentValue = parseInt(getStyle(obj, attr));
		
		    // 判断速度的正负值
		    if(currentValue > target) {
		        speed = -speed;
		    }
		
		    // 开启一个定时器，用来执行动画效果
		    obj.timer = setInterval(function() {
		
		        var oldValue = parseInt(getStyle(obj, attr));
		        
		        // 在旧值的基础上增加
		        var newValue = oldValue + speed;
		
		        // 向左移动时，需要判断 newValue是否小于target
		        // 向右移动时，需要判断 newValue是否大于target
		        if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
		            newValue = target;
		        }
		
		        // 将新值设置给 box1
		        // box1.style.left = box1.offsetLeft + 30 + "px";
		        obj.style[attr] = newValue + "px";
		
		        // 当元素移动到 target 时，使其停止执行动画
		        if(newValue === target) {
		            // 达到目标，关闭定时器
		            clearInterval(obj.timer);
		
		            // 动画执行完毕后执行回调函数
		            // 传了就执行，不传就不执行，不然直接执行会报错
		            callback && callback();
		        }
		    }, 30);
		}
  }
    </script>
</head>
<body>
    <!-- 创建一个外部容器div，来作为大的容器 -->
    <div id="outer">
        <ul id="imgLists">
            <li>
                <img src="./images/1.jpeg"/>
            </li>
            <li>
                <img src="./images/2.jpeg"/>
            </li>
            <li>
                <img src="./images/3.jpeg"/>
            </li>
            <li>
                <img src="./images/4.jpeg"/>
            </li>
            <li>
                <img src="./images/5.jpeg"/>
            </li>
            <li>
                <img src="./images/6.jpeg"/>
            </li>
            <li>
                <img src="./images/7.jpeg"/>
            </li>
            
        </ul>
        <!-- 创建导航按钮 -->
        <div id="navDiv">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
    </div>
</body>
</html>