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

最新推荐文章于 2021-07-25 22:25:01 发布

原创最新推荐文章于 2021-07-25 22:25:01 发布 · 619 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #JavaScript图片轮播

前端专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS及jQuery实现的轮播图自动播放效果案例。该案例通过设置图片列表并利用JavaScript定时器实现图片的自动切换，同时在鼠标悬停时停止播放，移开后继续播放。

<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>