JavaScript 设置普通轮播图

O_oregou

已于 2023-01-12 22:13:18 修改

阅读量598

点赞数

文章标签： javascript css 前端

于 2023-01-12 18:41:17 首次发布

本文链接：https://blog.csdn.net/O_osange/article/details/128664635

版权

效果要求：

1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；

2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切
换到相应的图片上；

3.点击左右箭头可以进行左右图片的切换；

4.图片上需有介绍的文字，会随图片切换一起进行切换。

实现原理：

为相应的函数绑定单击响应函数，鼠标移入响应函数，鼠标移出响应函数

创建一个名字为cutImg的循环计时器，使得在默认状态下，轮播图能够自动播放

在鼠标移入函数里面，设置清除cutImg计时器，并且在鼠标移除后，创新启用计时器

再用for循环控制小圆点和提示文字的样式

同理再对小圆点和提示文字设置相应的鼠标移入函数，和鼠标移除函数

做到移入和移出的时候改变小圆点和提示文字的样式

代码展示：

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>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div class="out" id="out">
    <div class="img" id="img">
      <img src="./img/img1.jpg" alt="" />
      <ul id="cut">
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
      </ul>
      <span id="lt" class="lt"><a href="#">&lt;</a></span>
      <span id="gt" class="gt"><a href="#">&gt;</a></span>
    </div>

    <div class="button" id="button">
      <ul>
        <li>生肖秘宝</li>
        <li>次元召唤</li>
        <li>你的商店</li>
        <li>电竞名场面</li>
        <li>新春献礼</li>
      </ul>
    </div>

  </div>

  <script src="./js/index.js"></script>
</body>
</html>

css

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

.out{
    width: 1200px;
    margin: 0 auto;
    margin-top: 30px;
}

.img{
    width: 820px;
    height: 340px;
    margin: 0 auto;
    position: relative;
}

.img img{
    transition: all 1s;
}

.lt{
    width: 25px;
    height: 35px;
    border-radius: 0 10px 10px 0;
    background-color: #999;
    opacity: 0.5;
    color: white;
    font-size: 20px;
    line-height: 35px;
    text-align: center;

    position: absolute;
    top: 152px;
    left: 0;

    display:none;
}
.gt{
    width: 25px;
    height: 35px;
    border-radius:10px 0 0 10px;
    background-color: #999;
    opacity: 0.5;
    color: white;
    font-size: 20px;
    line-height: 35px;
    text-align: center;

    position: absolute;
    top: 152px;
    right: 0;

    display: none;
}

.img:hover .lt{
    display:block;
}
.img:hover .gt{
    display:block;
}

.img ul{
    margin: 0 auto;
    position: absolute;
    bottom: 5px;
    left: 350px;
    width: 120px;
    height: 10px;
    display: flex;
    justify-content: space-between;
}

.img ul li{
    width: 10px;
    height: 10px;
    background-color: gray;
    border-radius: 50%;
}

.img ul li a{
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.button ul{
    margin: 0 auto;
    background-color: #E3E2E2;
    width: 820px;
    height: 38px;

    display: flex;
    justify-content: space-between;
}

.button ul li{
    width: 164px;
    height: 38px;
    box-sizing: border-box;
    background-color: #F7F6F6;
    line-height: 38px;
    text-align: center;
    font-size: 16px;
}

.button ul li:hover{
    background-color: white;
    color: #d1d100;
    border-bottom: 3px solid #d1d100;
}

js


window.onload = function () {
    // 获取元素节点
    var img = document.getElementById("img")
    var imgs = img.getElementsByTagName("img")[0]
    var button = document.getElementById("button")
    var button_ul = button.getElementsByTagName("ul")[0]
    var button_li = button_ul.getElementsByTagName("li")
    var lt = document.getElementById("lt")
    var gt = document.getElementById("gt")
    var lt_a = lt.getElementsByTagName("a")[0]
    var gt_a = gt.getElementsByTagName("a")[0]
    var cut = document.getElementById("cut")
    var cut_a = cut.getElementsByTagName("a")
    

    // 创建图片src地址数值
    var arrImg = ["./img/img1.jpg", "./img/img2.jpg", "./img/img3.jpg", "./img/img4.jpg", "./img/img5.jpg"]

    // 添加默认计时器
    var indexTime = 0
    cut_a[indexTime].style.backgroundColor = "black"
    button_li[indexTime].style.backgroundColor = "white"
    button_li[indexTime].style.color = "#d1d100"
    button_li[indexTime].style.borderBottom = "3px solid #d1d100"
    var cutImg = setInterval(function () {
        indexTime++
        if (indexTime >= arrImg.length) {
            indexTime = 0
        }

        button_li[indexTime].style.backgroundColor = "white"
        button_li[indexTime].style.color = "#d1d100"
        button_li[indexTime].style.borderBottom = "3px solid #d1d100"

        cut_a[indexTime].style.backgroundColor = "black"
        var qx = indexTime - 1
        if (qx < 0) {
            qx = cut_a.length - 1
        }
        cut_a[qx].style.backgroundColor = "#999"

        button_li[qx].style.backgroundColor = "#F7F6F6"
        button_li[qx].style.color = "black"
        button_li[qx].style.borderBottom = "0"

        imgs.src = arrImg[indexTime]
        console.log(indexTime)
    }, 1500)

    //设置鼠标移入和移出时候的删除和添加计时器
    img.onmouseenter = function () {
        clearInterval(cutImg)
    }
    img.onmouseleave = function () {
        cutImg = setInterval(function () {
            indexTime++
            if (indexTime >= arrImg.length) {
                indexTime = 0
            }
    
            button_li[indexTime].style.backgroundColor = "white"
            button_li[indexTime].style.color = "#d1d100"
            button_li[indexTime].style.borderBottom = "3px solid #d1d100"
    
            cut_a[indexTime].style.backgroundColor = "black"
            var qx = indexTime - 1
            if (qx < 0) {
                qx = cut_a.length - 1
            }
            cut_a[qx].style.backgroundColor = "#999"
    
            button_li[qx].style.backgroundColor = "#F7F6F6"
            button_li[qx].style.color = "black"
            button_li[qx].style.borderBottom = "0"
    
            imgs.src = arrImg[indexTime]
            console.log(indexTime)
        }, 1500)
    }
    button_ul.onmouseenter = function () {
        clearInterval(cutImg)
    }
    button_ul.onmouseleave = function () {
        cutImg = setInterval(function () {
            indexTime++
            if (indexTime >= arrImg.length) {
                indexTime = 0
            }
    
            button_li[indexTime].style.backgroundColor = "white"
            button_li[indexTime].style.color = "#d1d100"
            button_li[indexTime].style.borderBottom = "3px solid #d1d100"
    
            cut_a[indexTime].style.backgroundColor = "black"
            var qx = indexTime - 1
            if (qx < 0) {
                qx = cut_a.length - 1
            }
            cut_a[qx].style.backgroundColor = "#999"
    
            button_li[qx].style.backgroundColor = "#F7F6F6"
            button_li[qx].style.color = "black"
            button_li[qx].style.borderBottom = "0"
    
            imgs.src = arrImg[indexTime]
            console.log(indexTime)
        }, 1500)
    }

    //为两个切换按钮绑定单击响应函数
    lt_a.onclick = function () {
        indexTime--
        if (indexTime < 0) {
            indexTime = arrImg.length - 1
        }
        button_li[indexTime].style.backgroundColor = "white"
        button_li[indexTime].style.color = "#d1d100"
        button_li[indexTime].style.borderBottom = "3px solid #d1d100"
        imgs.src = arrImg[indexTime]
        
        cut_a[indexTime].style.backgroundColor = "black"
        var qx = indexTime + 1 
        if (qx >= cut_a.length) {
            qx = 0
        }
        cut_a[qx].style.backgroundColor = "#999"
        button_li[qx].style.backgroundColor = "#F7F6F6"
        button_li[qx].style.color = "black"
        button_li[qx].style.borderBottom = "0"
    }
    gt_a.onclick = function () {
        indexTime++
        if (indexTime >= arrImg.length) {
            indexTime = 0
        }
        button_li[indexTime].style.backgroundColor = "white"
        button_li[indexTime].style.color = "#d1d100"
        button_li[indexTime].style.borderBottom = "3px solid #d1d100"
        imgs.src = arrImg[indexTime]

        cut_a[indexTime].style.backgroundColor = "black"
        var qx = indexTime - 1
        if (qx < 0) {
            qx = cut_a.length - 1
        }
        cut_a[qx].style.backgroundColor = "#999"
        button_li[qx].style.backgroundColor = "#F7F6F6"
        button_li[qx].style.color = "black"
        button_li[qx].style.borderBottom = "0"
    }

    //设置每个小圆点的单击响应函数
    function aOnclick(x) {
        cut_a[x].onclick = function () {
            indexTime = x
            imgs.src = arrImg[x]
            for (var j = 0; j < cut_a.length; j++){
                button_li[j].style.backgroundColor = "#F7F6F6"
                button_li[j].style.color = "black"
                button_li[j].style.borderBottom = "0"
            }
            button_li[x].style.backgroundColor = "white"
            button_li[x].style.color = "#d1d100"
            button_li[x].style.borderBottom = "3px solid #d1d100"
        }
    }

    // 为每个小圆点绑定单击响应函数
    for (var i = 0; i < cut_a.length; i++) {
        aOnclick(i)
    }

    // 设置匹配到各个小圆点的图片时，小圆点的背景颜色
    function aOnmouseenter(x){
        cut_a[x].onmouseenter = function () {
            for (var j = 0; j < cut_a.length; j++){
                cut_a[j].style.backgroundColor = "#999"
            }
            cut_a[x].style.backgroundColor = "black"
        }
    }
    function aOnmouseleave(x){
        cut_a[x].onmouseleave = function () {
            for (var j = 0; j < cut_a.length; j++){
                cut_a[j].style.backgroundColor = "#999"
            }
            cut_a[indexTime].style.backgroundColor = "black"
        }
    }

    //为每个小圆点绑定鼠标移入函数
    for(var i=0;i<cut_a.length;i++){
        aOnmouseenter(i)
    }
    //为每个小圆点绑定鼠标移出函数
    for(var i=0;i<cut_a.length;i++){
        aOnmouseleave(i)
    }

    // 设置提示文字的鼠标移入函数
    function button_liOnmouseenter(x){
        button_li[x].onmouseenter = function(){
            imgs.src = arrImg[x]
            indexTime = x
            for(var k = 0;k<cut_a.length;k++){
                cut_a[k].style.backgroundColor = "#999"
            }
            cut_a[x].style.backgroundColor = "black"
            for (var j = 0; j < cut_a.length; j++){
                button_li[j].style.backgroundColor = "#F7F6F6"
                button_li[j].style.color = "black"
                button_li[j].style.borderBottom = "0"
            }
            button_li[x].style.backgroundColor = "white"
            button_li[x].style.color = "#d1d100"
            button_li[x].style.borderBottom = "3px solid #d1d100"
        }
    }

    //为每一个提示文字绑定鼠标移入函数
    for(var i = 0;i<button_li.length;i++){
        button_liOnmouseenter(i)
    }
}