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 相关文章推荐
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
js几个验证函数代码
Mar 25 Javascript
JavaScript高级程序设计(第3版)学习笔记5 js语句
Oct 11 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
Input文本框随着输入内容多少自动延伸的实现
Feb 15 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
axios实现文件上传并获取进度
Mar 25 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
mantis安装、配置和使用中的问题小结
2014/07/14 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
CL vs ForZe BO5 第三场 2.13
2021/03/10 DOTA
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
JS不间断向上滚动效果代码
2013/12/25 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
jQuery绑定事件on()与弹窗的简要概述
2016/04/27 Javascript
基于JavaScript实现添加到购物车效果附源码下载
2016/08/22 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
JavaScript中使用参数个数实现重载功能
2017/09/01 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
JavaScript设计模式之命令模式实例分析
2019/01/16 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
基于JavaScript实现轮播图效果
2021/01/02 Javascript
[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
Raffaello Network西班牙:意大利拉斐尔时尚购物网
2019/03/12 全球购物
艺术系应届生的自我评价
2013/10/19 职场文书
社区维稳工作方案
2014/06/06 职场文书
艾滋病宣传标语
2014/06/25 职场文书
高等学院职业生涯规划书范文
2014/09/16 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
放飞理想主题班会
2015/08/14 职场文书