js jquery_jquery で作成した画像の連続スクロール コード

コア コードは次のとおりです。

コードをコピーします コードは次のとおりです:

<スクリプト src="/js/jquery.js">
<script> <br>$(document).ready(function(){ <br> <br> $(".bannerbutton li").each( <br> function(){ <br> $(this).click( <br> function(){ <br> "num")); ) () ); <br>}); <br>var active=1;//現在 1 枚目を表示中 <br>var picNum=4;// 4 枚の写真を変換中 <br>var time=500;//速度 <br>var intTime=3000; //自動変換間隔 <br>var width=568; //画像の幅 <br>var perDistance=57; //各移動の距離 <br>var tagObj=0; <br>var マーキー; <br>var tmpDistance=0; <br>var tagLeft=0; <br> 関数 Bannergo (タグ) {<br> if (active! = タグ) {<br> if (! 移動) {<br> listleft = PARSEINT ($ (". Banner ul .img").css(" left")); <br> distance=(tag-active)*width; <br> tmpDistance=0; <br> perTime=parseInt(time*perDistance/ distance); <br> if(tag>active){ <br> <br> tagLeft=list左距離; <br> marquee=setInterval("Marquee(0)",perTime) <br>アクティブ=1;  <br><br>関数 Marquee(t){ <br> var x=false;  <br> if(t==0){ <br> listLeft=listLeft perDistance;  <br> if((tagLeft-listLeft)>=perDistance){ <br> $(".banner ul.img").css("left",listLeft "px");  <br> }else{ <br> $(".banner ul.img").css("left",tagLeft "px");  <br> x=true;  <br> } <br> }else{ <br> listLeft=listLeft-perDistance;  <br> if((tagLeft-listLeft)<=perDistance){ <br> $(".banner ul.img").css("left",listLeft "px");  <br> }else{ <br> $(".banner ul.img").css("left",tagLeft "px");  <br> x=true;  <br> } <br> } <br> if(x){ <br> clearInterval(marquee);  <br> tmpDistance=0;  <br> listLeft=0;  <br> tagLeft=0;  <br> move=false;  <br> $(".bannerbutton li").css("background","url(/images/index/b2.gif) no-repeat");  <br> $(".bannerbutton li[@num=" active "]").css("background","url(/images/index/b1.gif) no-repeat");  <br> if(tagObj==picNum 1){ <br> $(".banner ul.img").css("left","0");  <br> アクティブ=1;  <br> } <br> } <br>} <br><br>function autoMarquee(){ <br> tagObj=Number(active) 1;  <br> bannerGo(tagObj);  <br>} <br><br>function autoMarqueeStart(){ <br> if(!move){ <br> marquee=setInterval("autoMarquee()",intTime) <br> }else{ <br> setTimeout( "autoMarqueeStart()",時間);  <br> } <br><br>} <br>autoMarqueeStart();  <br></script> 
 
*{margin:0;padding:0;border:0}
li{float:left;}
ul{list-style-type:none;}
.banner{height:228px ;幅:568ピクセル;オーバーフロー:非表示;} 
.bannerbutton li{
width:23px; 
高さ:22px; 
background:url(/images/index/b2.gif) 繰り返しなし。 
カーソル:ポインタ; 
line-height:22px; 
text-align: center; 
カラー: #fff; 
font-weight: 太字; 
}
.banner .img li{float:left;}
.banner .img {
position: relative;width:5600px; 
}
body,td,th {
font-size: 12px; 
}
body {
margin-left: 0px; 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
}
 

 

 

• 1
 

• 2
 

• 3
 

• 4
 

 

 

• 
 

•  
  
• 
 

•