带你实现轮播切换（超详细）

最新推荐文章于 2023-02-16 17:38:05 发布

Test_晓

最新推荐文章于 2023-02-16 17:38:05 发布

阅读量828

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_45473786/article/details/104985358

版权

JavaScript 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

文章目录

案例描述

在浏览器中每相隔一秒钟切换一张图片，图片相对应的图片解释也跟着改变。

案例图示

在这里插入图片描述

HTML

详解请看注释

<body>
    <div id="box">
        <ul class="left">
            <li class="current"><a href="#">图片一</a></li>
            <li><a href="#">图片二</a></li>
            <li><a href="#">图片三</a></li>
            <li><a href="#">图片四</a></li>
        </ul>
        <div class="center">
            <a href="#"><img src="./program1/images/1.jpg" width="200px" height="130px"></a>
            <a href="#"><img src="./program1/images/2.png" width="200px" height="130px"></a>
            <a href="#"><img src="./program1/images/4.jpg" width="200px" height="130px"></a>
            <a href="#"><img src="./program1/images/2.png" width="200px" height="130px"></a>
            <a href="#"><img src="./program1/images/1.jpg" width="200px" height="130px"></a>
            <a href="#"><img src="./program1/images/2.png" width="200px" height="130px"></a>
            <a href="#"><img src="./program1/images/4.jpg" width="200px" height="130px"></a>
            <a href="#"><img src="./program1/images/2.png" width="200px" height="130px"></a>
        </div>
        <ul class="right">
            <li><a href="#">图片五</a></li>
            <li><a href="#">图片六</a></li>
            <li><a href="#">图片七</a></li>
            <li><a href="#">图片八</a></li>
        </ul>
    </div> 
</body>

CSS

详解请看注释

<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
    }
    a {
        text-decoration: none;
        color: #000;
    }
    #box {
        width: 323px;
        height: 130px;
        border: 1px solid #ccc;
        margin: 100px auto;		/*水平居中*/
    }
    .left, .right {
        width: 60px;
        height: 130px;
        float: left;
    }
    .center {
        width: 200px;
        height:130px;
        float: left;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        /* 隐藏 */
        overflow: hidden;       
    }
    .center img {
        padding: 10px;
    }
    li {
        line-height: 20px;
        text-align: center;
        border-top: 1px solid #ccc;
        padding: 6px;
    }
    /* 去掉左右第一个孩子的上边框 */
    .left li:first-child, .right li:first-child {
        border-top: none;
    }
    
    /* 改变选中图片li的背景颜色 */
    .current  {
        background-color: #ccc;
    }
</style>

JS核心代码

这里需要注意：
（1）索引 index。没当轮播到最后一张图片后，又要重新轮播到第一张图片，所以在这里使用index %= 7
（2）使用排他思想，首先将所有的 li 标签className置为空， img 标签的style.display 置为 none，再处理选中事项

<script>
    window.onload = function (){
        //获取标签
        var allLi = document.getElementsByTagName('li');
        var allImg = document.getElementsByTagName('img');
        var current = document.getElementsByClassName('current');

        //索引
        var index = 0;

        //定时器
        setInterval(function(){
            //索引++
            index++;
            index %= 8;     //index  0-7

            //排他
            for (let i = 0; i < allLi.length; i++) {
               allLi[i].className = '';
               allImg[i].style.display = 'none';    
            }

            //处理选中
            allLi[index].className = 'current';
            allImg[index].style.display = 'block';
        },1000);

    };

</script>

Test_晓

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
带你实现轮播切换（超详细）

文章目录案例描述案例图示HTMLCSSJS核心代码案例描述在浏览器中每相隔一秒钟切换一张图片，图片相对应的图片解释也跟着改变。案例图示HTML详解请看注释<body> <div id="box"> <ul class="left"> <li class="current"><a hr...
复制链接

扫一扫