一、要求

请用所学知识设计一个图片轮播网页。要求有3幅以上图片,每幅图片展示一段时间后自动切换下一幅,也可以通过点击箭头进行左右切换。

二、效果

图片轮播示例

三、代码

<!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>旋转式图片轮播</title>
</head>
<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            width: 100%;
            height: 100%;
            background: #253242;
        }
        h1{
            color: white;
            text-align: center;
            margin-top: 180px;
        }
        /* 大盒子 */
        .box{
            height: 300px;
            width: 800px;
            margin: 50px auto;
            position: relative;
        }

        .box .imgbox{
            height: 250px;
            width: 800px;
            overflow: hidden;
            position: relative;
        }
        .box .imgbox li{
            position: absolute;
            width: 500px;
            height: 250px;
            transition:all  0.5s linear;
        }
        .box .imgbox li img{
            width: 100%;
            height: 100%;
        }
        /* 左侧图片样式 */
        .box .imgbox .img1{ 
            height: 180px;
            width: 400px;
            top:35px;
            left:0;
            z-index: 0;
            opacity: 0.8;
            transform:rotateY(40deg);
        }
        /* 中间图片样式 */
        .box .imgbox .img2{
            left: 150px;
            top:0;
            opacity: 1;
            z-index: 99;
        }
        /* 右侧图片样式 */
        .box .imgbox .img3{
            width: 400px;
            left: 400px;
            height: 180px;
            top:35px;
            opacity: 0.8;
            transform:rotateY(-40deg);

        }
        /* 小圆点 */
        nav{
            width: 100px;
            height: 20px;
            margin: 0 auto;
        }
        nav span{
            width: 7px;
            height: 7px;
            display: inline-block;
            border-radius: 3.5px;
            background: #708090;
            cursor: pointer;
        }
        /* 小圆点选中样式 */
        nav span.select{
            width: 13px;
            background: #fff;
        }

            /* 左右键样式 */
        .btn{
            position: absolute;
            width: 50px;
            height: 50px;
            background:rgba(0,0,0,0.5) ;
            top: 100px;
            color: #fff;
            font-size: 30px;
            line-height: 50px;
            text-align: center;
            display: none;
        }
        .back{
            left: 100px;
        }
            .next{
            right: 100px;
        }
</style>
<body>
    <h1>图片轮播示例</h1>
    <div class="box" id="box">
        <ul class="imgbox" id="imgbox">
            <li class="img2" ><img src="./img/1.jpg" alt=""></li>
            <li class="img1"><img src="./img/2.jpg" alt=""></li>
            <li class="img3"><img src="./img/3.jpg" alt=""></li>
        </ul>
        <!-- 左键右键 -->
        <span class="back btn" id="back"><</span>
        <span class="next btn" id="next">></span>
  
        <!-- 小圆点 -->
        <nav id='nav'>
            <span class="select"></span>
            <span></span>
            <span></span>
        </nav>
    </div>
    <script>
        var box = document.getElementById('box')  //获取大盒子
        var imgbox = document.getElementById('imgbox')  //获取图片盒子
        var img = imgbox.children //获取3张图片
        var back = document.getElementById('back') //获取左右键 
        var next = document.getElementById('next') //获取左右键
        var navspan = document.getElementById('nav').children  //获取小圆点
  
        var num = 1 //默认第一个小圆点亮起,用户控制哪一个小圆点亮起
        var onOff = true //开关,当前是否能点击,防止点击过快的bug
        var timer = null //定义定器
        var classarr = ['img2','img1','img3']  //三种图片样式
  
        //鼠标悬停图片层显示左右按钮
        box.onmouseover = function (){
            back.style.display = 'block'
            next.style.display = 'block'
            clearInterval(timer) //取消定时器  停止自动切换
        }
        //鼠标离开图片层隐藏左右按钮
        box.onmouseout = function (){
            back.style.display = 'none'
            next.style.display = 'none'
            timer = setInterval(nextImg,3000)  //重新开启定时器,自动切换
        }
  
        // 下一张按钮点击
        next.onclick = function (){
            if(onOff){
                onOff = false; //此时不可再次切换图片
                nextImg()      //调用切换下一张的函数
                setTimeout(function(){
                    onOff = true
                },500)        //0.5s后可以再次切换,0.5s与动画时间一致
            }

        }
        // 上一张按钮点击
        back.onclick = function (){
            if(onOff){
                if(num >1){  
                num--
                }else{
                num = 3
                }
                onOff = false;
                removenav(navspan[num-1])
                var lastValue = classarr.pop();  //取数组最后的元素
                classarr.unshift(lastValue);     //添加到数组头部
                //for循环遍历每一个li,逐个替换class
                for(var i = 0 ; i < classarr.length; i++){
                    img[i].className = classarr[i];
                };
                setTimeout(function(){
                    onOff = true
                },500)
            }

        }
        // 自动下一张
        timer = setInterval(nextImg,2500)
  
        // 切换下一张函数
        function nextImg(){
            if(num <3){
                num++
            }else{
                num = 1
            }
            removenav(navspan[num-1]) //改变圆点样式
            var fistValue = classarr.shift(); //取数组第一个值
            classarr.push(fistValue); //添加到数组最后
            //for循环遍历每一个li,逐个替换class
            for(var i = 0 ; i < classarr.length; i++){
                img[i].className = classarr[i];
            };
        }
  
        //修改圆点样式函数
        function removenav(obj){ //修改圆点样式
            for(var i = 0;i < navspan.length; i++){
                navspan[i].className = ''  //清除所有圆点样式
            }
            obj.className = 'select'
        }
    </script>
</body>
</html>

四、原文链接

【JS实例】原生JS轮播图之旋转木马(自动、手动切换)

Last modification:June 23rd, 2021 at 11:07 am
如果觉得我的文章对你有用,请我喝杯奶茶吧