demo2

つ微凉徒眸挚半

已于 2023-01-11 19:24:42 修改

阅读量747

点赞数

CC 4.0 BY-SA版权

文章标签： css css3 html

于 2023-01-11 10:56:49 首次发布

本文链接：https://blog.csdn.net/weixin_73696461/article/details/128640997

这段代码展示了如何使用HTML、CSS和JavaScript创建一个具有自动轮播、鼠标悬停暂停、图片切换、导航点切换功能的轮播图。当鼠标移入图片时，轮播停止并显示左右箭头；移出时恢复自动轮播。点击小圆点或箭头可手动切换图片。

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

demo2

轮播图

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

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

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

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

思路：
1.需要鼠标事件来进行，先给装有图片的块绑定上鼠标事件，在上面时清除计时器，以达到停止
2.在每次自动轮播图片时，将改变圆点背景颜色的函数绑定在每次移动函数执行之后，在此之前，先自定义一个自动播放的函数，再定义一个可以让图片移动的move工具函数，在轮播过程中，超过图片块长度时，需要让它重新来一遍，但是观看效果不好，所以在最后一张图片后面，再次加入一张与第一张相同的图片来达到以假乱真的从头来过。
3.定义一个量，左右箭头每次点击一次让这个量自身减去或增加1再乘以每次移动的像素值，让图片对应动起来，在每次点击时清除定时器，防止定时器开启妨碍事件的进行
4.给予一个随着图片的移动到第几张，就添加一个文字介绍，让这个装有文字说明的元素绑定一个事件，随着上一步中的量的变化，给出相应的文字。

<!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>
</head>
<style>
    #nav{
        box-sizing: border-box;
        width: 540px;
        height: 540px;
        margin: 30px auto;
        border: 20px solid white;
        overflow: hidden;
        position: relative;
    }
    #link{
        position: absolute;
        bottom: 20px;
        left: 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }
    #link a{
        display: block;
        width: 10px;
        height: 10px;
        margin:0 10px ;
        background-color: pink;
    }
    #link a:nth-child(1){
        background-color: #999;
    }
    #link a:hover{
        background-color: #999;
    }
    #imgv{
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items:center;
        position: absolute;
        position: absolute;
        top: 0;
        left: 0;
    }
    img{
        display: block;
        width: 500px;
        height: 500px;
        
    }
    #left{
        display: none;
        position: absolute;
        width: 40px;
        height: 40px;
        left: 0;
        top: 220px;
        background-color: #fff;
        opacity: 0.4;
        font-size: 30px;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
        background: url(./箭头.png) ;
        background-size: cover;
    }
    #right{
        display: none;
        position: absolute;
        width: 40px;
        height: 40px;
        right: 0;
        top: 220px;
        background-color: #fff;
        opacity: 0.4;
        font-size: 30px;
        text-align: center;
        line-height: 60px;
        cursor: pointer;
        background: url(./箭头-copy\ \(1\).png);
        background-size: cover;
    }
    #title{
        width: 540px;
        height:50px;
        margin: 0 auto;
        font-size: 40px;
        color: chartreuse;
        line-height: 40px;
        text-align: center;
        padding-top: 20px;
    }
    .num{
        color: crimson;
    }
</style>
<script type="text/javascript"  src="../tool/tool.js"></script>
<script>
    window.onload=function(){
        var imgv=document.getElementById("imgv");
        var nav=document.getElementById("nav");
        var imgarr=document.getElementsByClassName("mg");
        imgv.style.width=imgarr.length*500+"px";//根据图片数量设置图片块的长度
        var link=document.getElementById("link");
        link.style.left=(nav.offsetWidth-40-link.offsetWidth)/2+"px";
        var index=0;
        var a=document.getElementsByTagName("a");
        var l=document.getElementById("left");
        var r=document.getElementById("right");
        var num=document.querySelector(".num");
        
        function setA(){      //该函数是针对导航点的颜色变化
            if(index>=imgarr.length-1){
                index=0;
                imgv.style.left=0+"px";
            }
            for(var i=0;i<a.length;i++){
                a[i].style.backgroundColor="pink";
            }
            
            a[index].style.backgroundColor="#999";
        }
        for(var i=0;i<a.length;i++){
            a[i].num=i;
            a[i].onclick=function(){
                clearInterval(time);
                index=this.num;
                setA();
                move(imgv,"left",-500*index,30,function(){
                    autochange();
                })
            }
        }
        autochange();
        
        var time;
        function autochange(){   //该函数是控制轮播图的自动播放
            time=setInterval(function(){
                index%=imgarr.length;
                    
                move(imgv,"left",-500*index,30,function(){
                    setA();
                     index++;
                    num.innerHTML=index;
                    //console.log(num.innerHTML);
                    l.onclick=function(){   //控制左按钮的切图
                    clearInterval(time);	//每次触发时，先暂时关掉定时器
                    index--;
                    if(index<0){
                        index=3;
                        imgv.style.left=-500*(index+1)+"px";
                    }
                    move(imgv,"left",-500*index,30,function(){
                       // console.log(index);
                        num.innerHTML=index+1
                    autochange();  //在每次切完图后再次打开
                    setA();
            });
         }
         r.onclick=function(){  //原理同上
            clearInterval(time);
            if(index>=imgarr.length){
                index=0;
                imgv.style.left=0+"px";
            }
            console.log(index);
            index++;
            //console.log(index);
            if(index>=4){
                num.innerHTML=1;
            }else{
                num.innerHTML=index+1;
            }
            //num.innerHTML=index;
            move(imgv,"left",-500*index,30,function(){
            autochange();
            setA();
    });
 }
                    
                })
             },3000)
        }
        imgv.onmouseover=function(){
                        console.log("over");
                        clearInterval(time);
                        
                     }
         imgv.onmouseout=function(){
                        console.log("out");
                        autochange();
                        
                    }     //以上这两个是用来在鼠标移入时暂停播放，移除时再次播放

        nav.onmouseover=function(){
            l.style.display="block";
            r.style.display="block";
        }
        nav.onmouseout=function(){
            l.style.display="none";
            r.style.display="none";
        }   //这是对鼠标移入图片时，对两边的切图按钮的显示和消失的控制
    }
</script>
<body>
    <div id="title">这是第<span class="num">1</span>张</div> 图片的文字介绍
    <div id="nav">
        <div id="imgv">
            <img src="./R-C (1).jpg" alt="" class="mg"> 
            <img src="./220455croynga9dcjohwc8.jpg" alt="" class="mg"> 
            <img src="./R-C.jpg" alt="" class="mg"> 
            <img src="./R-C (2).jpg" alt="" class="mg"> 
            <img src="./R-C (1).jpg" alt="" class="mg"> 
        </div>
        <div id="link">
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
            <a href="javascript:;"></a>
        </div>
        <div id="left"></div>
        <div id="right"></div>
    </div>
</body>
</html>

在这里插入图片描述