1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <style type="text/css"> 6 7 *{ 8 margin: 0px; 9 padding: 0px; 10 color:#333; 11 } 12 .slide-box{ 13 600px; 14 height:300px; 15 position: relative; 16 overflow:hidden; 17 } 18 .image-box{ 19 99999px; 20 position:absolute; 21 } 22 .image-box li{ 23 display:block; 24 600px; 25 height:300px; 26 float:left; 27 background: #9cc; 28 position:relative; 29 } 30 .image-box li p{ 31 100%; 32 height:40px; 33 padding:0 10px; 34 line-height:40px; 35 position:absolute; 36 bottom:0px; 37 color:#fff; 38 background:rgba(0,0,0,.4); 39 filter:alpha(opacity=50); 40 } 41 .slide-box .tip{ 42 position:absolute; 43 right:20px; 44 bottom:10px; 45 z-index:999; 46 } 47 .slide-box .tip li{ 48 display:block; 49 20px; 50 20px; 51 line-height:20px; 52 float: left; 53 margin-left:10px; 54 background:rgba(0,0,0,.4); 55 filter:alpha(opacity=50); 56 text-align:center; 57 border-radius: 20px; 58 } 59 .slide-box span{ 60 color:#fff; 61 cursor:pointer; 62 } 63 .slide-box .tip .active{ 64 background:#f60; 65 } 66 67 </style> 68 <script type="text/javascript" src="../jsunit/app/jsUnitCore.js"></script> 69 <script type="text/javascript" src="./js/jquery.js"></script> 70 <script type="text/javascript"> 71 //封装成的方法 72 function slideShow($obj){ 73 var $imageBox = $obj.find(".image-box"); 74 var $imageTip = $obj.find(".tip"); 75 var boxWidth = $obj.find('.image-box').width(); 76 var itemWith = $obj.find('.image-box li').width(); 77 var itemCount = $obj.find('.image-box li').length; 78 var index = 0; 79 80 //自动切换方法 81 function autoMove(){ 82 if(!$imageBox.is(':animated')){ 83 if(index == (itemCount-1)){ 84 index = 0; 85 $imageBox.stop().animate({left:0},changeStatus()); 86 }else{ 87 index ++; 88 $imageBox.stop().animate({left:'-='+itemWith},changeStatus()); 89 } 90 } 91 } 92 93 //状态切换 94 function changeStatus(){ 95 $imageTip.children().eq(index).addClass('active').siblings().removeClass('active'); 96 } 97 98 //点击切换 99 $('.slide-box .tip span').click(function(){ 100 index = parseInt($(this).html()) -1; 101 $imageBox.stop().animate({left:-index*itemWith},changeStatus()); 102 }) 103 //开启自动切换 104 setInterval(autoMove,5000); 105 } 106 $(function(){ 107 slideShow($('.slide-box')); 108 }) 109 </script> 110 </head> 111 <body> 112 <div class="slide-wrap"> 113 <div class="slide-box"> 114 <ul class="image-box"> 115 <li><a href="javascript:"><img src="./images/1.jpg" alt="" /><p>nihsoa</p></a></li> 116 <li><a href="#"><img src="./images/2.jpg" alt="" /><p>nihsoa</p></a></li> 117 <li><a href="#"><img src="./images/3.jpg" alt="" /><p>nihsoa</p></a></li> 118 <li><a href="#"><img src="./images/4.jpg" alt="" /><p>nihsoa</p></a></li> 119 <li><a href="#"><img src="./images/1.jpg" alt="" /><p>nihsoa</p></a></li> 120 </ul> 121 <ul class="tip"> 122 <li class="active"><span>1</span></li> 123 <li><span>2</span></li> 124 <li><span>3</span></li> 125 <li><span>4</span></li> 126 <li><span>5</span></li> 127 </ul> 128 </div> 129 </div> 130 </body> 131 </html>