使用javascript完成轮播图效果，代码简单

最新推荐文章于 2024-08-12 16:04:13 发布

扼流挽

最新推荐文章于 2024-08-12 16:04:13 发布

阅读量596

点赞数 11

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/zbz00720/article/details/138238939

版权

本文介绍了如何使用HTML、CSS和JavaScript构建一个基础的页面结构，包含图片显示区和索引框。CSS用于样式设置，JavaScript则实现图片轮播和索引按钮的交互功能，通过`scrollLeft`和定时器实现平滑滚动和自动切换。

摘要由CSDN通过智能技术生成

一、页面基本结构

<body>
    <div class="box">
        <ul class="list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <ul class="btns">
        <li class="checked">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>    
</body>

很简单的结构，上面的ul是图片显示区，下面的是索引盒子，示例图如下：在这里插入图片描述

二、css样式

<style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }
        body{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .box{
            width: 804px;
            height: 704px;
            border: 2px solid #666;
            margin: 20px auto;
            overflow: hidden;
        }
        .list{
            width: 4000px;
            height: 700px;
        }
        .list li{
            width: 800px;
            height: 100%;
            float: left;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
        }
        .list li:nth-child(1){
            background-image: url(./img/图片1.jpg);
        }
        .list li:nth-child(2){
            background-image: url(./img/图片2.jpg);
        }
        .list li:nth-child(3){
            background-image: url(./img/图片3.jpg);
        }
        .list li:nth-child(4){
            background-image: url(./img/图片4.jpg);
        }
        .list li:nth-child(5){
            background-image: url(./img/图片5.jpg);
        }
        .btns{
            margin: 10px auto;
        }
        .btns li{
            width: 100px;
            height: 50px;
            border: 1px solid #666;
            font-size: 30px;
            text-align: center;
            line-height: 48px;
            font-weight: bold;
            float: left;
            cursor: pointer;
        }
        .btns li.checked{
            background-color: #666;
            color: #fff;
        }
    </style>

同样是特别简单的css样式，这里就不赘述了，如果要复制我的代码，请把图片换成自己喜欢的图片（别忘了更改图片路径哦！）

2.javascript代码

<script>
    //获取需要操作的必要元素
    var box = document.querySelector('.box');
    var list = document.querySelector('.list');
    var btns = document.querySelector('.btns');

    var timer = null;
    var timer1 = null;
    // 设置两个变量，用来记录计时器的id
    var nowNum = 0;
    // 设置一个函数，表示当前显示的图片

    //设置一个工具函数
    function moveto(start,end){
        //设置两个形参，一个用来接收开始位置，一个用来接收结束位置

        if( timer ) return false; 
        // 判断计时器是否存在，存在则终止函数运行，防止计时器累加

        var yun = 0; // 记录运动次数
        var cont = 10; // 设置一个 “总步数”
        var mei = ( end - start ) / cont; 
        // 让结束位置的值 减 开始位置的值，可以得到它们之间的 差值
        // 然后用差值 除以 总步数 就可以得到，每一步要走的距离值，这里叫做 步进值

        //设置一个运动函数
        timer = setInterval( move,10 )
        function move(){
            yun++;
            // 运动次数增加
            box.scrollLeft += mei; 
            // 图片列表盒子的 左滚动条距离 每次增加一个 步进值 的距离，实现滚动效果
            if( yun === cont ){ // 判断运动次数 是否等于了 总步数 
                clearInterval( timer );
                timer = null;
                // 清除计时器，并恢复timer变量
            }
        }
    }

    // 设置一个调用函数
    function ssr(){
        if( timer1 ) return false;
        // 一样做一个判断，防止计时器累加
        timer1 = setInterval( autoPlay,2000 )
        // 让页面每隔两秒切换一张图片
    }

    //设置一个自动播放的工具函数
    function autoPlay(){
        nowNum++; 
        // 图片索引变化为下一张
        if( nowNum >= list.children.length ){
            // 判断图片索引是否 显示到了最后一张图片，如果是，则赋值为0
            nowNum = 0;
            /*
                讲解临界值情况：
                如果 下一站图片索引 变为了0，则现在的滚动距离就是 现在最后一张图片的滚动距离。
                调用工具函数时，0*800的值还是0，而用0 减 现在滚动距离，则会得到一个 负数。
                差值为负数，函数依旧可以运行，图片会运动会第一张图片。
            */
        }
        moveto( box.scrollLeft,nowNum*800 ) 
        //调用工具函数，开始位置永远是 现在的已经滚动距离，结束位置是 显示下一张图片的位置
        btnColor( nowNum );
        //调用工具函数，让索引盒子跟随图片变化。
    }

    window.onload = ssr;
    // 页面加载完毕，开始调用自动播放

    // 给图片索引盒子设置随图片变化颜色，这里先设置一个工具函数
    function btnColor(num){
        //for循环初始化所有盒子 
        for( var a = 0; a < btns.children.length; a++ ){
            btns.children[a].className = '';
        }
        btns.children[num].className = 'checked';
        //让当前的盒子变为选中状态
    }

    // 给图片索引盒子设置上鼠标移动事件
    for( var i = 0; i < btns.children.length; i++ ){
        //这里用立即调用匿名函数的方法，防止变量污染
        (function(i){
            btns.children[i].onmouseover = function(){
                //清除自动播放，然后再让页面跳转到对应的图片，调用一下工具函数就可以了
                clearInterval(timer1);
                timer1 = null;
                nowNum = i; // 让下一张要移动的图片索引，换成现在触发鼠标移动事件的索引盒子。
                if( nowNum >= list.children.length ){
                    nowNum = 0;
                }
                moveto( box.scrollLeft,nowNum*800 ) 
                btnColor( nowNum );
                //再设置上计时器，让页面再次自动播放
                ssr();
            }
        }(i))
    }
</script>