用JS实现轮播图效果(二)


Posted in Javascript onJune 26, 2016

在上一篇用JS实现图片轮播效果代码(一)的基础上,增加了左右箭头的响应事件,实现了点击左右箭头也可以让图片滚动:

js代码如下:

window.onload = function(){
//轮播初始化
var lunbo = document.getElementById('content');
var imgs = lunbo.getElementsByTagName('img'); 
var uls = lunbo.getElementsByTagName('ul');
var lis = lunbo.getElementsByTagName('li');
var next = document.getElementById('next');
var prev = document.getElementById('prev');
var item = 0;
//初始状态下,一个圆圈为高亮模式
lis[0].style.fontSize = '26px';
lis[0].style.color = '#fff';
imgs[0].style.display = 'block';
//定义一个全局变量,用来进行自动轮播图片顺序的变化
var pic_index = 1;
//自动轮播.使用pic_time记录播放,可以随时使用clearInterval()清除掉。
var pic_time = setInterval(autobofang,1000);
//自动播放的事件处理
function autobofang(){
if(pic_index >= lis.length){
pic_index = 0;
}
picChange(pic_index);
pic_index++;
}
//手动轮播
for(var i=0;i<lis.length;i++){ 
lis[i].addEventListener("mouseover",change,false);
}
function change(event){ 
var event=event||window.event;
var target=event.target||event.srcElement; 
var children = target.parentNode.children; 
for(var i=0;i<children.length;i++){
if(target == children[i]){ 
picChange(i); 
} 
}
} 
//图片切换函数
function picChange(i){ 
//让所有图片都不显示,所有圆圈都为普通样式 
for(var j=0;j<imgs.length;j++){ 
imgs[j].style.display = 'none'; 
lis[j].style.fontSize = '24px';
lis[j].style.color = '#999';
}
//让选中的索引的图片显示,对应的圆圈高亮 
imgs[i].style.display = 'block'; 
lis[i].style.fontSize = '26px';
lis[i].style.color = '#fff'; 
}
//当鼠标移近图片区域内,自动播放停止
lunbo.addEventListener("mouseover",function(){
clearInterval(pic_time);
},false);
//当鼠标移出图片区域内,自动播放继续
lunbo.addEventListener("mouseout",function(){pic_time = setInterval(autobofang,1000); },false);
//后退箭头点击事件,图片会跟着点击事件不断变化 
next.addEventListener("click",movenext,false);
function movenext(){
if(item == 2){
item=0;
}
else{
item+=1;
}
picChange(item);
}
prev.addEventListener("click",moveprev,false);
function moveprev(){
if(item == 0){
item=2;
}
else{
item-=1;
} 
picChange(item);
}
}

效果图:鼠标划过箭头的效果图

用JS实现轮播图效果(二)

当鼠标点击到箭头,图片会跟着变化,下面的小圆圈也会跟着显示对应图片的高亮效果

用JS实现轮播图效果(二)

总结:

基本轮播效果已经实现,后期需要做的事:是对代码要进行精简,封装,提高运行效率。

Javascript 相关文章推荐
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
Oct 24 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
JavaScript实现移动端弹窗后禁止滚动
May 25 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
用JS实现图片轮播效果代码(一)
Jun 26 #Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 #Javascript
jQuery滚动新闻实现代码
Jun 26 #Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 #Javascript
JS中的进制转换以及作用
Jun 26 #Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 #Javascript
基于JavaScript实现单选框下拉菜单添加文件效果
Jun 26 #Javascript
You might like
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
Windows下php+mysql5.7配置教程
2017/05/16 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
Array的push与unshift方法性能比较分析
2011/03/05 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
jquery下div 的resize事件示例代码
2014/03/09 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
canvas仿iwatch时钟效果
2017/03/06 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
xmlplus组件设计系列之列表(4)
2017/04/26 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
在vue项目中 实现定义全局变量 全局函数操作
2020/10/26 Javascript
Python实现的简单万年历例子分享
2014/04/25 Python
Python 多线程的实例详解
2017/09/07 Python
django如何连接已存在数据的数据库
2018/08/14 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
python GUI库图形界面开发之PyQt5信号与槽基本操作
2020/02/25 Python
Python脚本实现Zabbix多行日志监控过程解析
2020/08/26 Python
美国顶级户外凉鞋品牌:Chacos
2017/03/27 全球购物
Myprotein俄罗斯官网:欧洲第一运动营养品牌
2019/05/05 全球购物
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
物业管理毕业生个人的求职信
2013/11/30 职场文书
小学庆六一活动总结
2014/08/28 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
三八节活动主持词
2015/07/04 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
python实战之90行代码写个猜数字游戏
2021/04/22 Python
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
oracle delete误删除表数据后如何恢复
2022/06/28 Oracle