【demo2多功能轮播图】

编程语言 2023-05-04 22:35:19 阅读次数: 0

demo2多功能轮播图

需求

  1. 鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当>鼠标放在图片上方时，停止轮播，并且左右箭头会显示；
  2. 图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相>应的小圆点可以切换到相应的图片上；
  3. 点击左右箭头可以进行左右图片的切换；
  4. 图片上需有介绍的文字，会随图片切换一起进行切换。

原理：

自动轮播：通过设置轮播函数，设置定时器控制图片自动轮播
为相应的函数绑定单击响应函数，鼠标移入响应函数，鼠标移出响应函数
hove 实现鼠标覆盖时显示左右剪头，鼠标移入计时器重新计数
再用for语句控制小圆点会同时进行切换

代码

<!DOCTYPE html>
<html lang="zh-CN" xml:lang="zh-CN">
<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>demo2多功能轮播图</title>
    <meta name="description" content="内容描述" />
    <meta name="keywords" content="关键字" />
    <meta name="robots"content="none"> 
    <meta name="author"content="jinhao"> 
    <meta name="generator"content="vsCode"/> 
    <link rel="stylesheet" href="">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="shortcut icon " href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./demo02.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>demo2开始写了</li>
        <li>demo2即将完成</li>
        <li>demo2真的快了</li>
        <li>demo2马上写好</li>
        <li>demo2写完了</li>
      </ul>
    </div>

  </div>

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

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

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

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

.img img{
    
    
    transition: all 0.5s;
}

.lt{
    
    
    width: 35px;
    height: 25px;
    border-radius: 0 5px 5px 0;
    background-color: #999999;
    opacity: 1;
    color: black;
    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: 40px;

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

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

li:hover{
    
    
    background-color: black;
    color: #d1d100;
    border-bottom: 3px solid #d1d100;
}



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")
    

    // 创建图片
    var arrImg = ["./img1.jpg", ".img2.jpg", ".img3.jpg", "./img4.jpg", "./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)
    }
}

猜你喜欢

转载自blog.csdn.net/yanqiu12138/article/details/128719947
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022