标签：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <style> 8 * { 9 margin:0; 10 padding:0; 11 } 12 .ad { 13 width:1200px; 14 height:500px; 15 border:1px solid red; 16 margin:200px auto; 17 overflow:hidden; 18 position:relative; 19 } 20 .imgBox { 21 position:absolute; 22 left:0; 23 right:0; 24 } 25 .imgBox li { 26 list-style:none; 27 float:left; 28 width:1200px; 29 height:500px; 30 } 31 .imgBox img { 32 display:block; 33 } 34 .num { 35 position:absolute; 36 bottom:5px; 37 right:5px; 38 } 39 .num li { 40 list-style:none; 41 float:left; 42 width:20px; 43 height:20px; 44 background-color:#903; 45 margin-left:10px; 46 border-radius:10px; 47 cursor:pointer; 48 } 49 .num li.on { 50 background-color:#FF0; 51 } 52 </style> 53 <body> 54 <div class="ad"> 55 <ul class="imgBox"> 56 <li><img src="http://placehold.it/1200x500" /></li> 57 <li><img src="http://placehold.it/1200x500" /></li> 58 <li><img src="http://placehold.it/1200x500" /></li> 59 <li><img src="http://placehold.it/1200x500" /></li> 60 </ul> 61 <ul class="num"> 62 <li></li> 63 <li></li> 64 <li></li> 65 <li></li> 66 </ul> 67 </div> 68 69 <script src="http://vscss.com/dm/jquery.js"></script> 70 <script> 71 $(function(){ 72 var $imgWidth = $(‘.imgBox‘).find(‘li‘).eq(0).width(); 73 var len = $(‘.imgBox‘).find(‘li‘).length; 74 $(‘.imgBox‘).width($imgWidth*len); 75 var index = 0; 76 var timer =null; 77 var showImg = function(index){ 78 $(‘.imgBox‘).stop(true,false).animate({"left":-$imgWidth*index},500) 79 $(‘.num li‘).removeClass(‘on‘) 80 .eq(index).addClass(‘on‘); 81 }; 82 $(‘.num‘).find(‘li‘).mouseover(function(){ 83 index = $(‘.num‘).find(‘li‘).index(this); 84 showImg(index); 85 }).eq(0).mouseover(); 86 $(‘.ad‘).hover(function(){ 87 clearInterval(timer); 88 },function(){ 89 timer = setInterval(function(){ 90 showImg(index); 91 index++; 92 if(index==len){index=0;} 93 },2000) 94 }).trigger(‘mouseout‘); 95 }); 96 </script> 97 </body> 98 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 </head> 7 <style> 8 * { 9 margin:0; 10 padding:0; 11 } 12 .adWrap { 13 position:absolute; 14 left:50%; 15 margin-left:-960px; 16 } 17 .ad { 18 width:1920px; 19 height:500px; 20 border:1px solid red; 21 margin:200px auto; 22 overflow:hidden; 23 position:relative; 24 } 25 .imgBox { 26 position:absolute; 27 left:0; 28 right:0; 29 } 30 .imgBox li { 31 list-style:none; 32 float:left; 33 width:1920px; 34 height:500px; 35 } 36 .imgBox img { 37 display:block; 38 } 39 .num { 40 position:absolute; 41 bottom:5px; 42 right:5px; 43 } 44 .num li { 45 list-style:none; 46 float:left; 47 width:20px; 48 height:20px; 49 background-color:#903; 50 margin-left:10px; 51 border-radius:10px; 52 cursor:pointer; 53 } 54 .num li.on { 55 background-color:#FF0; 56 } 57 </style> 58 <body> 59 <div class="adWrap"> 60 <div class="ad"> 61 <ul class="imgBox"> 62 <li><img src="http://placehold.it/1920x500" /></li> 63 <li><img src="http://placehold.it/1920x500" /></li> 64 <li><img src="http://placehold.it/1920x500" /></li> 65 <li><img src="http://placehold.it/1920x500" /></li> 66 </ul> 67 <ul class="num"> 68 <li></li> 69 <li></li> 70 <li></li> 71 <li></li> 72 </ul> 73 </div> 74 </div> 75 76 <script src="http://vscss.com/dm/jquery.js"></script> 77 <script> 78 $(function(){ 79 var $imgWidth = $(‘.imgBox‘).find(‘li‘).eq(0).width(); 80 var len = $(‘.imgBox‘).find(‘li‘).length; 81 $(‘.imgBox‘).width($imgWidth*len); 82 var index = 0; 83 var timer =null; 84 var showImg = function(index){ 85 $(‘.imgBox‘).stop(true,false).animate({"left":-$imgWidth*index},500) 86 $(‘.num li‘).removeClass(‘on‘) 87 .eq(index).addClass(‘on‘); 88 }; 89 $(‘.num‘).find(‘li‘).mouseover(function(){ 90 index = $(‘.num‘).find(‘li‘).index(this); 91 showImg(index); 92 }).eq(0).mouseover(); 93 $(‘.ad‘).hover(function(){ 94 clearInterval(timer); 95 },function(){ 96 timer = setInterval(function(){ 97 showImg(index); 98 index++; 99 if(index==len){index=0;} 100 },2000) 101 }).trigger(‘mouseout‘); 102 }); 103 </script> 104 </body> 105 </html>
标签：
原文地址：http://www.cnblogs.com/vscss/p/5540291.html
