JavaScript实现轮播图片完整代码


Posted in Javascript onMarch 07, 2020

本文实例为大家分享了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图片轮播

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个简单的JavaScript 日期计算算法
Sep 11 Javascript
jquery基础教程之deferred对象使用方法
Jan 22 Javascript
jQuery中;function($,undefined) 前面的分号的用处
Dec 17 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
JavaScript数组方法大全(推荐)
Jul 05 Javascript
利用nvm管理多个版本的node.js与npm详解
Nov 02 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
jQuery中$原理实例分析
Aug 13 jQuery
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
JS实现瀑布流效果
Mar 07 #Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 #Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 #Javascript
node创建Vue项目步骤详解
Mar 06 #Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 #Javascript
小程序跳转H5页面的方法步骤
Mar 06 #Javascript
js实现点赞按钮功能的实例代码
Mar 06 #Javascript
You might like
学习使用PHP数组
2006/10/09 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
js中判断数字\字母\中文的正则表达式 (实例)
2012/06/29 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
Javascript数组与字典用法分析
2014/12/13 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
js实现下拉列表选中某个值的方法(3种方法)
2015/12/17 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
js数据类型检测总结
2018/08/05 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
Vuejs2 + Webpack框架里,模拟下载的实例讲解
2018/09/05 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
vue-video-player 断点续播的实现
2021/02/01 Vue.js
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
详解Python中的变量及其命名和打印
2016/03/11 Python
Python FTP文件定时自动下载实现过程解析
2019/11/12 Python
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
买房委托公证书
2014/04/08 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
全运会口号
2014/06/20 职场文书
中学生纪念九一八事变演讲稿
2014/09/14 职场文书
党员批评与自我批评范文
2014/09/23 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
Linux磁盘管理方法介绍
2022/06/01 Servers