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

这是给一个网上的同行写的一个内容定时滚动的效果，基于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
｝);