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 学习笔记(十一)
Jan 19 Javascript
利用location.hash实现跨域iframe自适应
May 04 Javascript
Jquery为单选框checkbox绑定单击click事件
Dec 18 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
BootStrap和jQuery相结合实现可编辑表格
Apr 21 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
js实现简单的手风琴效果
Feb 27 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
javascript实现放大镜功能
Dec 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执行sql语句的写法
2009/03/10 PHP
php 静态变量与自定义常量的使用方法
2010/01/26 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Javascript模块化编程(一)模块的写法最佳实践
2013/01/17 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
JavaScript中的onerror事件概述及使用
2013/04/01 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解
2015/12/14 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
微信小程序加载更多 点击查看更多
2016/11/29 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
详解webpack运行Babel教程
2018/06/13 Javascript
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
js找出5个数中最大的一个数和倒数第二大的数实现方法示例小结
2020/03/04 Javascript
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
从零学Python之入门(四)运算
2014/05/27 Python
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
python 格式化输出百分号的方法
2019/01/20 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
简单了解python列表和元组的区别
2020/05/14 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
HTC VIVE美国官网:VR虚拟现实眼镜
2018/02/13 全球购物
Book Depository亚太地区:一家领先的国际图书零售商
2019/05/05 全球购物
我的大学生活职业生涯规划
2014/01/02 职场文书
警示教育活动总结
2014/05/05 职场文书
纺织工程专业推荐信
2014/09/08 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
Redis特殊数据类型bitmap位图
2022/06/01 Redis