原生JavaScript轮播图

最新推荐文章于 2023-06-13 11:30:49 发布

吴越南蛮

最新推荐文章于 2023-06-13 11:30:49 发布

阅读量66

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43069875/article/details/103062579

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="box" onmouseenter="mouseEnter()" onmouseleave="mouseLeave()">
        <ul id="pics">
            <li>
                <img src="img/0.jpg" alt="" width="800" height="600" id="0">
            </li>
            <li>
                <img src="img/1.jpg" alt="" width="800" height="600" id="1">
            </li>
            <li>
                <img src="img/2.jpg" alt="" width="800" height="600" id="2">
            </li>
            <li>
                <img src="img/3.jpg" alt="" width="800" height="600" id="3">
            </li>
            <li>
                <img src="img/4.jpg" alt="" width="800" height="600" id="4">
            </li>
        </ul>
        <ul id="nav">
            <li>
                <a href="javascript:void(0);" onclick="changeByA(0)"></a>
            </li>
            <li>
                <a href="javascript:void(0);" onclick="changeByA(1)"></a>
            </li>
            <li>
                <a href="javascript:void(0);" onclick="changeByA(2)"></a>
            </li>
            <li>
                <a href="javascript:void(0);" onclick="changeByA(3)"></a>
            </li>
            <li>
                <a href="javascript:void(0);" onclick="changeByA(4)"></a>
            </li>
        </ul>
        <div id="left" >
            <a href="javascript:void(0);" onclick="changeBefore()">
                <img src="img/left.png" alt="">
            </a>
        </div>
        <div id="right">
            <a href="javascript:void(0);" onclick="change()">
                <img src="img/right.png" alt="">
            </a>
        </div>
    </div>
    <script type="text/javascript" src="js/js.js"></script>
</body>
</html>

CSS

.box{
    width:950px;
    position: relative;
    margin:0 auto;
    padding-left:0;
}
ul{
    list-style-type: none;
}
#pics img{
    margin-left: 35px;
    display:none;
}
#nav{
    list-style-type: none;
    width:80px;
    height:20px;
    background-color: grey;
    opacity: 0.5;
    padding:0;
    border-radius: 10px;
    position:absolute;
    left:450px;
    top:550px;
    z-index: 1;
    display:none;
}
#nav li{
    display: inline-block;
    margin-top:0;
    padding-top:0;
}
#nav li a{
    display:inline-block;
    background-color: white;
    width:10px;
    height:10px;
    border-radius: 50%;
    margin-left:2px;
    margin-top:0px;
    padding-top:0px;
}
#left,#right{
    margin-top:-350px;
    positon:absolute;
    top:100px;
    z-index: 1000;
    display: none;
}
#left a img,#right a img{
    width:50px;
    height:50px;
    background-color: grey;
    oacity:0.5;
    border-radius: 50%;
}
#left{
    float:left;
}
#right{
    float:right;
}

JavaScript

let index = 0;
let timer;
let imgs = document.getElementById("pics").getElementsByTagName("img");
let left = document.getElementById("left");
let right = document.getElementById("right");
let nav = document.getElementById("nav");
let navs = nav.getElementsByTagName("a");

function change(){
    index++;
    if(index>=imgs.length){
        index=0;
    }
    displayPic(index);
    updateNav(index);
}

function changeBefore() {
    index--;
    if(index<0){
        index=imgs.length-1;
    }
    displayPic(index);
    updateNav(index);
}

function changeByA(num){
    displayPic(num);
    updateNav(num);
    index = num;
}

function updateNav(num) {
    for (var i = 0; i < navs.length; i++) {
        navs[i].style.backgroundColor="white";
    }
    navs[num].style.backgroundColor="red";
}

function displayPic(num) {
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].style.display="none";
    }
    imgs[num].style.display="block";
}

function mouseEnter() {
    stopTimer();
    left.style.display="block";
    right.style.display="block";
    nav.style.display="block";
}

function mouseLeave() {
    startTimer();
    left.style.display="none";
    right.style.display="none";
    nav.style.display="none";
}

function startTimer() {
    timer = setInterval(change,2000);
}

function stopTimer(){
    clearInterval(timer);
}

imgs[0].style.display="block";
startTimer();

吴越南蛮

关注

0
点赞
踩
0

收藏

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

HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" href="css/style.css"></head>...
复制链接

扫一扫