首页
所有分类
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 27 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
基于jQuery的动态表格插件
Mar 28 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
js类式继承与原型式继承详解
Apr 07 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
js常用DOM方法详解
Feb 04 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
从零学习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
vuex(1) InputStream(1) Vue(10) Storage(1) axios(1) HashSet集合(1) Vue3(1) OutputStream(1) Set接口(1) persistedstate(1)
You might like
php轻量级的性能分析工具xhprof的安装使用
2015/08/12 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
匹配任意字符的正则表达式写法
2010/04/29 Javascript
jQuery 联动日历实现代码
2012/05/31 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
javascript实现input file上传图片预览效果
2015/12/31 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
JavaScript对象原型链原理解析
2020/01/22 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
python将文本转换成图片输出的方法
2015/04/28 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
pygame游戏之旅 python和pygame安装教程
2018/11/20 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
利用python实现逐步回归
2020/02/24 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
北美领先的牛仔品牌：Buffalo David Bitton
2017/05/22 全球购物
美国演唱会和体育门票购买网站：Ticketnetwork
2018/10/19 全球购物
网络宣传方案
2014/03/15 职场文书
区域经理岗位职责
2015/02/02 职场文书
深入理解python多线程编程
2021/04/18 Python
Python语言内置数据类型
2022/02/24 Python
MySQL实现字段分割一行转多行的示例代码
2022/07/07 MySQL