码迷,mamicode.com
首页 > Web开发 > 详细

jquery3_轮播图以及思路

时间:2020-05-02 00:04:08      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:nbsp   font   spl   定时   interval   strong   cad   splay   sed   

试验版:

每过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_轮播图以及思路

标签:nbsp   font   spl   定时   interval   strong   cad   splay   sed   

原文地址:https://www.cnblogs.com/yuyukun/p/12813809.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!