用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 相关文章推荐
GreyBox技术总结(转)
Nov 23 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
微信js-sdk地理位置接口用法示例
Oct 12 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
js获取地址栏中传递的参数(两种方法)
Feb 08 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
jQuery实现为动态添加的元素绑定事件实例分析
Sep 07 jQuery
vue 防止页面加载时看到花括号的解决操作
Nov 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
php基础知识:类与对象(1)
2006/12/13 PHP
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
PHP文件上传原理简单分析
2011/05/29 PHP
ThinkPHP模板输出display用法分析
2014/11/26 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
jquery ajax 局部刷新小案例
2014/02/08 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
2015/09/01 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python 使用SMTP发送邮件的代码小结
2016/09/21 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
python开发实例之Python的Twisted框架中Deferred对象的详细用法与实例
2020/03/19 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Python爬取股票信息,并可视化数据的示例
2020/09/26 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
纯HTML5+CSS3制作图片旋转
2016/01/12 HTML / CSS
马来西亚在线时尚女装商店:KEI MAG
2017/09/28 全球购物
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
医院实习介绍信
2014/01/12 职场文书
小学学习雷锋活动总结
2014/07/03 职场文书
村班子对照检查材料
2014/08/18 职场文书
给校长的建议书范文
2015/09/14 职场文书
Python requests用法和django后台处理详解
2022/03/19 Python