轮播图
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 ul{ 12 list-style: none; 13 overflow: hidden; 14 } 15 ul li{ 16 float: left; 17 width: 200px; 18 height: 50px; 19 border:3px solid black; 20 text-align: center; 21 line-height: 50px; 22 } 23 </style> 24 </head> 25 <body> 26 <ul> 27 <li>1</li> 28 <li>2</li> 29 <li>3</li> 30 <li>4</li> 31 <li>5</li> 32 </ul> 33 <script> 34 // 除了通过ID名获取标签,还有通过标签名获取标签 35 var lis=document.getElementsByTagName('li'); 36 for(var i=0;i<lis.length;i++){ 37 console.log(lis[i]); 38 // this关键字: 代表当前操作的对象 39 lis[i].onclick=function(){ 40 // 排他 41 for(var j=0;j<lis.length;j++){ 42 lis[j].style.background='white'; 43 } 44 this.style.background='red'; 45 } 46 }; 47 </script> 48 </body> 49 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 #show{ 12 width: 500px; 13 overflow: hidden; 14 margin:200px auto; 15 /*border: 3px solid black;*/ 16 position: relative; 17 } 18 div ul{ 19 list-style: none; 20 width: 3000px; 21 overflow: hidden; 22 /*margin-left:-500px;*/ 23 /*transition:all 1s;*/ 24 } 25 div ul li{ 26 float:left; 27 } 28 div span{ 29 position: absolute; 30 width:40px; 31 height: 40px; 32 background: rgba(0,0,0,0.5); 33 top:50%; 34 margin-top: -20px; 35 font-size:30px; 36 text-align: center; 37 line-height: 37px; 38 color: white; 39 cursor: pointer; 40 } 41 div #btn_left{ 42 left: -10px; 43 border-radius: 0px 20px 20px 0px ; 44 } 45 div #btn_right{ 46 right:-10px; 47 border-radius: 20px 0px 0px 20px ; 48 } 49 #ol1{ 50 list-style: none; 51 overflow: hidden; 52 background: #ccc; 53 height: 20px; 54 width: 88px; 55 border-radius: 10px; 56 position: absolute; 57 left:50%; 58 margin-left: -44px; 59 bottom: 30px; 60 } 61 #ol1 li{ 62 float:left; 63 width: 10px; 64 height: 10px; 65 background: white; 66 border-radius: 50%; 67 margin-right:7px; 68 margin-top: 5px; 69 cursor: pointer; 70 } 71 #ol1 li:nth-of-type(5){ 72 margin-right: 0px; 73 } 74 #ol1 li:nth-of-type(1){ 75 margin-left: 5px; 76 } 77 </style> 78 </head> 79 <body> 80 <div id="show"> 81 <ul id="ul1"> 82 <li><img src="img/bg01.jpg" alt="" width="500px"/></li> 83 <li><img src="img/bg02.jpg" alt="" width="500px"/></li> 84 <li><img src="img/bg03.jpg" alt="" width="500px"/></li> 85 <li><img src="img/bg04.jpg" alt="" width="500px"/></li> 86 <li><img src="img/bg05.jpg" alt="" width="500px"/></li> 87 <li><img src="img/bg01.jpg" alt="" width="500px"/></li> 88 </ul> 89 <span id="btn_left"> < </span> 90 <span id="btn_right"> > </span> 91 <ol id="ol1"> 92 <li></li> 93 <li></li> 94 <li></li> 95 <li></li> 96 <li></li> 97 </ol> 98 </div> 99 <script> 100 var ul1=document.getElementById('ul1'); 101 var show=document.getElementById('show'); 102 var btn_l=document.getElementById('btn_left'); 103 var btn_r=document.getElementById('btn_right'); 104 // document.getElementsByTagName('li'); 105 var ol1=document.getElementById('ol1').children; 106 // 运用.children获取下来的标签,也是一个数组 使用时必须要带下标 107 var i=0; 108 var timer; 109 timer=setInterval(function(){ 110 i++; 111 if(i==2500){ 112 i=0; 113 } 114 ul1.style.marginLeft=-i+"px"; 115 },5); 116 show.onmouseover=function(){ 117 clearInterval(timer); 118 } 119 show.onmouseout=function(){ 120 clearInterval(timer); 121 timer=setInterval(function(){ 122 i++; 123 if(i==2500){ 124 i=0; 125 } 126 ul1.style.marginLeft=-i+"px"; 127 },5); 128 } 129 btn_l.onclick=function(){ 130 i--; 131 if(i==-1){ 132 i=4; 133 } 134 ul1.style.marginLeft=-500*i+"px"; 135 } 136 btn_right.onclick=function(){ 137 i++; 138 if(i==5){ 139 i=0; 140 } 141 ul1.style.marginLeft=-500*i+"px"; 142 } 143 for(var j=0;j<ol1.length;j++){ 144 // 1,先给所有的li标签设置下标值 setAttribute方法 145 // 2,点击之后,获取当前点击中的li标签的index值 146 // 3,把获取到的index值,用于ul1 147 // this:当前操作的对象 148 ol1[j].setAttribute('index',j); 149 ol1[j].onclick=function(){ 150 var index=this.getAttribute('index'); 151 console.log(index); 152 for(var k=0;k<ol1.length;k++){ 153 ol1[k].style.background='white'; 154 } 155 this.style.background='#f60'; 156 } 157 } 158 159 </script> 160 </body> 161 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 #show{ 12 width: 500px; 13 overflow: hidden; 14 margin:200px auto; 15 /*border: 3px solid black;*/ 16 position: relative; 17 } 18 div ul{ 19 list-style: none; 20 width: 3000px; 21 overflow: hidden; 22 /*margin-left:-500px;*/ 23 /*transition:all 1s;*/ 24 } 25 div ul li{ 26 float:left; 27 } 28 div span{ 29 position: absolute; 30 width:40px; 31 height: 40px; 32 background: rgba(0,0,0,0.5); 33 top:50%; 34 margin-top: -20px; 35 font-size:30px; 36 text-align: center; 37 line-height: 37px; 38 color: white; 39 cursor: pointer; 40 } 41 div #btn_left{ 42 left: -10px; 43 border-radius: 0px 20px 20px 0px ; 44 } 45 div #btn_right{ 46 right:-10px; 47 border-radius: 20px 0px 0px 20px ; 48 } 49 #ol1{ 50 list-style: none; 51 overflow: hidden; 52 background: #ccc; 53 height: 20px; 54 width: 88px; 55 border-radius: 10px; 56 position: absolute; 57 left:50%; 58 margin-left: -44px; 59 bottom: 30px; 60 } 61 #ol1 li{ 62 float:left; 63 width: 10px; 64 height: 10px; 65 background: white; 66 border-radius: 50%; 67 margin-right:7px; 68 margin-top: 5px; 69 cursor: pointer; 70 } 71 #ol1 li:nth-of-type(5){ 72 margin-right: 0px; 73 } 74 #ol1 li:nth-of-type(1){ 75 margin-left: 5px; 76 background: #f60; 77 } 78 </style> 79 </head> 80 <body> 81 <div id="show"> 82 <ul id="ul1"> 83 <li><img src="img/bg01.jpg" alt="" width="500px"/></li> 84 <li><img src="img/bg02.jpg" alt="" width="500px"/></li> 85 <li><img src="img/bg03.jpg" alt="" width="500px"/></li> 86 <li><img src="img/bg04.jpg" alt="" width="500px"/></li> 87 <li><img src="img/bg05.jpg" alt="" width="500px"/></li> 88 </ul> 89 <span id="btn_left"> < </span> 90 <span id="btn_right"> > </span> 91 <ol id="ol1"> 92 <li></li> 93 <li></li> 94 <li></li> 95 <li></li> 96 <li></li> 97 </ol> 98 </div> 99 <script> 100 var ul1=document.getElementById('ul1'); 101 var show=document.getElementById('show'); 102 var btn_l=document.getElementById('btn_left'); 103 var btn_r=document.getElementById('btn_right'); 104 // document.getElementsByTagName('li'); 105 var ol1=document.getElementById('ol1').children; 106 // 运用.children获取下来的标签,也是一个数组 使用时必须要带下标 107 var i=0; 108 var timer; 109 timer=setInterval(function(){ 110 for(var g=0;g<ol1.length;g++){ 111 ol1[g].style.background='white'; 112 } 113 i++; 114 if(i==5){ 115 i=0; 116 ul1.style.transition='none'; 117 } 118 ul1.style.marginLeft=-500*i+"px"; 119 ol1[i].style.background='#f60'; 120 },1000); 121 show.onmouseover=function(){ 122 clearInterval(timer); 123 } 124 show.onmouseout=function(){ 125 clearInterval(timer); 126 timer=setInterval(function(){ 127 for(var g=0;g<ol1.length;g++){ 128 ol1[g].style.background='white'; 129 } 130 i++; 131 if(i==5){ 132 i=0; 133 ul1.style.transition='none'; 134 } 135 ul1.style.marginLeft=-500*i+"px"; 136 ol1[i].style.background='#f60'; 137 },1000); 138 } 139 btn_l.onclick=function(){ 140 141 i--; 142 if(i==-1){ 143 i=4; 144 } 145 ul1.style.marginLeft=-500*i+"px"; 146 } 147 btn_right.onclick=function(){ 148 i++; 149 if(i==5){ 150 i=0; 151 } 152 ul1.style.marginLeft=-500*i+"px"; 153 } 154 for(var j=0;j<ol1.length;j++){ 155 // 1,先给所有的li标签设置下标值 setAttribute方法 156 // 2,点击之后,获取当前点击中的li标签的index值 157 // 3,把获取到的index值,用于ul1 158 // this:当前操作的对象 159 ol1[j].setAttribute('index',j); 160 ol1[j].onclick=function(){ 161 var index=this.getAttribute('index'); 162 i=index; 163 console.log(index); 164 for(var k=0;k<ol1.length;k++){ 165 ol1[k].style.background='white'; 166 } 167 this.style.background='#f60'; 168 ul1.style.marginLeft=-500*index+"px"; 169 } 170 } 171 </script> 172 </body> 173 </html>
自己写的
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 padding: 0px; 9 margin: 0px; 10 } 11 #show{ 12 width: 250px; 13 margin: 200px auto; 14 overflow: hidden; 15 position: relative; 16 } 17 #pic{ 18 width: 2000px; 19 list-style: none; 20 overflow: hidden; 21 transition: all 1s; 22 } 23 #show #pic li{ 24 float: left; 25 } 26 #show span{ 27 width: 36px; 28 height: 36px; 29 position: absolute; 30 top: 50%; 31 margin-top: -18px; 32 font-size: 28px; 33 color: white; 34 text-align: center; 35 line-height: 36px; 36 background: rgba(0,0,0,0.5); 37 cursor: pointer; 38 } 39 #show #btn_left{ 40 left: -8px; 41 border-radius:0px 18px 18px 0px ; 42 } 43 #show #btn_right{ 44 right: -8px; 45 border-radius:18px 0px 0px 18px ; 46 } 47 #show ol{ 48 list-style: none; 49 position: absolute; 50 text-align: center; 51 font-size: 0px; 52 bottom: 13px; 53 margin-left: -30px; 54 left: 50%; 55 border-radius: 10px; 56 background: rgba(255,255,255,.3); 57 } 58 #show ol li{ 59 display: inline-block; 60 margin: 3px; 61 border-radius: 50%; 62 width: 8px; 63 height: 8px; 64 color: #3C3C3C; 65 cursor: pointer; 66 background: #FFFFFF; 67 } 68 #show #ol1 li:nth-of-type(1){ 69 background: #f60; 70 } 71 </style> 72 </head> 73 <body> 74 <div id="show"> 75 <ul id="pic"> 76 <li><img src="images/pic25.jpg"/></li> 77 <li><img src="images/pic24.jpg"/></li> 78 <li><img src="images/pic23.jpg"/></li> 79 <li><img src="images/pic22.jpg"/></li> 80 <li><img src="images/pic21.jpg"/></li> 81 </ul> 82 <span id="btn_left"> 83 < 84 </span> 85 <span id="btn_right"> 86 > 87 </span> 88 <ol id="ol1"> 89 <li></li> 90 <li></li> 91 <li></li> 92 <li></li> 93 <li></li> 94 </ol> 95 </div> 96 <script type="text/javascript"> 97 var ul=document.getElementById('pic'); 98 var show=document.getElementById('show'); 99 var le=document.getElementById('btn_left'); 100 var ri=document.getElementById('btn_right'); 101 var ol=document.getElementById('ol1').children; 102 var i=0; 103 var timer; 104 timer=setInterval(function(){ 105 for(var q=0;q<ol.length;q++){ 106 ol[q].style.background='#FFFFFF'; 107 } 108 i++; 109 ul.style.transition='all 1s'; 110 if(i==5){ 111 ul.style.transition='none'; 112 i=0; 113 } 114 ul.style.marginLeft=-250*i+"px"; 115 ol[i].style.background='#FF6600'; 116 },1000); 117 show.onmouseover=function(){ 118 clearInterval(timer); 119 } 120 show.onmouseout=function(){ 121 clearInterval(timer); 122 timer=setInterval(function(){ 123 for(var q=0;q<ol.length;q++){ 124 ol[q].style.background='#FFFFFF'; 125 } 126 i++; 127 ul.style.transition='all 1s'; 128 if(i==5){ 129 ul.style.transition='none'; 130 i=0; 131 } 132 ul.style.marginLeft=-250*i+"px"; 133 ol[i].style.background='#FF6600'; 134 },1000); 135 } 136 le.onclick=function(){ 137 i--; 138 console.log(i); 139 if(i<0){ 140 i=4; 141 } 142 for(var g=0;g<ol.length;g++){ 143 ol[g].style.background='#FFFFFF'; 144 } 145 ol[i].style.background='#FF6600'; 146 ul.style.marginLeft=-250*i+"px"; 147 } 148 ri.onclick=function(){ 149 i++; 150 if(i==4){ 151 i=0; 152 } 153 for(var n=0;n<ol.length;n++){ 154 ol[n].style.background='#FFFFFF'; 155 } 156 ol[i].style.background='#FF6600'; 157 ul.style.marginLeft=-250*i+"px"; 158 } 159 for(var d=0;d<ol.length;d++){ 160 ol[d].setAttribute('index',d); 161 162 ol[d].onclick=function(){ 163 var index=this.getAttribute('index'); 164 i=index; 165 for(var j=0;j<ol.length;j++){ 166 ol[j].style.background='#FFFFFF'; 167 } 168 this.style.background='#FF6600'; 169 ul.style.marginLeft=-250*index+"px"; 170 } 171 } 172 </script> 173 </body> 174 </html>
