用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 相关文章推荐
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
jQuery中wrapInner()方法用法实例
Jan 16 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
JS创建Tag标签的方法详解
Jun 09 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 Javascript
JS如何使用剪贴板操作Clipboard API
May 17 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类的使用 实例代码讲解
2009/12/28 PHP
ucenter通信原理分析
2015/01/09 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
用js实现in_array的方法
2013/11/05 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
vue 通过base64实现图片下载功能
2020/12/19 Vue.js
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python实现统计代码行数的方法
2015/05/22 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
python将每个单词按空格分开并保存到文件中
2018/03/19 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
numpy返回array中元素的index方法
2018/06/27 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
Python 音频生成器的实现示例
2019/12/24 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
python基于opencv实现人脸识别
2021/01/04 Python
Laravel中Kafka的使用详解
2021/03/24 PHP
幼儿园长自我鉴定
2013/10/17 职场文书
市级绿色学校申报材料
2014/08/25 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
预备党员半年考察意见
2015/06/01 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python