用JS实现图片轮播效果代码(一)


Posted in Javascript onJune 26, 2016

一.实现原理

(1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏;

(2)轮播图分为手动轮播和自动轮播;

手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示;
自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片。

(3)所有的基础知识:dom操作,定时器,事件运用。

二.轮播图页面布局:

<div id="content"> <!-- 总的父容器 -->
<div class="carousel-inner"> <!-- 包含图片的容器 -->
<div class="item "><img src="./img/lunbo1.jpg" alt="第一张图片"></div>
<div class="item"><img src="./img/lunbo2.jpg" alt="第二张图片"></div>
<div class="item"><img src="./img/lunbo3.jpg" alt="第三张图片"></div>
</div>
<!-- 图片下方的指示圆圈-->
<ul class="carousel-indicators">
<li id='pic1'>●</li>
<li id='pic2'>●</li>
<li id='pic3'>●</li>
</ul>
<!-- 图片左右方来回滚动图片的左右箭头-->
<a href="#" class="carousel-control prev"><span><</span></a>
<a href="#" class="carousel-control next"><span>></span></a>
</div>

三.轮播图的css样式:

#content{
width: 100%;
height:500px;
position: relative;
}
.carousel-inner{
position: relative;
width: 100%;
overflow: hidden; 
height:500px; 
}
.carousel-inner>.item>img{
display: block; 
line-height: 1; 
z-index: 1;
}
.carousel-indicators{
position: absolute;
bottom:10px;
left:45%;
z-index: 2;
list-style-type: none;
}
.carousel-indicators li{
display:inline-block;
padding: 0 15px;
font-size: 24px;
color:#999; 
cursor: pointer;
z-index: 2;
}
.active1{
font-size: 28px;
color:#fff;
}
.carousel-control{
position: absolute;
text-decoration:none;
color: #999;
font-weight: bold;
opacity: .5;
font-size: 40px;
z-index: 3;
}
.carousel-control:hover{
color:fff;
text-decoration: none;
opacity: .9;
outline: none;
font-size: 42px;
}
.prev{
top: 30%; 
left:20px; 
}
.next{
top:30%;
right: 20px;
}

四.轮播图的js实现代码:

window.onload = function(){
//轮播初始化
var lunbo = document.getElementById('content');
var imgs = lunbo.getElementsByTagName('img'); 
var uls = lunbo.getElementsByTagName('ul');
var lis = lunbo.getElementsByTagName('li');
//初始状态下,一个圆圈为高亮模式
lis[0].style.fontSize = '26px';
lis[0].style.color = '#fff';
//定义一个全局变量,用来进行自动轮播图片顺序的变化
var pic_index = 1;
//自动轮播.使用pic_time记录播放,可以随时使用clearInterval()清除掉。
var pic_time = setInterval(autobofang,3000);
//手动轮播
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'; 
}
//自动播放的事件处理
function autobofang(){
if(pic_index >= lis.length){
pic_index = 0;
}
change1(pic_index);
pic_index++;
}
//自动播放的图片转化中的事件
function change1(index){ 
picChange(index);
//鼠标移入ul标签,自动播放图片暂停
uls[0].addEventListener("mouseover",pause,false);
//鼠标移出ul标签,自动播放图片继续
uls[0].addEventListener("mouseout",go,false);
}
//自动播放暂停函数
function pause(event){
var event=event||window.event;
var target=event.target||event.srcElement;
switch(target.id){
case "pic1":
clearInterval(pic_time); 
break;
case "pic2":
clearInterval(pic_time);
break;
case "pic3":
clearInterval(pic_time);
break;
}
}
//自动播放图片继续函数
function go(event){
var event=event||window.event;
var target=event.target||event.srcElement; 
switch(target.id){
case "pic1":
pic_index = 1; 
pic_time = setInterval(autobofang,3000);
break;
case "pic2":
pic_index = 2; 
pic_time = setInterval(autobofang,3000);
break;
case "pic3":
pic_index = 3; 
pic_time = setInterval(autobofang,3000); 
break;
}
}
}

五.效果图:

用JS实现图片轮播效果代码(一)

六.遇到的问题与不足

问题:当鼠标第一次移入ul标签时,自动轮播图片停止,鼠标移出,自动轮播继续,但是随着运行,轮播图片的变化速度越来越快,而且这时点击ul标签已经不起作用了。

问题原因:在后面停止轮播后再次轮播开始使用定时器的时候,没有给赋值给pic_time来记录,也就没有再次鼠标移到ul标签而清除定时器,因此导致再次点击ul标签不能暂停自动轮播播放,而且速度 越来越快。
不足:没有实现类似淘宝轮播图那样平滑过渡的无现滚动的效果,左右箭头的指示作用也没有完成。这些在后期会继续学习,继续来完善,来分享.

Javascript 相关文章推荐
总结AJAX相关JS代码片段和浏览器模型
Aug 15 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
Apr 16 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
jQuery中on方法使用注意事项详解
Feb 15 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
Jun 20 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
JQuery控制图片由中心点逐渐放大效果
Jun 26 #Javascript
You might like
PHP中的串行化变量和序列化对象
2006/09/05 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
discuz目录文件资料汇总
2014/12/30 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
2011/06/08 Javascript
JavaScript中判断对象类型的几种方法总结
2013/11/11 Javascript
一个不错的仿携程自定义数据下拉选择select
2014/09/01 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
2015/09/16 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
windows下vue.js开发环境搭建教程
2017/03/20 Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
2018/08/14 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
layui导出所有数据的例子
2019/09/10 Javascript
js实现简单进度条效果
2020/03/25 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
使用Python的PEAK来适配协议的教程
2015/04/14 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python标准库之collections包的使用教程
2017/04/27 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
师范应届生教师求职信
2013/11/05 职场文书
庆七一活动方案
2014/01/25 职场文书
ktv好的活动方案
2014/08/17 职场文书
班主任自我评价范文
2015/03/11 职场文书
2015年学校后勤工作总结
2015/04/08 职场文书
安全教育观后感
2015/06/17 职场文书
心理学培训心得体会
2016/01/22 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python