用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 相关文章推荐
几行代码轻松搞定jquery实现flash8类似的连接效果
May 03 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
Aug 25 Javascript
BootStrap3学习笔记(一)之网格系统
May 20 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
js控制台输出的方法(详解)
Nov 26 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
深入理解vue Render函数
Jul 19 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 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
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
Yii框架引入coreseek分页功能示例
2019/02/08 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题分析
2007/08/12 Javascript
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
javascript函数以及基础写法100多条实用整理
2013/01/13 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
基于jquery css3实现点击动画弹出表单源码特效
2015/08/31 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
AngularJS 执行流程详细介绍
2016/08/18 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
JS中验证整数和小数的正则表达式
2018/10/08 Javascript
详解vantUI框架在vue项目中的应用踩坑
2018/12/06 Javascript
vue-cli中安装方法(图文详细步骤)
2018/12/12 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python实现图像几何变换
2015/07/06 Python
在Mac OS系统上安装Python的Pillow库的教程
2015/11/20 Python
Python ftp上传文件
2016/02/13 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python实现在线翻译
2020/06/18 Python
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
优衣库台湾官网:UNIQLO台湾
2019/02/01 全球购物
什么是.net
2015/08/03 面试题
总经理办公室主任岗位职责
2013/11/12 职场文书
幼儿园教研活动方案
2014/01/19 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
暑期家教宣传单
2015/07/14 职场文书
学校安全管理制度
2015/08/06 职场文书
服务行业标语口号
2015/12/26 职场文书