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 相关文章推荐
图片自动缩小的js代码,用以防止图片撑破页面
Mar 12 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
Jan 04 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 Javascript
vue element table中自定义一些input的验证操作
Jul 18 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实现图片局部打马赛克的方法
2015/02/11 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
PHP模块化安装教程
2016/06/01 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
jquery实用代码片段集合
2010/08/12 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
jQuery实现列表内容的动态载入特效
2015/08/08 Javascript
JavaScript实现图片轮播组件代码示例
2016/11/22 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
详解python进行mp3格式判断
2016/12/23 Python
python字典操作实例详解
2017/11/16 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
Python中bisect的使用方法
2019/12/31 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
乌克兰移动电子产品和相关配件的在线商店:iTMag
2020/03/16 全球购物
综合实践教学反思
2014/01/31 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
欢度春节标语
2014/07/01 职场文书
小学安全教育月活动总结
2014/07/07 职场文书
开服装店计划书
2014/08/15 职场文书
初中优秀教师事迹材料
2014/08/18 职场文书
2014年教师党员自我评价范文
2014/09/22 职场文书
2014年统计工作总结
2014/11/21 职场文书
幼师求职自荐信
2015/03/26 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
2016年10月份红领巾广播稿
2015/12/21 职场文书
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
MySQL主从切换的超详细步骤
2022/06/28 MySQL