So implementieren Sie das Scrollen von Listen in Javascript_Javascript-Kenntnisse-js-Tutorial-php.cn

So implementieren Sie das Scrollen von Listen in Javascript_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 15:48:02

Original

1347 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie das Scrollen von Listen in JavaScript implementiert wird. 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>
<div class="scroll_img_wrap clearfix">
 <p class="left_btn"><a href="javascript:void(0)"><img src="images/btn.jpg" /></a></p>
 <div 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>
 </div>
 <p class="right_btn"><a href="javascript:void(0)"><img src="images/btn.jpg" /></a></p>
</div>
</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>

Nach dem Login kopieren

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()&#63;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&#63;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&#63;t.right():t.left();
  },3000);
 },
 stop:function(){
  var t=this;
  clearInterval(t.setInt);
 }
}

Nach dem Login kopieren

global.css lautet wie folgt:

/*CSS reset*/
body,div,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;}

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.