JavaScript制作网页中的轮播图(带有过渡效果)源码解析

ゝ一纸荒年。 2023-10-08 12:46 13阅读 0赞

注：本练习主要以效果图和源码解析的方式介绍，如有疑问可参考尚硅谷李立超老师的JS基础教程(https://www.bilibili.com/video/BV1YW411T7GX?p=136);

效果图：  
!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20210413203106801.gif![在这里插入图片描述][20210413203222521.gif]

源码解析：

<!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>轮播图2</title>
        <style>
            *{
         
                margin: 0px;
                padding: 0px;
            }
            #outer{
         
                width: 520px;
                height: 333px;
                background-color: wheat;
                /* 居中 */
                margin: 20px auto;
                padding: 10px 0;
                position: relative;
                overflow: hidden;
            }   
            #imgList{
         
                list-style: none;
                /* width: 2600px; */
                position: absolute;
            }
            #imgList li{
         
                /* 设置浮动 */
                float: left;
                /* 设置外面距 */
                margin: 0px 10px;
            }
    
            #navDiv{
         
                /* width: 125px; */
                /* height: 20px; */
                /* background-color: red; */
                position: absolute;
                z-index: 1;
            }
            #navDiv a{
         
                box-sizing: border-box;
                display: inline-block;
                width: 15px;
                height: 15px;
                margin-left: 5px;
                border: 2px solid transparent;
                border-radius: 8px;
                background-color: rgba(60, 150, 180, 0.7);
            }
    
            /* 设置鼠标移入的效果 */
            #navDiv a:hover{
         
                background-color: rgba(70, 255, 255, .7);
            }
    
        </style>
        <script type="text/javascript">
        
            window.onload = function(){
         
                // 获取imgList
                var imgList = document.getElementById("imgList");
                // 获取img
                var imgArr = document.getElementsByTagName("img");
                // 设置imgList的宽度
                imgList.style.width = 520 * imgArr.length + "px";
    
                // imgList.style.left = "-520px";
    
                //设置导航按钮居中
                //获取navDiv
                var navDiv = document.getElementById("navDiv");
                //获取outer
                var outer = document.getElementById("outer");
                //设置导航按钮的位置
                navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
                navDiv.style.top = outer.offsetHeight - 40 + "px";
    
                //设置导航按钮的样式
                var index = 0;
                var allA = document.getElementsByTagName("a");
                allA[index].style.backgroundColor = "rgba(80, 255, 255, .7)";
    
                // 点击超链接切换到指定的图片
                // 为所有的超链接都绑定单击响应函数
                for(var i=0; i<allA.length; i++){
         
    
                    //为每一个超链接都添加一个num属性
                    allA[i].num = i;
                    //为超链接绑定单击响应函数
                    allA[i].onclick = function(){
         
                        //关闭自动切换的定时器
                        clearInterval(tmr);
    
                        //获取点击的超链接的索引，并将其设置为index
                        index = this.num;
    
                        //切换图片
                        // imgList.style.left = index * (-520) +"px";
    
                        //修改正在选中的导航按钮的背景颜色
                        setA();
    
                        //使用move来切换图片
                        move(imgList, "left", -520*index, 20, function(){
         
                            autoChange();
                        });
                    };
                }
    
    
                //开启自动切换图片
                autoChange();
    
    
                //创建一个方法用来设置选中的a
                function setA(){
         
                    if(index == imgArr.length - 1){
         
                        index = 0;
    
                        //此时显示的最后一张图片，而最后一张图片和
                        //通过CSS将最后一张切换成第一张
                        imgList.style.left = 0;
    
                    }
    
                    //遍历所有a，并将他们的背景颜色设置为初始色
                    for(var i=0; i<allA.length; i++){
         
                        //此时不能设置背景颜色为默认颜色，因为如果设置了则会覆盖内联样式导致a元素的hover失效
                        allA[i].style.backgroundColor = "";
                    }
                    //设置被选中的按钮的颜色
                    allA[index].style.backgroundColor = "rgba(80, 255, 255, .7)";
                }
    
    
                //定义一个自动切换的定时器的标识
    			var tmr;
    			//创建一个函数，用来开启自动切换图片
    			function autoChange(){
         
    					
    				//开启一个定时器，用来定时去切换图片
    				tmr = setInterval(function(){
         
    						
    					//使索引自增
    					index++;
    					//判断index的值
    					index %= imgArr.length;
    						
    					//执行动画，切换图片
    					move(imgList , "left" , -520*index , 20 , function(){
         
    						//修改导航按钮
    						setA();
    					});
                        console.log(index);
    						
    				},1000);
    					
    			}
            };
            
    
    
            //图形移动效果的方法，该方法也可在其他练习中使用
            function move(obj, st, target, speed, callback){
         
    
                clearInterval(obj.timer);
                
                var current = parseInt(getStyle(obj, st));
                if (current > target){
         
                    speed = -speed;
                }
    
                obj.timer = setInterval(function(){
         
                    var oldValue = parseInt(getStyle(obj, st));
                    var newValue = oldValue + speed;
                    // console.log(newValue);
                    obj.style[st] = newValue + "px";
    
    
                    if((speed > 0 || newValue <= target) && (speed < 0 || newValue >= target)){
         
                        obj.style[st] = target + "px";
                        clearInterval(obj.timer);
                        callback && callback();
                    }
    
                },10);
    
            }
    
            //获取元素属性值的方法
            function getStyle(obj, st){
         
                if(window.getComputedStyle){
         
                    //标准浏览器获取属性值的方法
                    return getComputedStyle(obj, null)[st];
                }else{
         
                    //IE8获取属性值的方法
                    return obj.currentStyle[st];
                }
            }
    
        </script>
    </head>
    <body>
        
        <div id="outer">
            
            <div id="navDiv">
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>
            
            
            <ul id="imgList">
                <li>
                    <img src="../02DOM/img/1.jpg" alt="">
                </li>
                <li>
                    <img src="../02DOM/img/2.jpg" alt="">
                </li>
                <li>
                    <img src="../02DOM/img/3.jpg" alt="">
                </li>
                <li>
                    <img src="../02DOM/img/4.jpg" alt="">
                </li>
                <li>
                    <img src="../02DOM/img/5.jpg" alt="">
                </li>
                <li>
                    <img src="../02DOM/img/1.jpg" alt="">
                </li>
            <ul>
              
        </div>
    </body>
    </html>

[20210413203222521.gif]: https://img-blog.csdnimg.cn/20210413203222521.gif