jquery之效果
点击上下按钮进行图片轮播的效果
1 <script type="text/javascript"> 2 $(document).ready(function(){ 3 var size = $("#con ul li").length; 4 var index = 0; 5 $("#con ul li").not(":first").hide(); 6 $("#prev").click(function(){ 7 if(index == 0){ 8 index = size - 1; 9 }else{ 10 index = index - 1; 11 } 12 $("#con ul li").hide().eq(index).show(); 13 }); 14 $("#next").click(function(){ 15 if(index == size - 1){ 16 index = 0; 17 }else{ 18 index = index + 1; 19 } 20 $("#con ul li").hide().eq(index).show(); 21 }); 22 }); 23 </script>
1 <style type="text/css"> 2 *{ margin:0; padding:0;} 3 #con img{ width:200px; height:150px;} 4 </style>
1 <div style=" width:200px; height:150px; overflow:hidden;" id="con"> 2 <ul> 3 <li><img src="images/pic.jpg" alt="1" title="1" /></li> 4 <li><img src="images/pic1.jpg" alt="2" title="2" /></li> 5 <li><img src="images/pic2.jpg" alt="3" title="3" /></li> 6 </ul> 7 </div> 8 <input name="" type="button" value="prev" id="prev"><input name="" type="button" value="next" id="next">
