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 相关文章推荐
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
Apr 02 Javascript
JavaScript正则表达式之multiline属性的应用
Jun 16 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
TableSort.js表格排序插件使用方法详解
Feb 10 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
js图片无缝滚动插件使用详解
May 26 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 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模板中出现空行解决方法
2011/03/08 PHP
php中处理mysql_fetch_assoc返回来的数组 不用foreach----echo
2011/05/04 PHP
Php output buffering缓存及程序缓存深入解析
2013/07/15 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
JavaScript 基础问答三
2008/12/03 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
js实现在网页上简单显示时间的方法
2015/03/02 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
使用python实现接口的方法
2017/07/07 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
python爬虫 基于requests模块发起ajax的get请求实现解析
2019/08/20 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
成人大专生实习期的自我评价
2013/10/02 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
法院信息化建设方案
2014/05/21 职场文书
施工工地安全标语
2014/06/07 职场文书
施工安全标语
2014/06/07 职场文书
支部书记四风问题对照检查材料
2014/10/04 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android