用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+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
javascript实现页面内关键词高亮显示代码
Apr 03 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
详解AngularJS中的http拦截
Feb 09 Javascript
搞定immutable.js详细说明
May 02 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
vue修饰符.capture和.self的区别
Apr 22 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脚本的10个技巧(4)
2006/10/09 PHP
php 更新数据库中断的解决方法
2009/06/05 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
PHP解析RSS的方法
2015/03/05 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
PHP编写简单的App接口
2016/08/28 PHP
php工具型代码之印章抠图
2018/07/18 PHP
jquery获取下拉列表的值为null的解决方法
2011/03/18 Javascript
详解jquery uploadify 上传文件
2013/11/09 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
适用于javascript开发者的Processing.js入门教程
2016/02/24 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
2016/08/10 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
python列表操作使用示例分享
2014/02/21 Python
Python函数嵌套实例
2014/09/23 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
Python对象转JSON字符串的方法
2016/04/27 Python
python 定时修改数据库的示例代码
2018/04/08 Python
教你如何编写、保存与运行Python程序的方法
2019/07/12 Python
Python with语句和过程抽取思想
2019/12/23 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
日本小田急百货官网:Odakyu
2018/07/19 全球购物
六年级数学教学反思
2014/02/03 职场文书
高中打架检讨书
2014/02/13 职场文书
公司授权委托书样本
2014/09/15 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
员工考勤管理制度
2015/08/06 职场文书
初中美术教学反思
2016/02/17 职场文书
音乐课《小猫钓鱼》教学反思
2016/02/18 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android