js实现轮播图-CFANZ编程社区

功能需求

用js实现轮播图

实现思路

1：准备一个HTML结构，创建一个包含多个轮播项的容器，每个轮播项包含一个图片和一个指示器

2：编写css样式，设置轮播容器样式，包括宽度、高度、溢出隐藏等

3：编写JavaScript代码，实现轮播图的切换功能，添加指示器，用于显示当前的图片和指示下一个图片的位置；实现指示器的点击事件，用于切换到对应的轮播项。

代码实现

<!--html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head><!--指定js和css文件路径-->
    <link rel="stylesheet" href="../css/lunbo.css">
    <script src="../js/lunbo.js"></script>
<body>
    <div id="wrapper">
        <div id="focus">
            <ul>
                <li><a href="#">
                    <!--轮播图第一张默认图片-->
                    <img src="../img/01.jpg" alt="" id="pic"> 
                </a>
                <div class="nextPic" onclick="showNext()"></div>
                <div class="prePic" onclick="showPre()"></div>

            </li>
            </ul>

        </div>


    </div>
</body>
</html>

/* css */
* {
margin:0;
padding: 0;
}
ui,li{
    list-style: none;
}
#wrapper{
    width: 800px;
    padding-bottom: 50px;
    margin: 0 auto;
}
#focus{
    width: 800px;
    height: 280px;
    overflow: hidden;
    /* 相对定位 */
    position: relative;
}
#focus ul{
    height: 380px;
    /* 绝对定位 */
    position: absolute;
}
#focus ul li{
    float:  left;
    width: 800px;
    height: 280px;
    overflow: hidden;
    position: relative;
    background-color: #000;
}
#focus ul li div{
    position: absolute;
    overflow: hidden;
}
#focus ul li .nextPic{
    background:url(../img/spirte.png) no-repeat right top;
    width: 45px;
    height: 100px;
    right: 0px;
    top:90px;
    background-color: #000;
    opacity: 0.5;
}
#focus ul li .prePic{
    background:url(../img/spirte.png) no-repeat left top;
    width: 45px;
    height: 100px;
    left: 0px;
    top: 90px;
    /* background-color: rgba(100,10, 50, 0.5); */
    background-color: #000; 
     opacity: 0.5;
}

//js
var arr=["../img/01.jpg","../img/02.jpg","../img/02.jpg","../img/04.jpg","../img/05.jpg",];
var index=0;
function showNext(){
    if(index<arr.length-1){
        index++;
    }else{
        index=0;
    }
    // document.getElementById 通过元素的ID特性来获取元素;数组名加下标访问图片路径
    document.getElementById("pic").src=arr[index];
}
function showPre(){
    if(index>0){
        index--;
    }else{
        // 当index>=0时，index的值是数组长度-1的下标的元素
        index=arr.length-1;
    }
    document.getElementById("pic").src=arr[index];
}

运行效果

js实现轮播图_css