JavaScript实现轮播图特效

拓拔弘扬

2023-03-14

本文向大家介绍JavaScript实现轮播图特效，包括了JavaScript实现轮播图特效的使用技巧和注意事项，需要的朋友参考一下

本文实例为大家分享了JavaScript实现轮播图特效的具体代码，供大家参考，具体内容如下

功能：

1、图片会自动播放，鼠标放上面会暂停播放

2、点击左右出现的箭头可以切换到上一张/下一张图片

3、点击序号会跳转到对应图片

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <title>当当网首页轮播图-By小黑</title>
 <style>
  *{
  padding: 0;
  margin: 0;
  list-style: none;
  }
  #wrap{
  margin: 50px auto;
  width: 800px;
  height: 330px;
  overflow: hidden;
  position: relative;
  }
  #list{
  position: absolute;
  bottom: 15px;
  right: 250px;
  }
  #list li{
  float: left;
  margin-right: 15px;
  cursor: pointer;
  width: 23px;
  height: 23px;
  line-height: 23px;
  text-align: center;
  background: #ADA79D;
  color: #FFF ;
  border-radius: 50%;
  }
  #list .on{
  background: red;
  }
  #bar_left,#bar_right{
  width: 33px;
  height: 80px;
  line-height: 80px;
  position: absolute;
  top: 130px;
  background: rgba(0, 0, 0, 0.3);
  }
  #bar_left{
  left: -33px;
  }
  #bar_right{
  right: -35px;
  }
  /*下面利用伪元素实现左侧和右侧的小箭头*/
  #bar_left:after,#bar_left:before,#bar_right:before,#bar_right:after{
  content: "";
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  position: absolute;
  top: 25px;
  }
  /*左边箭头*/
  #bar_left:before{
  border-left: 15px solid transparent;
  border-right: 15px solid #FFF;
  right: 10px;
  }
  #bar_left:after{
  border-left: 15px solid transparent;
  border-right: 15px solid rgba(0, 0, 0, 0.3);
  right: 7px;
  }
  /*右边箭头*/
  #bar_right:before{
  border-right: 15px solid transparent;
  border-left: 15px solid #FFF;
  left: 10px;
  }
  #bar_right:after{
  border-right: 15px solid transparent;
  border-left: 15px solid rgba(0, 0, 0, 0.3);
  left: 7px;
  }
  #wrap:hover #bar_left{
  left: 0;
  cursor: pointer;
  transition: left 0.5s;
  }
  #wrap:hover #bar_right{
  /* display: block; */
  right: 5px;
  cursor: pointer;
  transition: right 0.5s;
  }
  .tex{
  margin: 20px auto;
  width: 400px;
  }
  .tex ul li{
  list-style-type:circle;
  color: red;
  font-weight: bold;
  margin-bottom: 5px;
  }
 </style>
</head>
 
<body>
 <div id="wrap">
 <ul id="pic">
  <li><img src="images/dang1.jpg" alt=""></li>
  <li><img src="images/dang2.jpg" alt=""></li>
  <li><img src="images/dang3.jpg" alt=""></li>
  <li><img src="images/dang4.jpg" alt=""></li>
  <li><img src="images/dang5.jpg" alt=""></li>
  <li><img src="images/dang6.jpg" alt=""></li>
  <li><img src="images/dang7.jpg" alt=""></li>
  <li><img src="images/dang8.jpg" alt=""></li>
 </ul>
 <div id="bar_left"></div>
 <div id="bar_right"></div>
 <ol id="list">
  <li class="on">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
 </ol>
 </div>
 <div class="tex">
 <ul>
  <li>功能如下：</li>
  <li>图片会自动播放，鼠标放上面会暂停播放</li>
  <li>点击左右出现的箭头可以切换到上一张/下一张图片</li>
  <li>点击序号会跳转到对应图片</li>
 </ul>
 </div>
 <script>
 var wrap=document.getElementById('wrap');
 var pics=document.getElementById('pic');
 var lists=document.getElementById('list').getElementsByTagName('li');
 var point_l=document.getElementById('bar_left');
 var point_r=document.getElementById('bar_right');
 var index=0;
 var counter=null;
 function change(){//计时器
  counter=setInterval(function(){
  index++;
  if(index===lists.length){
   index=0;
  }
  img(index);
  },2000)
 }
 change();
 function img(curIndex){//切换图片
  for (var i=0;i<lists.length;i++){
  if(curIndex===i){
   lists[i].className='on';
  }
  else{
   lists[i].className='';
  }
  }
  index=curIndex;
  pics.style.marginTop=-330*curIndex+'px';//图片上移
  wrap.οnmοuseοver=function(){//鼠标放到图片上时图片停止播放
  pics.style.cursor="pointer";
  clearInterval(counter);//清除计时器
  }
  pics.οnmοuseοut=change;
 }
 //鼠标放到指定序号切换到指定图片
 for (var i=0;i<lists.length;i++){
  lists[i].id=i;
  lists[i].οnmοuseοver=function(){
  img(this.id);
  this.className='on';
  }
 }
 //当鼠标放在箭头上时，点击箭头切换到下一张图片
 point_l.οnmοusedοwn=function(){//点击左边箭头
  if(index<=0){
   index=lists.length;
  }
  img(index-1);
 }
 point_r.οnmοusedοwn=function(){//点击右边箭头
  if (index>=lists.length-1){
  index=-1;
  }
  img(index+1);
 }
 </script>
</body>
 
</html>

效果图

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

JavaScript实现轮播图特效

相关阅读

相关文章

相关问答

相关工具

相关文档