JS基础-完成轮播图界面(精)

最新推荐文章于 2024-05-15 10:15:46 发布

linqunbin

最新推荐文章于 2024-05-15 10:15:46 发布

阅读量2.8k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/linqunbin/article/details/91129521

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

这么小的功能,居然动用这么多代码,太复杂了.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        /* 设置div容器 */
        #outer{
            /* 设置高和宽,
            虽然照片宽度是300px,但是imgList li设置了margin左右外边距为10px,
            所以这里的宽度为300px + 左边距10px + 右边距10px,总共为320px */
            width: 320px;
            height: 400px;
            /* 居中，第一个数字代表上下,auto代表左右 */
            margin: 10px auto;
            /* 设置背景颜色 */
            background-color: rgba(204, 70, 132, 0.918);
            /* 这只padding，第一个数值代表上下，第二个数值代表左右*/
            padding: 10px 0px;
            /* 开启相对定位
            子配置决定定位 ,父需要配置相对定位. */
            position: relative;
            /* 裁剪溢出的内容 */
            overflow: hidden;
        }

        #imgList{
            /* 去除ul符号 */
            list-style: none;
            /* 设置ul的宽度 */
            /* width: 1600px; */
            /* 开启绝对定位 
            子配置决定定位 ,父需要配置相对定位. */
            position: absolute;
        }
        #imgList li{
            /* 设置浮动 */
            float: left;
            /* 设置左右外边距,第一个数值代表上下，第二个数值代表左右 */
            margin: 0px 10px;
        }
        /* 设置导航按钮 */
        #navDiv{
            /* 开启绝对定位 */
            position: absolute;
            /* 设置位置 */
            bottom: 15px;
            /* 设置left值
                outer宽度:320
                naDiv宽度:25 * 6 = 150
                320 - 150 = 170
                170 / 2 = 85
             */
             /* 下面这样写,就写死了,所以下面用JS来写. */
             /* left: 85px; */
        }
        #navDiv a{
            /* 设置超链接浮动 */
            float: left;
            /* 设置超链接的宽和高 */
            width: 15px;
            height: 15px;
            background-color: red;
            /* 设置左右外边距 */
            margin: 0px 5px;
            /* 设置透明 */
            opacity: 0.5;
        }
        /* 下面这种方式使用不是很好用,所以用JS来写下面代码 */
        #navDiv a:hover{
            background-color: black;
        }
    </style>
    <script type="text/javascript" src="133JSmove.js"></script>
    <script type="text/javascript">
        window.onload = function(){
            var outer = document.getElementById('outer');
            var imgList = document.getElementById('imgList');
            var imgs = imgList.getElementsByTagName('img');
            // 为防止增 删图片,因此元素imgList的宽度不应该写死,而是由图片的数量来决定宽度.
            // 320为div容器320的宽度,乘以 imgs.length为图片的数量.
            imgList.style.width = 320 * imgs.length + 'px';
            for(let i=0; i<imgs.length; i++){
                imgs[i].style.width = '300px';
                imgs[i].style.height = '400px';
            };
            
            // 设置导航按钮居中:
            var navDiv = document.getElementById('navDiv');

             // 添加a元素,有几张照片,添加几个:
            for(let i=0; i<imgs.length; i++){
                // 注意,这里的href一定要写:javascript:; 否则无法实现切换图片效果.
                navDiv.innerHTML += '<a href="javascript:;"></a>'
            };

            // 设置navDiv的left值
            navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + 'px';
            
            // 获取图片索引
            var index = 0;
            // 获得navDiv元素里所有的a元素
            var allA = navDiv.getElementsByTagName('a');
            // 设置默认选中效果
            allA[index].style.backgroundColor = 'black';
            
            /*
            点击超链接,切换到指定的图片
            */
            // 为所有的超链接,添加单击响应函数
            for(let i=0; i<allA.length; i++){
                // 为每个超链接,添加num属性
                allA[i].num = i;
                // 为超链接绑定单击相应函数
                allA[i].onclick = function(){
                    // 关闭自动切换定时器
                    clearInterval(timer);
                    // 获取单击超链接的索引,并将其设置为index
                    index = this.num;
                    
                    // 切换图片
                    /*
                    第一张索引为0,left=0
                    第二张索引为1,left=-320
                    第二张索引为2,left=-640
                    */
                    // imgList.style.left = -320 * index + 'px';
                    setA();

                    // 这里引用了:133JSmove.js里的函数
                    move(imgList, 'left', -320*index, 50, function(){
                        // 再次开启自动切换定时器
                        autoChange();
                    });
                }
            };

            // 自动切换图片
            autoChange();

            // 设置一个方法,用来设置选中的a
            function setA(){
                // 判断当前索引是否是最后一张图片.
                // if(index >= imgs.length){
                //     // 当索引超出图片数量时,重新开始索引.
                //     index = 0;
                //     imgList.style.left = '0px';
                // };

                // 遍历所有的a,并将他们背景颜色设置为红色
                for(let i=0; i<allA.length; i++){
                    // 内联函数优先级高于外联函数,这里不能配置内联函数
                    allA[i].style.backgroundColor = '';
                }
                // 设置选中的a为黑色
                allA[index].style.backgroundColor = 'black';
            };

            var timer
            // 创建一个函数,用来开启自动切换图片
            function autoChange(){
                timer = setInterval(function(){
                    // 使索引进行自增
                    index++;
                    
                    // 判断当前索引是否是最后一张图片.
                    if(index >= imgs.length){
                        // 当索引超出图片数量时, 重新开始索引.
                        index = 0;
                        imgList.style.left = '0px';
                    };

                    // 这里引用了:133JSmove.js里的函数
                    move(imgList, 'left', -320*index, 50, function(){
                        // 修改导航按钮
                        setA();
                    });
                    
                }, 3000);
            };
        };
    </script>
<body>
    <!-- 创建一个大的div，来作为大的容器 -->
    <div id="outer">
        <ul id="imgList">
            <li>
                <img src="/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/001.jpg" alt="">
            </li>
            <li>
                <img src="/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/002.jpg" alt="">
            </li>
            <li>
                <img src="/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/003.jpg" alt="">
            </li>
            <li>
                <img src="/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/004.jpg" alt="">
            </li>
            <li>
                <img src="/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/005.jpg" alt="">
            </li>
            <li>
                <img src="/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/006.jpg" alt="">
            </li>
            <li>
                <img src="/home/bruce/Bruce Lin/Fun/photo/girls/Charlize Theron/007.jpg" alt="">
            </li>
        </ul>
        <!-- 创建导航按钮 -->
        <div id="navDiv">
        </div>
        
    </div>
</body>
</html>

linqunbin

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS基础-完成轮播图界面(精)

这么小的功能,居然动用这么多代码,太复杂了.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
复制链接

扫一扫