首页
所有分类
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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
axios+Vue实现上传文件显示进度功能
Apr 14 Javascript
基于p5.js 2D图像接口的扩展（交互实现）
Nov 30 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
Qlabel(1) MybatisPlus(2) capture(1) self(1) MapReduce(1) uniapp(4) css3 (2) SpringBoot(22) JSON(10) Normal From(1)
You might like
通过对服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
PHP中nowdoc和heredoc使用需要注意的一点
2014/03/21 PHP
PHP框架性能测试报告
2016/05/08 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
基于JavaScript实现购物车功能
2017/02/07 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
JS实现复制功能
2017/03/01 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
jQuery实现的淡入淡出与滑入滑出效果示例
2018/04/18 jQuery
JavaScript惰性求值的一种实现方法示例
2019/01/11 Javascript
js动态获取时间的方法分析
2019/08/02 Javascript
javascript设计模式之装饰者模式
2020/01/30 Javascript
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
在Django的View中使用asyncio的方法
2019/07/12 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
django前端页面下拉选择框默认值设置方式
2020/08/09 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
adidas官方旗舰店：德国运动用品制造商
2017/11/25 全球购物
爱与责任演讲稿
2014/05/20 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
死亡赔偿协议书
2015/01/28 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
大学升旗仪式主持词
2015/07/04 职场文书