利用JavaScript实现动态轮播图

最新推荐文章于 2024-01-02 07:57:02 发布

海阔天空ZMZ

最新推荐文章于 2024-01-02 07:57:02 发布

阅读量272

点赞数

分类专栏： JavaScript 文章标签： JavaScript 轮播图动态

本文链接：https://blog.csdn.net/weixin_45457515/article/details/99762084

版权

JavaScript 专栏收录该内容

13 篇文章 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>
        *{ margin: 0; padding: 0;}
        img{ display:block;}
        .box{ width: 700px; height: 525px; margin: 10px auto; border: 1px solid #000; position: relative;}
        .list{ position: absolute;  left: 0; top:0; background:rgba(0,0,0,.3); width: 100%; height: 30px; text-align: center; line-height: 30px;color: #fff; font-size: 20px;}
        .list span{ color: #fff; font-size: 20px;}
        .nav{ position: absolute; left: 0; bottom: 40px; text-align: center; width: 100%;}
        .nav span{ cursor: pointer; display: inline-block; width: 0; height: 0; border: 6px solid #eee; border-radius:50%; margin-right:5px; }
        .nav .active{ border: 6px solid #f60;}
        .content{ position: absolute;  left: 0; bottom:0; background:rgba(0,0,0,.3); width: 100%; height: 30px; text-align: center; line-height: 30px;color: #fff; font-size: 20px;}
        button{ width: 30px; height: 50px; position: absolute; top: 50%; margin-top: -25px; cursor: pointer;}
        .prev{ left: 0;}
        .next{ right: 0;}
    </style>
</head>
<body>
    <div class="box">
        <p class="list"><span>1</span>/<span>4</span></p>
        <img src="images/1.jpg" alt="">
        <p class="nav">
            <!-- <span class="active"></span>
            <span></span> -->
        </p>
        <p class="content">美女1</p>
        <button class="prev"><</button>
        <button class="next">></button>
    </div>
    <script>
        var box = document.querySelector('.box');
        var lists = document.querySelectorAll('.list span');
        // console.log(lists)
        var imgs = document.querySelectorAll('.box img')[0];
        var nav = document.querySelector('.nav');
        var content = document.querySelector('.content');
        var prev = document.querySelector('.prev');
        var next = document.querySelector('.next');
        var piclist = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"]
        var contlist = ['美女1','美女2','美女3','美女4']
        var len = piclist.length;
        var str = '';
        for(i=0;i<len;i++){
            str +='<span></span>' 
        }
        nav.innerHTML = str;
        lists[1].innerHTML = len
        var spans = document.querySelectorAll('.nav span');
        spans[0].className = 'active';
        for(i=0;i<len;i++){
            spans[i].index = i
            spans[i].onmouseover=function(){
                for(i=0;i<len;i++){
                    spans[i].className=''
                }
                num = this.index
                this.className = 'active';
                imgs.src = piclist[this.index];
                content.innerHTML = contlist[this.index];
                lists[0].innerHTML = this.index+1
            }
        }
        //  下一个按钮  和  划过的索引值  对应    num = this.index
        var num = 0;

        next.onclick = function(){
            play()
           
        }

        function play(){
            num++;
            if(num>3){
                num=0;
            }
            imgs.src = piclist[num];
            content.innerHTML = contlist[num];
            lists[0].innerHTML = num+1;
            for(i=0;i<len;i++){
                spans[i].className = '';
            }
            spans[num].className = 'active';
        }
        var timer = setInterval(function(){
            play()
        },2000)
        box.onmouseover = function(){
            clearInterval(timer)
        }
        box.onmouseout = function(){
            timer = setInterval(function(){
            play()
        },2000)
        }
        prev.onclick = function(){
            num--;
            if(num<0){
                num=3;
            }
            imgs.src = piclist[num];
            content.innerHTML = contlist[num];
            lists[0].innerHTML = num+1;
            for(i=0;i<len;i++){
                spans[i].className = '';
            }
            spans[num].className = 'active';
        }
    </script>
</body>
</html>

海阔天空ZMZ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用JavaScript实现动态轮播图

在以前的文章中演示了静态轮播图的做法静态轮播图的做法本文来通过添加一个定时器实现动态轮播图代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt...
复制链接

扫一扫