JavaScript实现轮播图片完整代码

更新时间：2020年03月07日 10:07:30 作者：最爱松露巧克力

这篇文章主要为大家介绍了JavaScript实现轮播图片的完整代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现轮播图片的具体代码，供大家参考，具体内容如下

JS代码注释清晰明了，一看就懂！

<!DOCTYPE html>
<html lang="en">

 <head>
 <meta charset="UTF-8">
 <title>最简单的轮播效果</title>
 <style>
 * {
 margin: 0;
 padding: 0
 }
 
 .box {
 width: 500px;
 height: 300px;
 border: 1px solid #ccc;
 margin: 100px auto;
 padding: 5px;
 }
 
 .inner {
 width: 500px;
 height: 300px;
 position: relative;
 overflow: hidden;
 }
 
 .inner img {
 width: 500px;
 height: 300px;
 vertical-align: top
 }
 
 ul {
 width: 1000%;
 position: absolute;
 list-style: none;
 left: 0;
 top: 0;
 }
 
 .inner li {
 float: left;
 }
 
 ol {
 position: absolute;
 height: 20px;
 right: 20px;
 bottom: 20px;
 text-align: center;
 padding: 5px;
 }
 
 ol li {
 display: inline-block;
 width: 20px;
 height: 20px;
 line-height: 20px;
 background-color: #fff;
 margin: 5px;
 cursor: pointer;
 }
 
 ol .current {
 background-color: red;
 }
 </style>
 </head>

 <body>
 <div class="box" id="box">
 <div class="inner">
 <!--轮播图-->
 <ul>
  <li>
  <div><img src="img/001.png" alt=""></div>
  </li>
  <li>
  <div><img src="img/1.png" alt=""></div>
  </li>
  <li>
  <div><img src="img/6.png" alt=""></div>
  </li>
  <li>
  <div><img src="img/3.png" alt=""></div>
  </li>
  <li>
  <div><img src="img/4.png" alt=""></div>
  </li>

 </ul>
 </div>
 </div>
 <script>
 /**
 *
 * @param id 传入元素的id
 * @returns {HTMLElement | null} 返回标签对象，方便获取元素
 */
 function my$(id) {
 return document.getElementById(id);
 }
 //获取各元素，方便操作
 var box = my$("box");
 var inner = box.children[0];
 var ulObj = inner.children[0];
 var list = ulObj.children;
 var olObj = inner.children[1];
 var imgWidth = inner.offsetWidth;
 var right = my$("right");
 var pic = 0;
 //根据li个数，创建小按钮
 for(var i = 0; i < list.length; i++) {
 var liObj = document.createElement("li");
 //olObj.appendChild(liObj);
 liObj.innerText = (i + 1);
 liObj.setAttribute("index", i);
 //为按钮注册mouseover事件
 liObj.onmouseover = function() {
  //先清除所有按钮的样式
  for(var j = 0; j < olObj.children.length; j++) {
  olObj.children[j].removeAttribute("class");
  }
  this.className = "current";
  pic = this.getAttribute("index");
  animate(ulObj, -pic * imgWidth);
 }
 }
 //设置ol中第一个li有背景颜色
 //olObj.children[0].className = "current";
 //克隆一个ul中第一个li,加入到ul中的最后=====克隆
 ulObj.appendChild(ulObj.children[0].cloneNode(true));
 var timeId = setInterval(onmouseclickHandle, 4000);
 function onmouseclickHandle() {
 //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
 //所以,如果用户再次点击按钮,用户应该看到第二个图片
 if(pic == list.length - 1) {
  //如何从第6个图,跳转到第一个图
  pic = 0; //先设置pic=0
  ulObj.style.left = 0 + "px"; //把ul的位置还原成开始的默认位置
 }
 pic++; //立刻设置pic加1,那么此时用户就会看到第二个图片了
 animate(ulObj, -pic * imgWidth); //pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
 
 }
 //设置任意的一个元素,移动到指定的目标位置
 function animate(element, target) {
 clearInterval(element.timeId);
 //定时器的id值存储到对象的一个属性中
 element.timeId = setInterval(function() {
  //获取元素的当前的位置,数字类型
  var current = element.offsetLeft;
  //每次移动的距离
  var step = 10;
  step = current < target ? step : -step;
  //当前移动到位置
  current += step;
  if(Math.abs(current - target) > Math.abs(step)) {
  element.style.left = current + "px";
  } else {
  //清理定时器
  clearInterval(element.timeId);
  //直接到达目标
  element.style.left = target + "px";
  }
 }, 10);
 }
 </script>
 </body>

</html>

精彩专题分享：jQuery图片轮播 JavaScript图片轮播

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

您可能感兴趣的文章:

js 去除字符串第一位逗号的方法
这篇文章主要介绍了js 去除字符串第一位逗号的方法,需要的朋友可以参考下
2014-06-06
JavaScript页面回流与重绘
这篇文章主要介绍了JavaScript页面回流与重绘,一个html页面是一个整体，当这个整体中的某一个部分发生改变，那么这个页面整体会重新进行渲染，而如果我们采用添加标签的方式，每次添加一个标签，就会让每一次页面都重新渲染，性能急剧下降,下面来看看具体内容吧
2022-01-01
js常用排序实现代码
js常用排序，整理了，常用的数组互换。
2010-12-12
js对象合并与数组合并综合应用举例
这篇文章主要给大家介绍了关于js对象合并与数组合并综合应用举例的相关资料,本文将介绍常见的JS对象合并和数组合并方法,帮助读者更好地理解和运用这些方法,需要的朋友可以参考下
2023-11-11
js判断手机是否安装并打开app，未安装则安装app【兼容Android、ios,亲测可用】
这篇文章主要介绍了js判断手机是否安装并打开app,未安装则安装app,通过调用浏览器判断app,兼容Android、ios等系统,,需要的朋友可以参考下
2023-05-05
JavaScript中重名的函数与对象示例详析
最近同事问了一个问题，说在js中如果函数与对象重名了会怎么样？仔细详细这个问题值得讨论一下，所以便有了这篇文章，这篇文章主要给大家介绍了关于JavaScript中重名的函数与对象的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧啊。
2017-09-09
Bootstrap实现带暂停功能的轮播组件(推荐)
最近小编在项目中用到了一款带轮播组件，功能非常齐全，可以设置各种标题样式、动画效果、轮播时间、开始暂停等功能，下面小编通过本文给大家详细介绍下实现过程，需要的朋友参考下吧
2016-11-11
你可能不知道的JavaScript之this指向详解
理解this之前,先纠正一个观点,this 既不指向函数自身,也不指函数的词法作用域,下面这篇文章主要给大家介绍了关于JavaScript之this指向的相关资料,需要的朋友可以参考下
2022-05-05
uni-app配置APP自定义顶部标题栏设置方法与注意事项
相信很多小伙伴在使用uniapp进行多端开发的时候,在面对一些业务需求的时候,uniapp给我们提供的默认导航栏已经不能满足我们的业务需求了,这篇文章主要给大家介绍了关于uni-app配置APP自定义顶部标题栏设置方法与注意事项的相关资料,需要的朋友可以参考下
2022-07-07
layui实现登陆界面验证码
这篇文章主要为大家详细介绍了layui实现登陆界面验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11