jquery实现图片轮播_淡入淡出

最新推荐文章于 2022-09-04 23:56:48 发布

linlujun__

最新推荐文章于 2022-09-04 23:56:48 发布

阅读量532

点赞数 1

分类专栏：前端文章标签： jquery JavaScript图片轮播

本文链接：https://blog.csdn.net/MaxCoderLlj/article/details/63742572

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轮播</title>




<style type="text/css">
    *{ margin:0;}
    #flash { width:300px; height:357px; background:#06F; margin:0 auto; position:relative;}
    #flash .ImageList:hover{cursor:pointer;}
    #flash .ImageList { width:300px; height:357px; border:1px solid; position:absolute; left:0px;}
    #flash .ImageList img {position:absolute; display:none;}
</style>

</head>



<body>



<div id="flash">                                                                             //显示框

        <div class="ImageList">                                                                              //图片列表，所有图片重叠
            <img src="images/1.jpg" style="display:block;"/>
            <img src="images/2.jpg" />
            <img src="images/3.jpg" />
            <img src="images/4.jpg" />
            <img src="images/5.jpg" />
        </div> 
</div>








<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    var time;
    var index = 0;
        
    function autoPlay(){
        index=$(".ImageList").index();
        time=setInterval(function(){
            index++;
            if(index>4){index=0};
            $("#flash .ImageList img").eq(index).fadeIn().siblings().fadeOut();
            },3000)
        }
    autoPlay();
    
    $("#flash").hover(function(){
            clearInterval(time);},
        function(){
            autoPlay();
            })
    
</script>
</body>

linlujun__

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现图片轮播_淡入淡出

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;轮播&lt;/title&gt;&lt;style
复制链接

扫一扫