给一个网友写的内容定时滚动的效果。

这是给一个网上的同行写的一个内容定时滚动的效果，基于jquery写的，用得上就拿去用吧。

(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>

    </div>

</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 a.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:190px; height:200px; font-size:60px; line-height:200p0x; color:#fff; text-align:center; background:#000; float:left;}

用法：

$(document).ready(function(){

 $('#test').conShow();         

});

后面可以带参数，如

 
   

  
    
$('#test').conShow(｛

     timeout:          5000,            //时间间隔

     listIndexId:      '#listIndex',    //上面放置索引的内容层的ID

     listItem_boxID:   '#listItem_box', //下面滚动的内容层的父层的ID

     listItem:         '.listItem',     //单个滚动内容层的class

     oWidth:           190,             //单个滚动内容层的宽度

     next:             '#next',         //控制向下一个滚动的ID

     prev:             '#prev'          //控制向前一个滚动的ID

｝);