JavaScript Implementation list scrolling method _javascript tips

The examples in this article describe the way JavaScript implements list scrolling. Share to everyone for your reference. Specifically as follows:

Index.html is as follows:

<!
DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >  

The

Scroll_img.js is as follows:

function Scroll_img (TARGET,DISTANCE,SHOW_WIDTH,LI_WIDTH,MR) {this.distance=distance;
 Each move distance this.target=$ ("#" +target); This.show_width=show_width;  Display area width this.li_width=li_width;     Items width this.mr=mr;
 Items Spacing 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 ');
  Initial action T.autoplay ();  T.scrollbar.mouseover (function () {t.stop ();}); Move the mouse over the picture to stop AutoPlay t.scrollbar.mouseout (function () {T.autoplay ();});
  Mouse move out of the picture start automatically play}, 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);

 }
}

The

Global.css is as follows:

/*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, "Song Body";} 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;}
The main function of/*font-size:100% is to change its default size, to inherit the font size of the parent * * * 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}/* Principal css*/. scroll_img_wrap{
 width:612px;margin:10px Auto;} #scroll_img {width:590px;overflow:hidden;float:left;*position:relative;border:1px #ccc solid}
   /* Visual area width//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;}

The

wants this article to help you with your JavaScript programming.