效果如下：
代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片切换</title>
<style>
.pics {width:300px; height:100px; border:solid 1px gray; overflow: hidden; position: relative;}
.pics li {float:left; list-style-type:none;}
.pics ul, #pics ul li {margin:0; padding:0;}
.pics ul {position: absolute; left: 0; top:0; width:10000px;}
.pics img {width:300px; height:100px;} .pics .divTip {position: absolute; left:10px; bottom:10px;}
.pics .divTip span {float: left; display:block; opacity:0.9; border-radius:5px; width:8px; height:8px; margin-right:5px; background-color:white; border:solid 1px #eee;}
.pics .divTip .active {background-color:gray;}
</style>
<script src="js/jquery.js"></script>
</head>
<body> <div id="pics1" class="pics">
<ul>
<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>
<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>
<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>
<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>
</ul>
</div> <div id="pics2" class="pics">
<ul>
<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>
<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>
<li><img src="http://p1.qhimg.com/d/_onebox/search.png" /></li>
<li><img src="http://www.baidu.com/img/bdlogo.gif" /></li>
</ul>
</div> <script>
$.fn.extend({
///这个函数是全部选择所有的元素
switchPic: function(delayMs, runMs) {
// oid runMs delayMs
var o = {};
o.itemWidth = this.width();
o.runMs = runMs || 500;
o.delayMs = delayMs || 2000;
o.obj = this; o.index = -1;
o.count = this.find('li').size();
o.isHover = false; var html = '<div class="divTip">';
for (var i=0; i<o.count; i++) html += '<span data-i="' + i + '"></span>';
html += '</div>';
this.append(html); o.fnAuto = function()
{
if (o.isHover) return;
o.index++;
if (o.index == o.count) o.index = 0; o.fnIndex(o.index);
} o.fnIndex = function (i)
{
o.index = i;
o.obj.find('.divTip span').removeClass('active');
o.obj.find('.divTip span').eq(o.index).addClass('active');
o.obj.find('ul').stop();
o.obj.find('ul').animate({left:'-' + (o.index * o.itemWidth) + 'px'}, o.runMs);
} window.setInterval(o.fnAuto, o.delayMs);
o.fnAuto(); this.hover(function(){
o.isHover = true;
},function(){
o.isHover = false;
}); this.find('.divTip span').mouseover(function(){
o.fnIndex($(this).data('i'));
});
}
}); $('#pics1').switchPic(1000, 100);
$('#pics2').switchPic(); </script> </body></html>