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 相关文章推荐
js类中获取外部函数名的方法
Aug 19 Javascript
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
Js 时间函数getYear()的使用问题探讨
Apr 01 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
轻松学习jQuery插件EasyUI EasyUI创建RSS Feed阅读器
Nov 30 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
JavaScript实现的SHA-1加密算法完整实例
Feb 02 Javascript
JS阻止事件冒泡行为和闭包的方法
Jun 16 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
node.js操作MongoDB的实例详解
Oct 11 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 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+mysql数据库实现无限分类的方法
2014/12/12 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
Javascript 面向对象之重载
2010/05/04 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
jquery制作 随机弹跳的小球特效
2015/02/01 Javascript
jQuery操作JSON的CRUD用法实例
2015/02/25 Javascript
javascript设计模式--策略模式之输入验证
2015/11/27 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
2018/08/01 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
three.js如何实现3D动态文字效果
2021/03/03 Javascript
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
python实现感知器
2017/12/19 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
基于数据归一化以及Python实现方式
2018/07/11 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
介绍一下Python下range()函数的用法
2013/11/07 面试题
秋游活动策划方案
2014/02/16 职场文书
市场营销大学生职业规划书
2014/02/25 职场文书
可口可乐广告词
2014/03/20 职场文书
妇女干部培训方案
2014/05/12 职场文书
人事任命通知
2015/04/20 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
使用springboot暴露oracle数据接口的问题
2021/05/07 Oracle
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫
Django数据库(SQlite)基本入门使用教程
2022/07/07 Python