原生js实现轮播图

最新推荐文章于 2022-10-11 12:52:27 发布

QSZHT

最新推荐文章于 2022-10-11 12:52:27 发布

阅读量106

点赞数

分类专栏： javascript 文章标签： javascript html js

本文链接：https://blog.csdn.net/weixin_42380671/article/details/104748821

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

代码：

<body onload="changeImg()">
    <div class="main">
        <div class="container">
            <ul class="img">
                <li>
                    <img src="./img/banner1.jpg" alt="" id="img">
                </li>
            </ul>
            <ul id="round">

            </ul>
        </div>
    </div>
</body>
<script>
        var arr=['./img/banner1.jpg','./img/banner2.jpg','./img/banner3.jpg'];
        var str='';
        var index=0;
        //轮播图
        function changeImg() {
            setInterval(function () {
                index++;
                if(index==arr.length){
                    index=0;
                }
                document.getElementById('img').src=arr[index];
                //调用clickRound方法使小圆点跟着图片的改变而改变状态
                clickRound(index);
            },2000);
            round();
        }
        //生成小圆点
       function round() {
           for(var i=0;i<arr.length;i++){
               str+=`<li class="radius" onclick="clickRound(${i})" ></li>`
           }
           document.getElementById('round').innerHTML=str;
           roundPosition();
           //小圆点的默认状态
           clickRound(0);
       }
       //点击小圆点的状态
       function clickRound(i) {
           var li=document.getElementById('round').children;
           for(var j=0;j<li.length;j++){
               if(li[j].id=='active'){
                   li[j].id='radius'
               }
               li[i].id='active'
           }
           document.getElementById('img').src=arr[i];
       }
       //小圆点的位置
       function roundPosition() {
           var w=0;
           var ul=document.getElementById('round');
           var li=document.getElementById('round').children;
           for(var j=0;j<li.length;j++){
               w+=li[j].scrollWidth;//所有小圆点的宽的和
           }
           var y=(ul.scrollWidth-w)/2;//计算小圆点居中时，padding-left的值
           ul.style.paddingLeft=y+'px';
        }
</script>
</html>

效果图：
在这里插入图片描述

QSZHT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js实现轮播图

代码：<body onload="changeImg()"> <div class="main"> <div class="container"> <ul class="img"> <li> <img src="...
复制链接

扫一扫