用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 相关文章推荐
JS option location 页面跳转实现代码
Dec 27 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
Bootstrap中CSS的使用方法
Feb 17 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
vuejs父子组件通信的问题
Jan 11 Javascript
Vue Router history模式的配置方法及其原理
May 30 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
Apr 09 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
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
使用PHP实现阻止用户上传成人照片或者裸照
2014/12/25 PHP
php验证手机号码
2015/11/11 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
将string解析为json的几种方式小结
2010/11/11 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
2014/09/09 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
初步讲解Python中的元组概念
2015/05/21 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
python装饰器常见使用方法分析
2019/06/26 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
python实现代码统计器
2019/09/19 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
Python requests.post方法中data与json参数区别详解
2020/04/30 Python
css3发光搜索表单分享
2014/04/11 HTML / CSS
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
农药学硕士毕业生自荐信
2013/09/25 职场文书
股份转让协议书
2014/04/12 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
实习指导教师评语
2014/12/30 职场文书
活动宣传稿范文
2015/07/23 职场文书
Go 语言下基于Redis分布式锁的实现方式
2021/06/28 Golang
关于python中模块和重载的问题
2021/11/02 Python
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers