jquery广告无缝轮播代码实例

2017-01-05 20:14:59来源:CSDN作者:csmzl人点击

jquery广告无缝轮播代码实例

需要自行添加五张图片和引用jquery库

纵向轮播实例:

<!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><style type="text/css">    li{        list-style:none;    }    .mains{        width:700px;        margin:0 auto;    }    .mains .title{        font-size:25px;        padding:10px 0 5px 50px;    }    .g1{        width:380px;         height:180px;     }</style><script type="text/javascript" src="js/jquery.min.js"></script></head><body>    <div class="mains">        <div class="title">jquery广告无缝轮播代码演示</div>        <div class="g1" style="overflow: hidden;">            <ul id="ulID"  style="position: relative; height: 1800px; width: 380px; top: 0px;">                <li style="width: 380px; height: 180px; float: left;">                    <img src="img/1.jpg" style="width: 380px; height: 180px;"></li>                <li style="width: 380px; height: 180px; float: left;">                    <img src="img/2.jpg" style="width: 380px; height: 180px;"></li>                <li style="width: 380px; height: 180px; float: left;">                    <img src="img/3.jpg" style="width: 380px; height: 180px;"></li>                <li style="width: 380px; height: 180px; float: left;">                    <img src="img/4.jpg" style="width: 380px; height: 180px;"></li>                <li style="width: 380px; height: 180px; float: left;">                    <img src="img/5.jpg" style="width: 380px; height: 180px;"></li>                <li style="width: 380px; height: 180px; float: left;">                    <img src="img/1.jpg" style="width: 380px; height: 180px;"></li>                <li style="width: 380px; height: 180px; float: left;">                    <img src="img/2.jpg" style="width: 380px; height: 180px;"></li>                <li style="width: 380px; height: 180px; float: left;">                    <img src="img/3.jpg" style="width: 380px; height: 180px;"></li>                <li style="width: 380px; height: 180px; float: left;">                    <img src="img/4.jpg" style="width: 380px; height: 180px;"></li>                <li style="width: 380px; height: 180px; float: left;">                    <img src="img/5.jpg" style="width: 380px; height: 180px;"></li>            </ul>        </div>    </div>    <script type="text/javascript">        var PlaceTop = parseInt($("#ulID").css("top"));        var int;        function moveUL(){            var ulID = $("#ulID");            PlaceTop = --PlaceTop;            if(PlaceTop == -900)            {                PlaceTop = 0;               }            ulID.css("top",PlaceTop);            if(PlaceTop < -900){                alert("Eror!");                clearInterval(int);            }        }        int=setInterval("moveUL()",10);        $(".g1").hover(function(){            clearInterval(int);        },function(){            int=setInterval("moveUL()",10);        });    </script></body></html>

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台