效果如下：
代码：
<!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>