JavaScript轮播图

最新推荐文章于 2024-11-08 16:59:14 发布

十澈

最新推荐文章于 2024-11-08 16:59:14 发布

阅读量89

点赞数

文章标签： css html javascript

本文链接：https://blog.csdn.net/fwt20000623/article/details/120324561

版权

本文介绍如何使用HTML、CSS和JavaScript来创建一个简单的轮播图效果。通过CSS设置样式，JavaScript处理图片切换和鼠标悬停自动播放功能，实现了一个交互式的轮播组件。提供的代码示例详细展示了每个部分的实现细节，并附带了实际效果的链接。

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

简易js轮播图

使用css+JavaScript制作简单的轮播效果

css部分

<style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,ol{
            list-style: none;
        }
        #box{
            width: 520px;
            height: 280px;
            overflow: hidden;
            position: relative;  
        }
        #box ol{
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translate(-50%);
        }
        #box ol li{
            width: 35px;
            height: 35px;
            background: rgb(214, 213, 213);
            float: left;
            margin-right: 10px;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
        }
    </style>

html部分

<div id="box">
       <ul>
           <li><img src="./img/O1CN01dGOhg12JXuMdR7l62_!!282179432-0-alimamazszw.jpg" alt=""></li>
           <li><img src="./img/TB183NQapLM8KJjSZFBSutJHVXa.jpg" alt=""></li>
           <li><img src="./img/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg" alt=""></li>
       </ul>
       <ol>
           <li>1</li>
           <li>2</li>
           <li>3</li>
       </ol>
    </div>

javascript部分

<script>
        //1.鼠标点击ol的li，显示对应图片
        //1.1找名词
        var ulLis=document.querySelectorAll('#box ul li')
        var olLis=document.querySelectorAll('#box ol li')
        var box=document.getElementById('box')
        console.log(olLis);
        //1.2绑定事件
        for(var i=0;i<olLis.length;i++){
            //自定义下标属性
            olLis[i].index=i
            // console.log(1)
            olLis[i].onclick=function(){
                //1.3运行--当前ol>li对应的图片
                console.log(this.index);
                for(let j=0;j<ulLis.length;j++){
                    ulLis[j].style.display='none'
                }
                ulLis[this.index].style.display='block'
                //记录下一张的下标
                num=this.index+1;
                if(num == olLis.length){
                    num=0;
                }
            }
        }
        //2.打开网页自动播放,鼠标进入#box,清除定时器,鼠标离开#box,重启定时器
        //记录下一张的下标
        var num=1;
        var timer=setInterval(function(){
            //自动触发点击事件
            olLis[num].click()
            num++;
            if(num==olLis.length){
                num=0;
            }
        },2000)
        //移入
        box.onmouseover=function(){
            clearInterval(timer)
        }
        //移出
        box.onmouseout=function(){
            timer=setInterval(function(){
            //自动触发点击事件
            olLis[num].click()
            num++;
            if(num==olLis.length){
                num=0;
            }
        },2000)
        }
    </script>