js实现图片轮播效果学习笔记


Posted in Javascript onJuly 26, 2017

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

具体思路:

一、页面加载、获取整个容器、所有放数字索引的li及放图片列表的ul、定义放定时器的变量、存放当前索引的变量index

二、添加定时器,每隔2秒钟index递增一次、调用一次切换图片函数

提示:

1、 index不能一直无限制的递增下去,需做判断
2、调用切换图片函数时需将递增之后的index作为参数传过去

三、定义图片切换函数

提示:

  1.遍历所有放数字索引的li,将每个li上的类去掉。
  2.根据传递过来的index值找到对应的li给它添加类设为当前高亮显示。
  3. 根据传递过来的index值计算放图片的ul的top值
  4. 改变index的值,让其等于传递过来的参数值

注意:放图片的ul的top值=-index*单张图片的高度(所有图片必须等高)

四、鼠标划过整个容器时,图片停止切换,离开继续

提示:

1.  鼠标滑过整个容器时清除定时器
2.  鼠标离开时继续执行定时器,切换至下一张图片

五、遍历所有放数字的li,且给他们添加索引、鼠标滑过时切换至对应的图片。

鼠标滑过时调用图片切换函数,将滑过的li的索引传过去。

具体代码如下:

<!doctype html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>Document</title> 
 <style> 
 *{margin:0; 
 padding:0; 
 list-style:none;} 
 .wrap{height:170px; 
 width:490px; 
 margin:60px auto; 
 overflow: hidden; 
 position: relative; 
 margin:100px auto;} 
 .wrap ul{position:absolute;}  
 .wrap ul li{height:170px;} 
 .wrap ol{position:absolute; 
 right:5px; 
 bottom:10px;} 
 .wrap ol li{height:20px; width: 20px; 
 background:#ccc; 
 border:solid 1px #666; 
 margin-left:5px; 
 color:#000; 
 float:left; 
 line-height:center; 
 text-align:center; 
 cursor:pointer;} 
 .wrap ol .on{background:#E97305; 
 color:#fff;} 
  
 </style> 
 <script type="text/javascript"> 
 window.onload=function(){ 
 var wrap=document.getElementById('wrap'), 
 pic=document.getElementById('pic').getElementsByTagName("li"), 
 list=document.getElementById('list').getElementsByTagName('li'), 
 index=0, 
 timer=null; 
  
 // 定义并调用自动播放函数 
 timer = setInterval(autoPlay, 2000); 
  
 // 鼠标划过整个容器时停止自动播放 
 wrap.onmouseover = function () { 
 clearInterval(timer); 
 } 
  
 // 鼠标离开整个容器时继续播放至下一张 
 wrap.onmouseout = function () { 
 timer = setInterval(autoPlay, 2000); 
 } 
 // 遍历所有数字导航实现划过切换至对应的图片 
 for (var i = 0; i < list.length; i++) { 
 list[i].onmouseover = function () { 
 clearInterval(timer); 
 index = this.innerText - 1; 
 changePic(index); 
 }; 
 }; 
  
 function autoPlay () { 
 if (++index >= pic.length) index = 0; 
 changePic(index); 
 } 
  
 // 定义图片切换函数 
 function changePic (curIndex) { 
 for (var i = 0; i < pic.length; ++i) { 
 pic[i].style.display = "none"; 
 list[i].className = ""; 
 } 
 pic[curIndex].style.display = "block"; 
 list[curIndex].className = "on"; 
 } 
  
 }; 
  
 </script>  
</head> 
<body> 
 <div class="wrap" id='wrap'> 
 <ul id="pic"> 
 <li><img src="1.jpg" alt=""></li> 
 <li><img src="2.jpg" alt=""></li> 
 <li><img src="3.jpg" alt=""></li> 
 <li><img src="4.jpg" alt=""></li> 
 <li><img src="5.jpg" alt=""></li>  
 </ul> 
 <ol id="list"> 
 <li class="on">1</li> 
 <li>2</li> 
 <li>3</li> 
 <li>4</li> 
 <li>5</li> 
 </ol> 
 </div> 
</body> 
</html>

效果如下:

js实现图片轮播效果学习笔记

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

Javascript 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
JavaScript 经典实例日常收集整理(常用经典)
Mar 30 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
javascript操作cookie
Jan 17 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
微信小程序-可移动菜单的实现过程详解
Jun 24 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
JavaScript仿京东轮播图效果
Feb 25 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
Angular4如何自定义首屏的加载动画详解
Jul 26 #Javascript
vue上传图片组件编写代码
Jul 26 #Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
Jul 26 #Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 #Javascript
Angular中自定义Debounce Click指令防止重复点击
Jul 26 #Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 #Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 #Javascript
You might like
简单的过滤字符串中的HTML标记
2006/12/25 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
jquery简单体验
2007/01/10 Javascript
ASP中Sub和Function的区别说明
2020/08/30 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
AngularJS服务service用法总结
2016/12/13 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python按行读取文件的简单实现方法
2016/06/22 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
Django内容增加富文本功能的实例
2017/10/17 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
如何用Python做一个微信机器人自动拉群
2019/07/03 Python
简单了解python关系(比较)运算符
2019/07/08 Python
python的Jenkins接口调用方式
2020/05/12 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
CSS3 实现弹跳的小球动画
2020/10/26 HTML / CSS
HTML5实现签到 功能
2018/10/09 HTML / CSS
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
幼儿园校车司机的岗位职责
2014/01/30 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
高效课堂标语
2014/06/26 职场文书
家长高考寄语
2015/02/27 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
四则混合运算教学反思
2016/02/23 职场文书
Win11 BitLocker 驱动器加密
2022/04/19 数码科技