jQuery实现图片轮播_移入移出

最新推荐文章于 2020-01-26 09:14:23 发布

linlujun__

最新推荐文章于 2020-01-26 09:14:23 发布

阅读量693

点赞数 1

分类专栏：前端文章标签： jquery

本文链接：https://blog.youkuaiyun.com/MaxCoderLlj/article/details/64547645

版权

前端专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现图片轮播_移入移出</title>
</head>
<style type="text/css">
    *{ margin:0;}
    #flash { width:300px; height:357px; background:#06F; margin:0 auto; position:relative;}
    #flash .scroll { width:300px; height:357px; overflow:hidden; position:relative;}
    #flash .scroll,#flash .but:hover{cursor:pointer;}
    #flash .ImageList { width:1500px; height:357px; border:1px solid; position:absolute; left:0px;}
    #flash .ImageList img { float:left;}
</style>
<body>
<div id="flash">

    <div class="scroll">
        <div class="ImageList">
            <span><img src="images/1.jpg" /></span>
            <span><img src="images/2.jpg" /></span>
            <span><img src="images/3.jpg" /></span>
            <span><img src="images/4.jpg" /></span>
            <span><img src="images/5.jpg" /></span>
        </div>
    </div>    
</div>

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    var index=0;
    var time;

    function autoPlay(){
        time=setInterval(function(){
            index++;
            if(index>4){index=0};
            $(".ImageList").animate({"left":index*-300},500);
            },3000)
        }
    autoPlay();

    $("#flash .scroll").hover(function(){
            clearInterval(time);},
        function(){
            autoPlay();
            })

</script>


</body>
</html>