用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 index()方法使用代码
Jun 02 Javascript
基于jquery的图片幻灯展示源码
Jul 15 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
手把手教你搭建ES6的开发运行环境
Jul 11 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
微信小程序实现搜索历史功能
Mar 26 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
Apr 08 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框架系列文章(6)mysql数据库方法
2016/03/04 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
解析Javascript小括号“()”的多义性
2013/12/03 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
AngularJS数据源的多种获取方式汇总
2016/02/02 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
Node.js中 __dirname 的使用介绍
2017/06/19 Javascript
JavaScript实现图片无缝滚动效果
2017/07/07 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
element-ui中select组件绑定值改变,触发change事件方法
2018/08/24 Javascript
JavaScript对象字面量和构造函数原理与用法详解
2020/04/18 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
python 字典(dict)按键和值排序
2016/06/28 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
PyCharm+PySpark远程调试的环境配置的方法
2018/11/29 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
浅谈Python3中print函数的换行
2020/08/05 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
南非最受欢迎的时尚品牌:MRP
2016/09/18 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
酒店保安领班职务说明书
2014/03/04 职场文书
班组长竞聘书
2014/03/31 职场文书
大学生工作自荐书
2014/06/16 职场文书
党小组推荐意见
2015/06/02 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
初一英语教学反思
2016/02/15 职场文书
MySQL RC事务隔离的实现
2022/03/31 MySQL