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

前端之家收集整理的这篇文章主要介绍了用JS实现图片轮播效果代码(一)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一.实现原理

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

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

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

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

二.轮播图页面布局:

三.轮播图的css样式:

.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实现代码

<div class="jb51code">
<pre class="brush: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;
}
}
}

五.效果图:

六.遇到的问题与不足

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

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

猜你在找的JavaScript相关文章