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

使用原生的javascript来实现轮播图

Posted in Javascript onFebruary 24, 2017

下面看下js轮播图的实现代码，具体代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      list-style: none;
      border: 0;
    }
    .all {
      width: 500px;
      height: 200px;
      padding: 7px;
      border: 1px solid #ccc;
      margin: 100px auto;
      position: relative;
    }
    .screen {
      width: 500px;
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    .screen li {
      width: 500px;
      height: 200px;
      overflow: hidden;
      float: left;
    }
    .screen ul {
      position: absolute;
      left: 0;
      top: 0px;
      width: 3000px;
    }
    .all ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
      line-height: 20px;
      text-align: center;
    }
    .all ol li {
      float: left;
      width: 20px;
      height: 20px;
      background: #fff;
      border: 1px solid #ccc;
      margin-left: 10px;
      cursor: pointer;
    }
    .all ol li.current {
      background: yellow;
    }
    #arr {
      display: none;
    }
    #arr span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }
    #arr #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div class="all" id='box'>
  <div class="screen">
    <ul>
      <li><img src="images/1.jpg" width="500" height="200"/></li>
      <li><img src="images/2.jpg" width="500" height="200"/></li>
      <li><img src="images/3.jpg" width="500" height="200"/></li>
      <li><img src="images/4.jpg" width="500" height="200"/></li>
      <li><img src="images/5.jpg" width="500" height="200"/></li>
    </ul>
    <ol>
    </ol>
  </div>
  <div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
<script>
  function $(element) {
    return document.getElementById(element);
  }
  var box = $("box");
  var screen = box.children[0];
  var ul = screen.children[0];
  var ulLis = ul.children;
  var ol = screen.children[1];
  var arr = $("arr");
  var left = $("left");
  var right = $("right");
  //动态创建小图标
  for (var i = 0; i < ulLis.length; i++) {
    var li = document.createElement("li");
    li.innerHTML = i + 1;
    ol.appendChild(li);
  }
  //设置这些个小图标
  var olLis = ol.children;
  var imgWidth = screen.offsetWidth;
  for (var j = 0; j < olLis.length; j++) {
    olLis[j].index = j;
    olLis[j].onmouseover = function () {
      //排他思想
      for (var i = 0; i < olLis.length; i++) {
        olLis[i].className = "";
      }
      this.className = "current";
      var target = -imgWidth * this.index;
      cutton(ul, target, 20);
      //为了让点击事件和小面的小图标能够一一对应，设置他们的索引值相同
      pic = square = this.index;
    }
  }
  //给小图标设置一个初始样式
  ol.children[0].className = "current";
  //给ul追加一张图
  ul.appendChild(ul.children[0].cloneNode(true));
  //设置箭头的显示与隐藏
  box.onmouseover = function () {
    arr.style.display = "block";
    //鼠标放上去的时候，不再自动滚动
    clearInterval(timer);
  }
  box.onmouseout = function () {
    arr.style.display = "none";
    //鼠标离开的时候，继续自动滚动
    timer = setInterval(playNext, 1000);
  }
  //设置点击左右小箭头的事件且要求小图标要跟着变化
  //1.设置点击右侧箭头
  var pic = 0;//记录当前为第几项用
  var square = 0;//记录小图标的索引值
  /* right.onclick = function () {//存在的问题是当移动到最后一张的时候，无法跳转到第一张
   pic++;
   var target = -pic * imgWidth;
   cutton(ul, target, 20);
   }*/
  //方法改进
  /*right.onclick = function () {
   //先对pic做一个判断，当pic的值为5的时候，实现一个跳转
   if (pic == ulLis.length - 1) {
   ul.style.left = 0;
   pic = 0;
   }
   pic++;
   var target = -pic * imgWidth;
   cutton(ul, target, 20);
   if (square == olLis.length - 1) {
   square = -1;//下面会加一，就变成了0
   }
   square++;
   //排他思想
   for (var i = 0; i < olLis.length; i++) {
   olLis[i].className = "";
   }
   olLis[square].className = "current";
   }*/
  //使用封装函数
  right.onclick = function () {
    playNext();
  }
  //2.设置点击左侧箭头
  left.onclick = function () {//要判断一下当pic为零时的情况
    if (pic == 0) {
      ul.style.left = -imgWidth * (ulLis.length - 1) + "px";//要记得加单位
      pic = ulLis.length - 1;//给pic重新赋一个值
    }
    pic--;
    var target = -pic * imgWidth;
    cutton(ul, target, 20);
    //设置小图标样式
    if (square == 0) {
      square = olLis.length;
    }
    square--;
    for (var i = 0; i < olLis.length; i++) {
      olLis[i].className = "";
    }
    olLis[square].className = "current";
  }
  //设置自动滚动
  //1.封装点击右侧小箭头事件
  function playNext() {
    //先对pic做一个判断，当pic的值为5的时候，实现一个跳转
    if (pic == ulLis.length - 1) {
      ul.style.left = 0;
      pic = 0;
    }
    pic++;
    var target = -pic * imgWidth;
    cutton(ul, target, 20);
    if (square == olLis.length - 1) {
      square = -1;//下面会加一，就变成了0
    }
    square++;
    //排他思想
    for (var i = 0; i < olLis.length; i++) {
      olLis[i].className = "";
    }
    olLis[square].className = "current";
  }
  //2.调用这个封装的函数，并且设置一个间歇性计时器
  var timer = null;
  timer = setInterval(playNext, 1000);
  //封装函数
  function cutton(obj, target, stp) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
      var step = stp;
      step = obj.offsetLeft > target ? -step : step;
      if (Math.abs(obj.offsetLeft - target) >= Math.abs(step)) {
        obj.style.left = obj.offsetLeft + step + "px";
      } else {
        obj.style.left = target + "px";
        clearInterval(obj.timer);
      }
    }, 15)
  }
</script>
</body>
</html>

补充：原生javascript实现banner图自动轮播切换

一般在做banner轮播图的时候都是用jquery，因为代码少，方便，不需要花费很长的时间去获取某个元素作为变量，然后再进行操作，只要一个$就搞定了。但是今天我用原生的javascript做了一下这个轮播效果，感觉还行，以下是部分js源代码，仅供参考！文章底部查看效果演示。

1、鼠标离开banner图，每隔2s切换一次；

2、鼠标滑过下方的小按钮，可以切换图片；

3、鼠标点击左右按钮，可以切换图片。

var oPic,oLi,anniu,aLi,aLength,num,timer,oG,_index,oSpan;
window.onload = function(){
  oPic = document.getElementsByClassName("pic")[0];
  oLi = oPic.getElementsByTagName("li");
  anniu = document.getElementsByClassName("anniu")[0];
  aLi = anniu.getElementsByTagName("li");
  aLength = aLi.length;
  num = 0;
  oG = document.getElementsByClassName("g")[0];
  oSpan = oG.getElementsByTagName("span");
  oLeft = oSpan[0];
  oRight = oSpan[1];
  start();
  oG.onmouseover = end;
  oG.onmouseout = start;
  for(var j=0; j<aLength; j++){
    aLi[j].index = j;
    aLi[j].onmouseover = change;
  }
  oRight.onclick = time;
  oLeft.onclick = times;
}
//自动轮播开始或结束
function start(){
    timer = setInterval(time,2000);
    hide();
}
function end(){
  clearInterval(timer);
  show();
}
//图片切换++
function time(){
  for(var i=0; i<aLength; i++){
    oLi[i].style.display = "none";
    aLi[i].className = "";
  }
  num++;
  num = num % 4;
  oLi[num].style.display = "block";
  aLi[num].className = "on";
}
//图片切换--
function times(){
  for(var i=0; i<aLength; i++){
    oLi[i].style.display = "none";
    aLi[i].className = "";
  }
  num--;
  num = (num+4)%4;
  oLi[num].style.display = "block";
  aLi[num].className = "on";
}
//鼠标滑过按钮，图片轮播
function change(){
  _index = this.index;
  for(var k=0; k<aLength; k++){
    aLi[k].className = "";
    oLi[k].style.display = "none";
  }
  aLi[_index].className = "on";
  oLi[_index].style.display = "block";
}
//左右按钮显示或隐藏
function show(){
  oSpan[0].style.display = "block";
  oSpan[1].style.display = "block";
}
function hide(){
  oSpan[0].style.display = "none";
  oSpan[1].style.display = "none";
}

以上所述是小编给大家介绍的使用原生的javascript来实现轮播图，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

使用原生的javascript来实现轮播图

- Author -

mrr

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

Javascript 相关文章推荐
写js时遇到的一些小问题
Dec 06 Javascript
jquery each()源代码
Feb 14 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
DWR中各种java方法的调用
May 04 Javascript
javascript读取文本节点方法小结
Dec 15 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
layui前端框架之table表数据的刷新方法
Aug 17 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
Vue 组件注册全解析
Dec 17 Vue.js
从零学习node.js之mysql数据库的操作（五）
Feb 24 #Javascript
微信小程序 定位到当前城市实现实例代码
Feb 23 #Javascript
JavaScript中值类型和引用类型的区别
Feb 23 #Javascript
canvas绘制环形进度条
Feb 23 #Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 #Javascript
js实现文字跑马灯效果
Feb 23 #Javascript
微信小程序 出现错误：{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 #Javascript
SpringBoot(22) self(1) uniapp(4) MybatisPlus(2) JSON(10) Qlabel(1) MapReduce(1) Normal From(1) capture(1) css3 (2)
You might like
php include类文件超时问题处理
2015/02/06 PHP
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
jquery中append()与appendto()用法分析
2014/11/14 Javascript
JavaScript中创建字典对象（dictionary）实例
2015/03/31 Javascript
JavaScript编码风格指南(中文版)
2016/08/26 Javascript
搭建vue开发环境
2018/07/19 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
vue设置动态请求地址的例子
2019/11/01 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
Python 抓取动态网页内容方案详解
2014/12/25 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
django利用request id便于定位及给日志加上request_id
2018/08/26 Python
详解python-图像处理（映射变换）
2019/03/22 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
关于pytorch处理类别不平衡的问题
2019/12/31 Python
python实现scrapy爬虫每天定时抓取数据的示例代码
2021/01/27 Python
Java如何格式化日期
2012/08/07 面试题
正规的求职信范文分享
2013/12/11 职场文书
文科生自我鉴定
2014/02/15 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
音乐节策划方案
2014/06/09 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
离婚协议书范本2014
2014/10/27 职场文书
2015年班干部工作总结
2015/04/29 职场文书
2016年安全生产先进个人事迹材料
2016/02/29 职场文书
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL