用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 相关文章推荐
学习YUI.Ext 第四天--对话框Dialog的使用
Mar 10 Javascript
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
jquery 多行文本框(textarea)高度变化
Jul 03 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
jQuery.form.js的使用详解
Jun 14 jQuery
JS实现的获取银行卡号归属地及银行卡类型操作示例
Jan 08 Javascript
vue下载excel的实现代码后台用post方法
May 10 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
Sep 25 Javascript
用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模板中出现空行解决方法
2011/03/08 PHP
php防注入,表单提交值转义的实现详解
2013/06/10 PHP
PHP中读取照片exif信息的方法
2014/08/20 PHP
Codeigniter检测表单post数据的方法
2015/03/21 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP MSSQL 分页实例
2016/04/13 PHP
PHP入门教程之图像处理技巧分析
2016/09/11 PHP
javascript getElementsByTagName
2011/01/31 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
javascript实现的右下角弹窗实例
2015/04/24 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
浅谈AngularJs指令之scope属性详解
2016/10/24 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
vue+axios+mock.js环境搭建的方法步骤
2018/08/28 Javascript
vue自定义指令之面板拖拽的实现
2019/04/14 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
Linux下Python获取IP地址的代码
2014/11/30 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
python中元组的用法整理
2020/06/15 Python
Django项目创建及管理实现流程详解
2020/10/13 Python
EJB的基本架构
2016/09/22 面试题
房地产管理毕业生自荐信
2013/11/04 职场文书
效能风暴心得体会
2014/09/04 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
德劲DE1102数字调谐收音机机评
2022/04/07 无线电