The effect of regular scrolling of content written by a netizen.

This is a regular scrolling effect for content written by a peer online. It is written based on jquery and can be used as needed.

(Function ($) {$. FN. conshow = function (options) {var set = {Timeout: 5000, listindexid: '# listindex', listitem_boxid:' # listitem_box ', listitem :'. listitem ', owidth: 190, next:' # next', PREV: '# Prev'}; Options = options |{}; var opts = $. extend (set, options); var n = 0; var timer = NULL; var that = This; var Len = $ (this ). find (OPTs. listitem ). length; var listitem_box = $ (OPTs. listitem_boxid); var bstop = false; For (VAR I = 0; I <Len; I ++) {$ ('<a href = "#">' + (I + 1) + '</a> '). appendto ($ (OPTs. listindexid);} var Index = $ (OPTs. listindexid ). find ('A'); index. eq (n ). addclass ('current'); function play () {timer = setinterval (function () {n ++; If (n = Len) n = 0; listitem_box.stop (). animate ({left:-(n) * opts. owidth}); index. removeclass (). eq (n ). addclass ('current');}, opts. timeout) ;}play (); function goleft () {listitem_box.stop (). animate ({left:-(LEN-1) * opts. owidth}, function () {n = len-1; index. removeclass (). eq (n ). addclass ('current'); play () ;}) ;} function goright () {listitem_box.stop (). animate ({left: 0}, function () {n = 0; index. removeclass (). eq (n ). addclass ('current'); play () ;}; (OPTs. next ). click (function () {clearinterval (timer); N ++; If (n = Len) {goright ()} else {listitem_box.stop (). animate ({left:-(n) * opts. owidth}, function () {index. removeclass (). eq (n ). addclass ('current'); play () ;}}); $ (OPTs. PREV ). click (function () {clearinterval (timer); n --; If (n =-1) {goleft ()} else {listitem_box.stop (). animate ({left:-(n) * opts. owidth}, function () {index. removeclass (). eq (n ). addclass ('current'); play () ;}}}); index. each (function (m) {$ (this ). click (function () {clearinterval (timer); index. removeclass (). eq (m ). addclass ('current'); listitem_box.stop (). animate ({left:-(m) * opts. owidth}, function () {n = m; play () ;}) ;}}) (jquery );

HTML:

 
<Div id = "test"> <Div id = "TOP"> <span id = "Prev"> «</span> <Div id = "listindex"> </Div> <span id = "Next">» </span> </div> <Div id = "conbox"> <Div id = "listitem_box"> <ul> <li class = "listitem"> 1 </LI> <li class = "listitem"> 2 </LI> <li class = "listitem"> 3 </LI> </ul> </div>
 

CSS:

* {Margin: 0; padding: 0 ;}# test {width: 190px; overflow: hidden; margin: 100px auto ;}# top {Height: 15px; margin-bottom: 5px ;}# Prev, # Next {display: block; float: Left; width: 15px; Height: 15px; text-align: center; Background: #000; color: # FFF; line-Height: 15px; cursor: pointer;} # listindex {width: 50px; float: Left ;}# listindex A {display: block; float: Left; width: 15px; Height: 15px; line-Height: 15px; text-align: center; Background: #000; color: # FFF; text-Decoration: underline; margin-left: 1px ;}# listindex. current {Background: #999 ;}# conbox {width: 190px; overflow: hidden; Height: 200px; position: relative; clear: Both ;}# listitem_box {width: 570px; height: 200px; position: absolute; top: 0; left: 0 ;}# listitem_box ul {width: 570px; List-style: None ;}. listitem {width: pixel PX; Height: 200px; font-size: 60px; line-Height: 200p0x; color: # FFF; text-align: center; Background: #000; float: left ;}
 

Usage:

$ (Document). Ready (function () {$ ('# test'). conshow ();});
 

 
Parameters can be followed, as shown in figure
$ ('# Test '). conshow ({Timeout: 5000, // time interval listindexid: '# listindex', // the ID of the content layer where the index is placed above listitem_boxid:' # listitem_box ', // The ID listitem of the parent layer of the scrolling content layer below :'. listitem', // class owidth: 190 for a single scrolling content layer, // The width of a single scrolling content layer: Next: '# next', // controls the ID Prev to scroll down: '# prev' // control the ID of a scroll forward });