html中使用JS实现图片轮播效果

最新推荐文章于 2024-07-21 19:19:20 发布

小王先森

最新推荐文章于 2024-07-21 19:19:20 发布

阅读量1.7k

点赞数

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

本文链接：https://blog.csdn.net/qq_29881259/article/details/84202595

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

原文地址

HTML 部分

  <div id="bannner" class="main_center_bannar">
                                  
                                   <img  src="images/ad-01.jpg"/>
                                   <img  src="images/ad-02.jpg"  style="display:none" />
                                   <img  src="images/ad-03.jpg"  style="display:none" />
                                   <img  src="images/ad-04.jpg"  style="display:none" />
                                   <ul id="ulli"> <li class="selected">1</li><li class="selected">2</li><li class="selected">3</li><li class="selected">4</li> </ul>
 </div>

css

.main_center_bannar {
    width:100%;
   
    position: relative;
}
    .main_center_bannar img {
      
        width: 100%;
    }
    .main_center_bannar ul {
        list-style: none;
        display: flex;
       
        position: absolute;
        left:130px;
        bottom: 10px;
        z-index: 2;
    }

js部分

 var bannner = document.getElementById("bannner");
            var pic = bannner.getElementsByTagName("img");
            var dot = document.getElementById("ulli").getElementsByTagName("li");
           
            var index = 0;
            var timer = null;
            /*定义图片切换函数*/
            function changePic(curIndex) {
                for (var i = 0; i < pic.length; ++i) {
                    pic[i].style.display = "none";
                  
                }
                pic[curIndex].style.display = "block";
              
            }
            /*index超出图片总量时归零*/
            function autoPlay() {
                if (+index >= pic.length) {
                    index = 0;
                }
                changePic(index);
                index++;
            }
            /*定义并调用自动播放函数*/
            timer = setInterval(autoPlay, 1500);
            /*鼠标划过整个容器时停止自动播放*/
            bannner.onmouseover = function () {
                clearInterval(timer);
            }
            /*鼠标离开整个容器时继续播放下一张*/
            bannner.onmouseout = function () {
                timer = setInterval(autoPlay, 1500);
            }
            /*遍历所有数字导航实现划过切换至对应的图片*/
            for (var i = 0; i < dot.length; i++) {
                dot[i].onmouseover = function () {
                    clearInterval(timer);
                    index = this.innerText - 1;
                    changePic(index)
                }
            }