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函数、方法、对象代码
Oct 29 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
Mar 26 Javascript
JQuery中层次选择器用法实例详解
May 18 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 Javascript
微信小程序实现文件预览
Oct 22 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
山进SANGEAN ATS-909X电路分析
2021/03/02 无线电
PHP 开发工具
2006/12/06 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP编码规范之注释和文件结构说明
2010/07/09 PHP
通达OA公共代码 php常用检测函数
2011/12/14 PHP
php实现过滤表单提交中html标签的方法
2014/10/17 PHP
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
深入理解JS实现快速排序和去重
2016/10/17 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python通过wxPython打开一个音频文件并播放的方法
2015/03/25 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
Python实现个人微信号自动监控告警的示例
2019/07/03 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
大学毕业生通用自荐信范文
2013/10/31 职场文书
年会活动策划方案
2014/01/23 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
简单实现一个手持弹幕功能+文字抖动特效
2021/03/31 HTML / CSS