ホームページ >ウェブフロントエンド >jsチュートリアル >jquery広告シームレスカルーセルの例
jquery広告シームレスカルーセルの例
- 高洛峰オリジナル
- 2017-01-07 13:01:511350ブラウズ
この記事の例は、参考までに jquery 広告のシームレスなカルーセル効果を示しています。具体的な内容は次のとおりです
5 つの写真を追加し、jquery ライブラリを自分で参照する必要があります
垂直カルーセルの例:
<html>
<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>上記はこの記事の全内容が皆さんの学習に役立つことを願っています。また、皆さんが PHP 中国語 Web サイトをサポートしてくれることを願っています。
jquery 広告シームレス カルーセルの例に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。