首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生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图片轮播

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

原生js实现简单轮播图

- Author -

l1621834733

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery 工具函数学习资料
Apr 29 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
js动态给table添加/删除tr的方法
Aug 02 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
基于jquery animate操作css样式属性小结
Nov 27 Javascript
理解js回收机制通俗易懂版
Feb 29 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
一句jQuery代码实现返回顶部效果（简单实用）
Dec 28 Javascript
整理关于Bootstrap排版的慕课笔记
Mar 29 Javascript
微信小程序从注册账号到上架（图文详解）
Jul 17 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 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
cudnn(1) callback(1) swing(1) 热力图(1) RTX 3050 ti(1) OpenFeign(1) Git(3) 字符画(1) webpack(1) cudn(1)
You might like
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
JSON字符串转换JSONObject和JSONArray的方法
2016/06/03 Javascript
jQuery实现的简单拖拽功能示例
2016/09/13 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
layui switch 开关监听 弹出确定状态转换的例子
2019/09/21 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
Python函数式编程指南（二）：从函数开始
2015/06/24 Python
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
Python标准库之itertools库的使用方法
2017/09/07 Python
python购物车程序简单代码
2018/04/18 Python
Python中循环引用（import）失败的解决方法
2018/04/22 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
python可以用哪些数据库
2020/06/22 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
新加坡最佳婴儿用品店：Mamahood.com.sg
2018/08/26 全球购物
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
社区网格化管理实施方案
2014/03/21 职场文书
基层党员公开承诺书
2014/05/29 职场文书
二人合伙经营协议书
2014/09/13 职场文书
工人先锋号申报材料
2014/12/29 职场文书
2015中秋节慰问信范文
2015/03/23 职场文书
《失物招领》教学反思
2016/02/20 职场文书
2019奶茶店创业计划书范本！
2019/07/15 职场文书