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

最新推荐文章于 2023-02-20 20:49:33 发布

Etui۹(･༥･´)و ̑̑

最新推荐文章于 2023-02-20 20:49:33 发布

阅读量881

点赞数 2

分类专栏： JavaScript CSS3 HTML5 文章标签： html css javascript bom dom

本文链接：https://blog.csdn.net/m0_47015897/article/details/115677831

版权

CSS3 同时被 3 个专栏收录

38 篇文章 16 订阅

订阅专栏

HTML5

37 篇文章 8 订阅

订阅专栏

JavaScript

30 篇文章 0 订阅

订阅专栏

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

效果图：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210413203106801.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，来作为大的容器 -->
    <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，用于放置图片 -->
        <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>

Etui۹(･༥･´)و ̑̑

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
JavaScript制作网页中的轮播图(带有过渡效果)源码解析

注：本练习主要以效果图和源码解析的方式介绍，如有疑问可参考尚硅谷李立超老师的JS基础教程(https://www.bilibili.com/video/BV1YW411T7GX?p=136);效果图：![在这里插入图片描述](https://img-blog.csdnimg.cn/20210413203106801.gif源码解析：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8
复制链接

扫一扫