jquery3_轮播图以及思路

Posted 2021-02-20 yuyukun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery3_轮播图以及思路相关的知识，希望对你有一定的参考价值。

试验版：

每过2秒，动态切换图片

技术图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图实现</title>
    <style type="text/css">
        /*标题样式*/
        p{
            text-align:center;
            font-size:25px;
            color:cadetblue;
            font-famliy:fantasy;
        }
        .imgbox{
            border-top:2px solid cadetblue;
            width:50%;
            height:500px;
            margin:0 auto;
        }
        .imgbox img{
            width:60%;
            height:300px;
            margin:0 auto;
            /*padding 边际，四周均涉及*/
            padding-top:30px;
            /*//图片居中*/
            display:none;
            /*text-align:center;*/
            /*vertical-align:middle;*/
        }
        .img1{
            display:block;
        }
        .img2{
            display:none
        }
        .img3{
            display:none;
            padding-bottom:30px;
        }
    </style>
</head>
<body>
<p>图片轮播</p>
<div class="imgbox">
    <img class="img-slide img1" src="img1.jpg" alt="1">
    <img class="img-slide img2" src="img2.jpg" alt="2">
    <img class="img-slide img3" src="img3.jpg" alt="3">
</div>

<script type="text/javascript">
    var index=0;
    //改变图片
    function imagecha(){
        //改变图片
        var a=document.getElementsByClassName("img-slide");//获取所有带有img-slide关键字的标签
        if(index>=a.length)
            index=0;
        for(var i=0;i<a.length;i++){
            a[i].style.display=‘none‘;
        }
        a[index].style.display=‘block‘;
        index++;
    }
    //设置定时器，每隔两秒钟切换图片
    setInterval(imagecha,2000);
</script>

</body>
</html>

View Code

正式版：

以上是关于jquery3_轮播图以及思路的主要内容，如果未能解决你的问题，请参考以下文章