jquery 광고 원활한 캐러셀 예
- 高洛峰원래의
- 2017-01-07 13:01:511320검색
본 글의 예시는 참고용으로 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>위 내용은 모두의 학습에 도움이 되기를 바랍니다.
jquery 광고 원활한 캐러셀 예제와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.