原生js实现简单轮播图


Posted in Javascript onOctober 26, 2020

本文实例为大家分享了js实现简单轮播图的具体代码,供大家参考,具体内容如下

一、写入网页基本结构

body:

网页的最外部设置一个id为wrap的容器,取代body,这样方便我们做一些初始化

css:

初始化:

包括外边距margin、内边距padding、链接a、图片img、输入框input、列表ul、li、网页html、body一系列初始化

css设置:

根据图片数与图片宽度设置轮播图宽度

二、设置js逻辑

需要完成的功能有:

1、鼠标移入轮播图逐渐出现左右浮动块
2、点击浮动块切换图片
3、点击小圆点切换图片
4、切换图片同时切换小圆点
5、自动播放
6、鼠标移入轮播图自动播放停止、移出恢复自动播放

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style type="text/css">
 *{
  margin: 0;
  padding: 0;
 }
 a{
  text-decoration: none;
 }
 ul,li{
  list-style: none;
 }
 img{
  display: block;
 }
 input{
  outline: none;
 }
 html,body{
  height: 100%;
  overflow: hidden;
 }
 .content{
  position: absolute;
  top: 0;
  left: 0;
 }
 .banner{
  width: 600px;
  height: 400px;
  position: relative;
  margin: 50px auto;
  overflow: hidden;
 }
 .banner .bannerList{
  position: absolute;
  left:-600px;
  top: 0;
  width: 4800px;
  height: 100%;
 }
 .banner .bannerList li{
  float: left;
  width: 600px;
  height: 400px;
  
 }
 .banner .bannerList li img{
  height: 100%;
  width: 100%;
 }
 .banner .left,.banner .right{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 50px;
  border: solid 2px gray;
  font-size:30px;
  text-align: center;
  line-height: 50px;
  color: rgb(255, 255, 255);
  opacity: 0;
  transition: 1000ms;
 }
 .banner .left{
  left: 0px;
 }
 .banner .right{
  right: 0px;
 }
 .banner .point{
  position: absolute;
  bottom: 30px;
  left:50%;
  transform: translateX(-50%);
 }
 .banner .point li{
  float: left;
  width: 15px;
  height: 15px;
 border-radius: 50%;
 background-color: gray;
  margin: 5px;
 }
 </style>
 <script type="text/javascript">
 window.onload=function(){
  var bannerLeft=document.querySelector('.banner .left');
  var bannerRight=document.querySelector('.banner .right');
  var banner=document.querySelector('.banner')
  var bannerList=document.querySelector('.banner .bannerList')
  var liList=document.querySelectorAll('.banner .bannerList li')
  var pointList=document.querySelectorAll('.banner .point li')
  var start=-600;


   timer2=setInterval(function(){    //设置定时器,自动播放
   var a=30;
   var index=bannerList.offsetLeft/-600+1;
   if(bannerList.offsetLeft==-4200){
     bannerList.style.left=-600+'px'   //无缝操作
     index=2;
    }
    if(bannerList.offsetLeft==-3600){
     index=1;
    }
   for(var i=0;i<pointList.length;i++){
     pointList[i].style.backgroundColor='grey'
    }
    pointList[index-1].style.backgroundColor='red';
   timer3=setInterval(function(){
    a=a-1
    bannerList.style.left=bannerList.offsetLeft-20+'px';
    
    if(a==0){
     clearInterval(timer3)
    }
   },
    30)
    if(bannerList.offsetLeft==-4200){
     bannerList.style.left=-600+'px';
    } 
  },4000)


  // 创建一个移入出现函数
  banner.addEventListener('mouseover',occur)
  function occur(){
  bannerLeft.style.opacity=1;   //移入逐渐出现
  bannerRight.style.opacity=1;  
  clearInterval(timer2);    //移入取消自动播放
 }
  banner.addEventListener('mouseout',function(){
   bannerLeft.style.opacity=0;
   bannerRight.style.opacity=0;  //移出消失
   timer2=setInterval(function(){   //移出恢复自动播放
   var a=30;
   timer3=setInterval(function(){
    a=a-1
    bannerList.style.left=bannerList.offsetLeft-20+'px';
    
    if(a==0){
     clearInterval(timer3)
    }
   },
    30)
    if(bannerList.offsetLeft==-4200){
     bannerList.style.left=-600+'px';
    }
  },4000)

  })
  //设置左右浮动块点击变色以及滚动
  function colorChange(){
   this.style.color='black';
   if(this.className=='right'){  //判断是哪边被点击
     var index=bannerList.offsetLeft/-600+1;
     var a=30;
     timer=setInterval(function(){  //点击浮动块切换图片
     a=a-1;
     bannerList.style.left=bannerList.offsetLeft-20+'px';
     if(a!=0){
      bannerRight.removeEventListener('mousedown',colorChange)
      bannerLeft.removeEventListener('mousedown',colorChange)
      
     }
     if(a==0){
      clearInterval(timer);
      bannerRight.addEventListener('mousedown',colorChange)
      bannerLeft.addEventListener('mousedown',colorChange)
     }
    },30)
    if(bannerList.offsetLeft==-4200){
     bannerList.style.left=-600+'px'
     index=2;
    }
    if(bannerList.offsetLeft==-3600){
     index=1;
    }
    for(var i=0;i<pointList.length;i++){
     pointList[i].style.backgroundColor='grey'
    }
    pointList[index-1].style.backgroundColor='red';
   }
   else{
     var a=30;
     var index=bannerList.offsetLeft/-600-1;
     timer=setInterval(function(){
     a=a-1;
     bannerList.style.left=bannerList.offsetLeft+20+'px';
     if(a!=0){
      bannerLeft.removeEventListener('mousedown',colorChange)
      bannerRight.removeEventListener('mousedown',colorChange)
     }
     if(a==0){
      clearInterval(timer);
      bannerLeft.addEventListener('mousedown',colorChange)
      bannerRight.addEventListener('mousedown',colorChange)
     }
    },30)
    if(bannerList.offsetLeft==0){
     bannerList.style.left=-3600+'px'
     index=5;
    }
    if(bannerList.offsetLeft==-600){
     index=6;
    }
    for(var i=0;i<pointList.length;i++){
     pointList[i].style.backgroundColor='grey'
    }
    pointList[index-1].style.backgroundColor='red';
   }
  }
  function colorReturn(){
   this.style.color='white'
  }
  bannerLeft.addEventListener('mousedown',colorChange)
  bannerRight.addEventListener('mousedown',colorChange)
  bannerLeft.addEventListener('mouseup',colorReturn)
  bannerRight.addEventListener('mouseup',colorReturn)
  for(var i=0;i<pointList.length;i++){
   pointList[i].onmousedown=function(){
    for(var i=0;i<pointList.length;i++){
     pointList[i].style.backgroundColor='gray'
    }
    this.style.backgroundColor='red';
    for(var b=0;b<pointList.length;b++){
     if(pointList[b].style.backgroundColor==this.style.backgroundColor){
      var a=30;
      var step=-(b+1)*600-bannerList.offsetLeft;
      timer1=setInterval(function(){
      a=a-1;
      bannerList.style.left=bannerList.offsetLeft+step/30+'px';
      if(a!=0){
      bannerLeft.removeEventListener('mousedown',colorChange)
      bannerRight.removeEventListener('mousedown',colorChange)

     }
      if(a==0){
       clearInterval(timer1)
       bannerLeft.addEventListener('mousedown',colorChange)
       bannerRight.addEventListener('mousedown',colorChange)
      }
      },20)
     }
    }
   }
  }
  
 }
 </script>
</head>
<body>
 <div id="wrap">
  <!-- 写出轮播图框架 -->
  <div class="banner">
   <ul class="bannerList">
    <li>
     <img src="./img/james6.jpeg">
    </li>
    <li>
     <img src="./img/james1.jpg">
    </li>
    <li>
     <img src="./img/james2.jpg">
    </li>
    <li>
     <img src="./img/james3.jpg">
    </li>
    <li>
     <img src="./img/james4.jpg">
    </li>
    <li>
     <img src="./img/james5.jpeg">
    </li>
    <li>
     <img src="./img/james6.jpeg">
    </li>
    <li>
     <img src="./img/james1.jpg">
    </li>
   </ul>
    <!-- 左右两个箭头 -->
    <span class="left"> < </span>
   <span class="right"> > </span>
    <!-- 添加小圆点 -->
    <ul class="point">
     <li style="background-color: red;"></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
     <li></li>
    </ul>
  </div>
 </div>
 
</body>
</html>

其中,将图片替换为其他图片可以实现不同的轮播图,值得一提的是,六张图片的轮播图需要放八张图,第八张与第二张一致,第一张与第七张一致,真正呈现出来的仅仅是第二张到第七张

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
jQuery使用之设置元素样式用法实例
Jan 19 Javascript
JavaScript中join()方法的使用简介
Jun 09 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
jQuery实现的网页换肤效果示例
Sep 20 Javascript
JQuery中解决重复动画的方法
Oct 17 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
利用Javascript获取选择文本所在的句子详解
Dec 03 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 #Javascript
Vue检测屏幕变化来改变不同的charts样式实例
Oct 26 #Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 #Javascript
vue下载二进制流图片操作
Oct 26 #Javascript
JavaScript如何操作css
Oct 24 #Javascript
javascript实现多边形碰撞检测
Oct 24 #Javascript
解决vue scoped html样式无效的问题
Oct 24 #Javascript
You might like
PHP Mysqli 常用代码集合
2016/11/12 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
JavaScript中的闭包(Closure)详细介绍
2014/12/30 Javascript
jquery div模态窗口的简单实例
2016/05/28 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
微信小程序 template模板详解及实例代码
2017/03/09 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
angular ng-model 无法获取值的处理方法
2018/10/02 Javascript
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
基于Vue sessionStorage实现保留搜索框搜索内容
2020/06/01 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
[04:00]DOTA2解说界神雕侠侣 CJ第四天谷子现场过生日
2013/07/30 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
python多重继承新算法C3介绍
2014/09/28 Python
python进行两个表格对比的方法
2018/06/27 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
解决Python命令行下退格,删除,方向键乱码(亲测有效)
2020/01/16 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
应届生幼儿园求职信
2013/11/12 职场文书
总经理办公室主任岗位职责
2013/11/12 职场文书
入学生会自荐书范文
2014/02/05 职场文书
施工质量承诺书范文
2014/05/30 职场文书
教师演讲稿开场白
2014/08/25 职场文书
银行授权委托书范本
2014/10/04 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
武侯祠导游词
2015/02/04 职场文书
被告答辩状范文
2015/05/22 职场文书