js图片自动切换（定时器），简单轮播

最新推荐文章于 2024-01-24 16:03:09 发布

海龟先生plus

最新推荐文章于 2024-01-24 16:03:09 发布

阅读量2.1k

点赞数 4

分类专栏： js 文章标签： js图片切换

本文链接：https://blog.csdn.net/qq_45219069/article/details/94402777

版权

js 专栏收录该内容

70 篇文章 1 订阅

订阅专栏

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190701183328470.PNG)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 300px;
            margin: 80px auto;
        }
        .box .header{
            height: 50px;
            background-color: blueviolet;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
        .box .foot{
            height: 50px;
            background-color: darkgray;
            font-size: 14px;
            color: #fff;
            text-align: center;
            line-height: 50px;
        }
        .box .content{
            height: 200px;
            background-color: chartreuse;
            position: relative;
        }
        .box .content img{
            width: 100%;
            height: 100%;
        }
        .box .content .jiantou{
            position: absolute;
            top:50%;
            margin-top: -25px;
            height: 50px;
            width: 300px;
        }
        .box .content .jiantou span{
            width: 50px;
            height: 50px;
            background-color: #ccc;
            text-align: center;
            line-height: 50px;
            position: absolute;
            cursor: pointer;
        }
        .box .content .jiantou span:first-child{
            left: 0px;
        }
        .box .content .jiantou span:last-child{
          right: 0px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="header">我不知这是第几个...</div>
        <div class="content">
            <div class="jiantou">
                <span class="jianleft"><</span>
                <span class="jianright">></span>
             </div>
            <img src="" alt="" class="pic">
        </div>
        <div class="foot">还没出来...</div>
    </div>
    <script>
        //做个测试
        //var pic=document.querySelector(".pic")
        //var picArr=["img/1.jpg", "img/2.jpg","img/3.jpg","img/4.jpg"]
        //pic.src=picArr[3]

        //获取元素
        var box=document.querySelector(".box")
        var pic=document.querySelector(".pic")
        var pageTop=document.querySelector(".header") 
        var pageFoot=document.querySelector(".foot")
        var jleft=document.querySelector(".jianleft")
        var jright=document.querySelector(".jianright")
        var timer=null
        //console.log(pic,pageTop,pageFoot);

        var picArr=["img/1.jpg", "img/2.jpg","img/3.jpg","img/4.jpg"]
        var num=0
        jright.onclick=function(){
            num++
            if(num>picArr.length){
                num=1
            }
            fn()
        }
        jleft.onclick=function(){
            num--
            if(num<1){
                num=4
            }
            fn()
        }

        function fn(){
            pic.src=picArr[num-1]
            pageTop.innerHTML=num+"/"+picArr.length
            pageFoot.innerHTML="这是我的第"+ num +"个女性朋友"
        }

        timer=setInterval(function(){
            jright.onclick()
        },1000)
        

        box.onmouseover=function(){
            clearInterval(timer)
        }
       box.onmouseout=function(){
        timer=setInterval(function(){
            jright.onclick()
        },1000)
       }
    </script>
</body>
</html>

在这里插入图片描述

海龟先生plus

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
js图片自动切换（定时器），简单轮播

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190701183328470.PNG)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
复制链接

扫一扫