Javascript implements the list scrolling method, and javascript implements scrolling.

Javascript implements the list scrolling method, and javascript implements scrolling.

This example describes how to implement list scrolling in javascript. Share it with you for your reference. The details are 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"> 
Scroll_img.js is as follows:
Function scroll_img (target, distance, show_width, li_width, mr) {this. distance = distance; // the distance between each movement and this.tar get =$ ("#" + 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 '); // The initial action t. autoplay (); t. scrollbar. mouseover (function () {t. stop () ;}); // move the mouse over the image to stop automatic playback t. scrollbar. mouseout (function () {t. autoplay () ;}); // move the mouse out of the image to start automatic playback}, 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 ('lil '). length; return total_num * (t. li_width + t. mr)-(t. mr + t. show_width) ;}, autoplay: function () {var t = this; t. setInt = setInte Rval (function () {t. direction = 1? T. right (): t. left () ;}, 3000) ;}, stop: function () {var t = this; clearInterval (t. setInt );}}
Global.css:
/* 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%; change the default size, font size of the inherited parent body */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;}/* Subject css */. scroll_img_wrap {width: 612px; margin: 10px auto;} # scroll_img {width: 590px; overflow: hidden; float: left; * position: relative; border: 1px # ccc solid ;} /* visible 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 ;}
I hope this article will help you design javascript programs.