JS实现滑动轮播图

最新推荐文章于 2024-06-10 21:52:46 发布

原创最新推荐文章于 2024-06-10 21:52:46 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#滑动轮播图 #JS

本文详细介绍了如何利用JavaScript实现一个基本的滑动轮播图效果，涵盖了图片切换、自动播放、导航点等功能的实现，适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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;
        }
        ul{
            list-style: none;
        }

        #container{
            margin: 0 auto;
            position: relative;
            width: 750px;
            overflow: hidden;
            height: 291px;
        }
        #content{
            width: 3750px;
            overflow: hidden;
            position: absolute;
            top:0;
            left:0;
            transition: left 1s linear;
        }
        #content div{
            float: left;
        }
        #btns{
            position: absolute;
            bottom: 10px;
            right: 10px;
            z-index: 1;
        }
        #btns li,#arrow-box li{
            width: 20px;
            height: 20px;
            background:#22141480;
            color: #fff;
            margin-right: 5px;
            border-radius: 25%;
            line-height: 20px;
            text-align: center;
            float: left;
            cursor: pointer;
        }
        #btns .active{
            background: #ff0036;
        }

        #arrow-box{
            position: absolute;
            left:10px;
            bottom:10px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div id="container">
        <ul id="btns">
            <Li class="active">1</Li>
            <Li>2</Li>
            <Li>3</Li>
            <Li>4</Li>
            <Li>5</Li>
        </ul>
        <ul id="arrow-box">
            <Li id="prev">&lt;</Li>
            <Li id="next">&gt;</Li>
        </ul>
        <div id="content">
            <div class="selected"><img src="img/1.jpg"></div>
            <div><img src="img/2.jpg"></div>
            <div><img src="img/3.jpg"></div>
            <div><img src="img/4.jpg"></div>
            <div><img src="img/5.jpg"></div>
        </div>
    </div>
    <script>
        var oContainer = document.getElementById("container");
        var oUl = document.getElementById("btns");
        var aLi = oUl.getElementsByTagName("li");
        var oContent = document.getElementById("content");
        var aDiv = oContent.getElementsByTagName("div"); 
        var oPrev = document.getElementById("prev");
        var oNext = document.getElementById("next");
        var iNow = 0;
        for(var i =0;i<aLi.length;i++){
            aLi[i].index = i;
            aLi[i].onclick = function(){
                change(this.index);
                iNow = this.index;

            }
        }
        function change(idx){
            for(var j =0;j<aLi.length;j++){
                    aLi[j].className = "";
                }
                aLi[idx].className = "active";
                oContent.style.left = -idx*750 + "px";
        }
        oNext.onclick = function(){
            iNow++;
            if(iNow ==aLi.length){
                iNow =0;
            }
            change(iNow);
        }
        oPrev.onclick = function(){
            iNow--;
            if(iNow==-1){
                iNow = aLi.length - 1;
            }
            change(iNow);
        }
        
    </script>
    
</body>
</html>