首页
所有分类
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 相关文章推荐
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
详解Vue2.X的路由管理记录之 钩子函数（切割流水线）
May 02 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
js实现鼠标滑动到某个div禁止滚动
Sep 17 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
默认端口(3) lamp(1) 压力测试(1) URL重定向(3) shell(3) 跨域(4) 前后端分离(1) SSL(3) 二级域名(1) 443(1)
You might like
php侧拉菜单 漂亮，可以向右或者向左展开，支持FF，IE
2009/10/15 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
ThinkPHP中使用ajax接收json数据的方法
2014/12/18 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
PHP常用工具函数小结【移除XSS攻击、UTF8与GBK编码转换等】
2019/04/27 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
详解JavaScript中基于原型prototype的继承特性
2016/05/05 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
小程序实现多选框功能
2018/10/30 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
JavaScript进阶（二）词法作用域与作用域链实例分析
2020/05/09 Javascript
js实现轮播图特效
2020/05/28 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
[05:43]VG.R战队教练Mikasa专访：为目标从未停止战斗
2016/08/02 DOTA
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
Python中格式化format()方法详解
2017/04/01 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
python中 * 的用法详解
2019/07/10 Python
Python 面向对象部分知识点小结
2020/03/09 Python
如何打包Python Web项目实现免安装一键启动的方法
2020/05/21 Python
Carolina工作鞋官网：Carolina Footwear
2019/03/14 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
服装设计专业毕业生推荐信
2013/11/09 职场文书
中层干部岗位职责
2013/12/18 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
尊师重教演讲稿
2014/09/04 职场文书
团结友爱主题班会
2015/08/13 职场文书
五一放假通知怎么写
2015/08/18 职场文书
详解php中流行的rpc框架
2021/05/29 PHP
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL