1、焦点图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>焦点图</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 ul,ol{ 12 list-style: none; 13 } 14 img{ 15 border: none; 16 } 17 .box{ 18 width: 490px; 19 height: 170px; 20 margin:100px auto; 21 overflow: hidden; 22 position: relative; 23 } 24 .box ul{ 25 width: 500%; 26 position: absolute; 27 left:0; 28 top:0; 29 } 30 .box ul li{ 31 float: left; 32 } 33 .box ol{ 34 width: 180px; 35 position: absolute; 36 right:20px; 37 bottom: 10px; 38 39 } 40 .box ol li{ 41 float: left; 42 width: 18px; 43 height: 18px; 44 border:1px solid #c1c1c1; 45 background-color: #f1f1f1; 46 color: #000000; 47 text-align: center; 48 margin-left: 10px; 49 line-height:18px; 50 } 51 .box ol .current{ 52 background-color: yellow; 53 cursor: pointer; 54 } 55 </style> 56 </head> 57 <body> 58 <div class="box" id="jd"> 59 <div id="inner"> 60 <ul > 61 <li><img src="images/01.jpg" alt=""></li> 62 <li><img src="images/02.jpg" alt=""></li> 63 <li><img src="images/03.jpg" alt=""></li> 64 <li><img src="images/04.jpg" alt=""></li> 65 <li><img src="images/05.jpg" alt=""></li> 66 </ul> 67 </div> 68 <ol > 69 <li class="current">1</li> 70 <li>2</li> 71 <li>3</li> 72 <li>4</li> 73 <li>5</li> 74 </ol> 75 </div> 76 <script> 77 var box=document.getElementById("jd"); 78 var ul=jd.children[0].children[0]; 79 var ol=jd.children[1]; 80 var olis=ol.children; 81 for(var i=0;i<olis.length;i++){ 82 olis[i].index=i;//得到li的索引值 83 olis[i].onmouseover=function(){ 84 for(var j=0;j<olis.length;j++){ 85 olis[j].className=""; 86 } 87 this.className="current"; 88 target=this.index*(-490);//当前索引号乘以一个盒子的宽度 89 90 } 91 } 92 93 var leader=0; 94 var target=0; 95 setInterval(function(){ 96 leader=leader+(target-leader)/10; 97 ul.style.left=leader+"px"; 98 },30); 99 100 </script> 101 </body> 102 </html>
运行效果：
2、左右焦点图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>左右轮播图</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 ul{ 12 list-style: none; 13 } 14 img{ 15 border:none; 16 } 17 .all{ 18 width: 520px; 19 height: 280px; 20 margin: 100px auto; 21 position: relative; 22 overflow: hidden; 23 } 24 .all ul{ 25 width: 500%; 26 position: absolute; 27 left:0; 28 top:0; 29 } 30 .all ul li{ 31 float: left; 32 } 33 #arr{ 34 display: none; 35 } 36 #arr span{ 37 display: block; 38 position: absolute; 39 top:50%; 40 margin-top: -40px; 41 width: 40px; 42 height: 80px; 43 text-align: center; 44 background-color: #888888; 45 opacity: 0.8; 46 color: #333333; 47 line-height:80px; 48 font-size: 30px; 49 cursor: pointer; 50 } 51 #arr #left{ 52 left: 0; 53 } 54 #arr #right{ 55 right:0; 56 } 57 </style> 58 </head> 59 <body> 60 <div class="all" id="box"> 61 <div id="ad"> 62 <ul id="imgs"> 63 <li><img src="images/1.jpg" alt=""></li> 64 <li><img src="images/2.jpg" alt=""></li> 65 <li><img src="images/3.jpg" alt=""></li> 66 <li><img src="images/4.jpg" alt=""></li> 67 <li><img src="images/5.jpg" alt=""></li> 68 </ul> 69 </div> 70 <div id="arr"><span id="left"><</span><span id="right">></span></div> 71 </div> 72 </body> 73 74 </html> 75 <script> 76 function $(id){return document.getElementById(id);} 77 var box=document.getElementById("box"); 78 box.onmouseover=function(){ 79 $("arr").style.display="block"; 80 }; 81 box.onmouseout=function(){ 82 $("arr").style.display="none"; 83 }; 84 $("right").onclick=function(){//右边按钮 85 target-=520; 86 }; 87 $("left").onclick=function(){//左边按钮 88 target+=520; 89 }; 90 91 //缓动动画 92 var leader=0; 93 var target=0; 94 setInterval(function(){ 95 if(target>=0){ 96 target=0; 97 }else if(target<=-2080){ 98 target=-2080; 99 } 100 leader=leader+(target-leader)/10; 101 $("imgs").style.left=leader+"px"; 102 },30) 103 </script>
运行效果：
