js图片轮播效果实现代码


Posted in Javascript onApril 18, 2020

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

首先给大家看一看js图片轮播效果,如下图

js图片轮播效果实现代码

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>

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容,为大家分享了js图片轮播效果实现代码,希望大家喜欢,根据自己的喜好更换图片,制作属于自己的图片轮播效果。

Javascript 相关文章推荐
Jquery从头学起第四讲 jquery入门教程
Aug 01 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
JS定时器实例详细分析
Oct 11 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
基于JS实现Android,iOS一个手势动画效果
Apr 27 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
jQuery利用sort对DOM元素进行排序操作
Nov 07 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 Javascript
vue 判断页面是首次进入还是再次刷新的实例
Nov 05 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 #Javascript
javascript发送短信验证码实现代码
Nov 12 #Javascript
javascript倒计时效果实现
Nov 12 #Javascript
基于jquery步骤进度条源码分享
Nov 12 #Javascript
javascript手风琴下拉菜单实现代码
Nov 12 #Javascript
javascript弹出窗口实现代码
Nov 12 #Javascript
javascript实现tab切换特效
Nov 12 #Javascript
You might like
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
php画图实例
2014/11/05 PHP
ExtJS 下拉多选框lovcombo
2010/05/19 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
jQuery滚动加载图片效果的实现
2013/03/06 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
jQuery实现商品活动倒计时
2015/10/16 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
Vue.js基础知识汇总
2016/04/27 Javascript
JavaScript 实现 Tab 点击切换实例代码
2017/03/25 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
JavaScript面向对象继承原理与实现方法分析
2018/08/09 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
Python 连连看连接算法
2008/11/22 Python
在Django的session中使用User对象的方法
2015/07/23 Python
Python实现八大排序算法
2016/08/13 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Pytorch 计算误判率,计算准确率,计算召回率的例子
2020/01/18 Python
使用Python构造hive insert语句说明
2020/06/06 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
美国时尚女装在线:Missguided
2016/12/03 全球购物
打架检讨书50字
2014/01/11 职场文书
先进个人获奖感言
2014/01/24 职场文书
大学生作弊检讨书
2014/09/11 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书