<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <style type="text/css"> .top_adv { background: url(../images/top_adv_bg.png) no-repeat; height: 200px; width: 280px; overflow: hidden; position: relative; } .top_adv ul { padding: 0px; margin: 0px; } .top_adv ul li { position: relative; margin-bottom: 0px; list-style: none; } .top_adv ul li, .top_adv ul li img { width: 280px; height: 200px; _display: inline; } .order { position: absolute; right: 5px; bottom: -6px; font: 12px/1.5 tahoma, arial; height: 18px; } .order li { list-style: none; float: left; color: #d94b01; text-align: center; line-height: 16px; width: 16px; height: 16px; font-family: Arial; font-size: 11px; cursor: pointer; margin-left: 3px; border: 1px solid #f47500; background-color: #fcf2cf; } .order li.on { line-height: 18px; width: 18px; height: 18px; font-size: 14px; margin-top: -2px; background-color: #ff9415; font-weight: bold; color: #FFF; } </style> 仿淘宝/alibaba图片切换： <div class="top_adv area"> <ul id="idSlider"> <li> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song1.jpg" alt="图片上传预览" /> </li> <li> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song2.jpg" alt="多级联动菜单" /> </li> <li> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song3.jpg" alt="浮动定位提示" /> </li> <li> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song4.jpg" alt="数据延迟加载" /> </li> <li> <img src="http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_song5.jpg" alt="简便文件上传" /> </li> </ul> <p class="order"> </p> </div> </body> </html> <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { ScrollImg("#idSlider", "li", 200, ".order"); }); function ScrollImg(iMove, iChild, scrollH, control) { var objMove = $(iMove); var orderNum = objMove.find(iChild).length; var uiHeight = orderNum * scrollH; objMove.height(uiHeight); var isMove = false; for (var i = 1; i <= orderNum; i++) { $(".order").append("<li>" + i + "</li>"); } var nextIndex = 0; $(control).find(iChild).eq(0).addClass("on"); //开始滚动 function autoRun() { isMove = true; if (nextIndex < orderNum - 1) { nextIndex++; AddStyle(nextIndex); objMove.stop().animate({ marginTop: "-=" + scrollH }, 500, function () { isMove = false; }); } else { nextIndex = 0; AddStyle(nextIndex); objMove.stop().animate({ marginTop: 0 }, 500, function () { isMove = false; }); } } $(control).find(iChild).click(function () { var index = nextIndex = $(this).index(); objMove.animate({ marginTop: -index * scrollH + "px" }, 500); AddStyle(index); }); function AddStyle(i) { $(control).find(iChild).eq(i).addClass("on").siblings(iChild).removeClass("on"); } var tt = setInterval(function () { if (!isMove) { autoRun(); } }, 2000); objMove.hover(function () { clearInterval(tt); }, function () { tt = setInterval(function () { if (!isMove) { autoRun(); } }, 2000); }); } </script>
