js轮播

最新推荐文章于 2022-08-30 11:57:18 发布

桃之夭夭、

最新推荐文章于 2022-08-30 11:57:18 发布

阅读量194

点赞数

 
  <!DOCTYPE html> 
 
  <html> 
 
  <head> 
 
  <meta charset= 
  "UTF-8" 
  > 
 
  <title>轮播图</title> 
 
  <style> 
 
  * { 
 
  margin:0; 
 
  padding:0; 
 
  } 
 
  a{ 
 
  text-decoration: none; 
 
  } 
 
  .container { 
 
  position: relative; 
 
  width: 600px; 
 
  height: 400px; 
 
  margin:100px auto 0 auto; 
 
  box-shadow: 0 0 5px green; 
 
  overflow: hidden; 
 
  } 
 
  .container .wrap { 
 
  position: absolute; 
 
  width: 4200px; 
 
  height: 400px; 
 
  z-index: 1; 
 
  } 
 
  .container .wrap img { 
 
  float: left; 
 
  width: 600px; 
 
  height: 400px; 
 
  } 
 
  .container .buttons { 
 
  position: absolute; 
 
  right: 5px; 
 
  bottom:40px; 
 
  width: 150px; 
 
  height: 10px; 
 
  z-index: 2; 
 
  } 
 
  .container .buttons span { 
 
  margin-left: 5px; 
 
  display: inline-block; 
 
  width: 20px; 
 
  height: 20px; 
 
  border-radius: 50%; 
 
  background-color: green; 
 
  text-align: center; 
 
  color:white; 
 
  cursor: pointer; 
 
  } 
 
  .container .buttons span.on{ 
 
  background-color: red; 
 
  } 
 
  .container .arrow { 
 
  position: absolute; 
 
  top: 35%; 
 
  color: green; 
 
  padding:0px 14px; 
 
  border-radius: 50%; 
 
  font-size: 50px; 
 
  z-index: 2; 
 
  display: none; 
 
  } 
 
  .container .arrow_left { 
 
  left: 10px; 
 
  } 
 
  .container .arrow_right { 
 
  right: 10px; 
 
  } 
 
  .container:hover .arrow { 
 
  display: block; 
 
  } 
 
  .container .arrow:hover { 
 
  background-color: rgba(0,0,0,0.2); 
 
  } 
 
  </style> 
 
  </head> 
 
  <body> 
 
  <div class= 
  "container" 
  > 
 
  <div class= 
  "wrap" 
  style= 
  "left: -600px;" 
  > 
 
  <img src= 
  "./img/5.jpg" 
  alt= 
  "" 
  > 
 
  <img src= 
  "./img/1.jpg" 
  alt= 
  "" 
  > 
 
  <img src= 
  "./img/2.jpg" 
  alt= 
  "" 
  > 
 
  <img src= 
  "./img/3.jpg" 
  alt= 
  "" 
  > 
 
  <img src= 
  "./img/4.jpg" 
  alt= 
  "" 
  > 
 
  <img src= 
  "./img/5.jpg" 
  alt= 
  "" 
  > 
 
  <img src= 
  "./img/1.jpg" 
  alt= 
  "" 
  > 
 
  </div> 
 
  <div class= 
  "buttons" 
  > 
 
  <span class= 
  "on" 
  >1</span> 
 
  <span>2</span> 
 
  <span>3</span> 
 
  <span>4</span> 
 
  <span>5</span> 
 
  </div> 
 
  <a href= 
  "javascript:;" 
  rel= 
  "external nofollow" 
  rel= 
  "external nofollow" 
  rel= 
  "external nofollow" 
  rel= 
  "external nofollow" 
  class= 
  "arrow arrow_left" 
  ><</a> 
 
  <a href= 
  "javascript:;" 
  rel= 
  "external nofollow" 
  rel= 
  "external nofollow" 
  rel= 
  "external nofollow" 
  rel= 
  "external nofollow" 
  class= 
  "arrow arrow_right" 
  >></a> 
 
  </div> 
 
  <script> 
 
  var 
  wrap = document.querySelector( 
  ".wrap" 
  ); 
 
  var 
  next = document.querySelector( 
  ".arrow_right" 
  ); 
 
  var 
  prev = document.querySelector( 
  ".arrow_left" 
  ); 
 
  next.onclick =  
  function 
  () { 
 
  next_pic(); 
 
  } 
 
  prev.onclick =  
  function 
  () { 
 
  prev_pic(); 
 
  } 
 
  function 
  next_pic () { 
 
  index++; 
 
  if 
  (index > 4){ 
 
  index = 0; 
 
  } 
 
  showCurrentDot(); 
 
  var 
  newLeft; 
 
  if 
  (wrap.style.left ===  
  "-3600px" 
  ){ 
 
  newLeft = -1200; 
 
  } 
  else 
  { 
 
  newLeft = parseInt(wrap.style.left)-600; 
 
  } 
 
  wrap.style.left = newLeft +  
  "px" 
  ; 
 
  } 
 
  function 
  prev_pic () { 
 
  index--; 
 
  if 
  (index < 0){ 
 
  index = 4; 
 
  } 
 
  showCurrentDot(); 
 
  var 
  newLeft; 
 
  if 
  (wrap.style.left ===  
  "0px" 
  ){ 
 
  newLeft = -2400; 
 
  } 
  else 
  { 
 
  newLeft = parseInt(wrap.style.left)+600; 
 
  } 
 
  wrap.style.left = newLeft +  
  "px" 
  ; 
 
  } 
 
  var 
  timer =  
  null 
  ; 
 
  function 
  autoPlay () { 
 
  timer = setInterval( 
  function 
  () { 
 
  next_pic(); 
 
  },2000); 
 
  } 
 
  autoPlay(); 
 
  var 
  container = document.querySelector( 
  ".container" 
  ); 
 
  container.onmouseenter =  
  function 
  () { 
 
  clearInterval(timer); 
 
  } 
 
  container.onmouseleave =  
  function 
  () { 
 
  autoPlay();   
 
  } 
 
  var 
  index = 0; 
 
  var 
  dots = document.getElementsByTagName( 
  "span" 
  ); 
 
  function 
  showCurrentDot () { 
 
  for 
  ( 
  var 
  i = 0, len = dots.length; i < len; i++){ 
 
  dots[i].className =  
  "" 
  ; 
 
  } 
 
  dots[index].className =  
  "on" 
  ; 
 
  } 
 
  for 
  ( 
  var 
  i = 0, len = dots.length; i < len; i++){ 
 
  ( 
  function 
  (i){ 
 
  dots[i].onclick =  
  function 
  () { 
 
  var 
  dis = index - i; 
 
  if 
  (index == 4 && parseInt(wrap.style.left)!==-3000){ 
 
  dis = dis - 5;    
 
  } 
 
  //和使用prev和next相同，在最开始的照片5和最终的照片1在使用时会出现问题，导致符号和位数的出错，做相应地处理即可 
 
  if 
  (index == 0 && parseInt(wrap.style.left)!== -600){ 
 
  dis = 5 + dis; 
 
  } 
 
  wrap.style.left = (parseInt(wrap.style.left) + dis * 600)+ 
  "px" 
  ; 
 
  index = i; 
 
  showCurrentDot(); 
 
  } 
 
  })(i);       
 
  } 
 
  </script> 
 
  </body> 
 
  </html>