In diesem Artikel wird hauptsächlich die Methode zum Realisieren des Listen-Scrollens in Javascript vorgestellt. Er analysiert detailliert das Seitenlayout von Javascript und die Implementierungstechniken des JavaScript-Scrolling-Effekts. Er hat einen bestimmten Referenzwert it
Das Beispiel in diesem Artikel beschreibt, wie man das Scrollen von Listen in JavaScript implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
index.html lautet wie folgt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/scroll_img.js"></script>
<title>图片列表滚动</title>
</head>
<body>
<p class="scroll_img_wrap clearfix">
<p class="left_btn"><a href="javascript:void(0)"><img src="images/btn.jpg" /></a></p>
<p id="scroll_img">
<ul class="scroll_img_list clearfix">
<li>
<p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
<p><a href="#">information1</a></p>
</li>
<li>
<p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
<p><a href="#">information2</a></p>
</li>
<li>
<p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
<p><a href="#">information3</a></p>
</li>
<li>
<p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
<p><a href="#">information4</a></p>
</li>
<li>
<p><a href="#"><img src="images/2.jpg" alt="#" /></a></p>
<p><a href="#">information5</a></p>
</li>
<li>
<p><a href="#"><img src="images/2.jpg" alt="#" /></a></p>
<p><a href="#">information6</a></p>
</li>
<li>
<p><a href="#"><img src="images/2.jpg" alt="#" /></a></p>
<p><a href="#">information7</a></p>
</li>
<li>
<p><a href="#"><img src="images/2.jpg" alt="#" /></a></p>
<p><a href="#">information8</a></p>
</li>
<li>
<p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
<p><a href="#">information9</a></p>
</li>
<li>
<p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
<p><a href="#">information10</a></p>
</li>
<li>
<p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
<p><a href="#">information11</a></p>
</li>
<li>
<p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
<p><a href="#">information12</a></p>
</li>
<li>
<p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
<p><a href="#">information13</a></p>
</li>
<li>
<p><a href="#"><img src="images/1.jpg" alt="#" /></a></p>
<p><a href="#">information14</a></p>
</li>
</ul>
</p>
<p class="right_btn"><a href="javascript:void(0)"><img src="images/btn.jpg" /></a></p>
</p>
</body>
<script type="text/javascript">
(function(){
var test=new scroll_img('scroll_img',150,590,140,10);
test.initialize();
$('.left_btn').click(function(){
test.stop();
test.left();
test.autoplay();
});
$('.right_btn').click(function(){
test.stop();
test.right();
test.autoplay();
});
})();
</script>
</html>scroll_img.js lautet wie folgt:
function scroll_img(target,distance,show_width,li_width,mr){
this.distance=distance; //每次移动距离
this.target=$("#"+target);
this.show_width=show_width; //显示区域宽度
this.li_width=li_width; //items宽度
this.mr=mr; //items间距
this.scrollbar=$("#"+target).find('ul');
this.position=0;
this.direction=1;
}
scroll_img.prototype={
version:1.00,
author:"yangfeifei",
date:2011-11-21,
initialize:function(){
var t=this;
t.scrollbar.css('position','relative');
//初始动作
t.autoplay();
t.scrollbar.mouseover(function(){t.stop();}); //鼠标移到图片上停止自动播放
t.scrollbar.mouseout(function(){t.autoplay();}); //鼠标移出图片开始自动播放
},
right:function(){
var t=this;
(-t.position)<t.total_length()?t.position-=t.distance:t.position=t.position;
if((-t.position)<t.total_length()){
t.scrollbar.animate({left:t.position},500);
t.direction=1;
}
if((-t.position)==t.total_length()){
t.scrollbar.animate({left:t.position},500);
t.direction=-1;
}
},
left:function(){
var t=this;
(-t.position)>0?t.position+=t.distance:t.position=t.position;
if((-t.position)>0){
t.scrollbar.animate({left:t.position},500);
t.direction=-1;
}
if((-t.position)==0){
t.scrollbar.animate({left:t.position},500);
t.direction=1;
}
},
total_length:function(){
var t=this,
total_num=t.scrollbar.find('li').length;
return total_num*(t.li_width+t.mr)-(t.mr+t.show_width);
},
autoplay:function(){
var t=this;
t.setInt=setInterval(function(){
t.direction==1?t.right():t.left();
},3000);
},
stop:function(){
var t=this;
clearInterval(t.setInt);
}
}global.css lautet wie folgt :
/*CSS reset*/
body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;font-family:arial,"宋体";}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:bold;}
ol,ul{list-style-type:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}/*font-size:100%;的作用主要是改变它默认的大小，继承父体的字体大小*/
q:before,q:after{content:' ';}
abbr,acronym{border:0;}
.cb{clear:both;}
.cl{clear:left;}
.cr{clear:right;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
* html .clearfix{height:1%;}
.clearfix{display:block;}
/*主体css*/
.scroll_img_wrap{width:612px;margin: 10px auto;}
#scroll_img{width:590px;overflow:hidden;float:left;*position:relative;border: 1px #ccc solid;}/*可视区域宽度*/
.scroll_img_list{width:9999px;}
.scroll_img_list li{float:left;width:140px;margin-right:10px;}/*items*/
.scroll_img_list li p{text-align:center;}
.scroll_img_list li p a{text-decoration:none;color:#666;}
.left_btn,.right_btn{float:left;}Das obige ist der detaillierte Inhalt vonAusführliche Erklärung, wie man das Scrollen von Listen in JS implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
