javascript实现轮播图效果
1.轮播图实现基本思路
实现轮播图我们肯定需要一些图片,我们动过javascript编写动画使得这些照片自动轮播,首先我们解决html部分和css部分,我们需要在一个区域内轮播图片,还有我们需要设置小圆点导航,以及向前向后的按钮,具体实现效果。
代码如下:
<body>
<div id="container">
<ul id="img_all">
<li id="img8_1">
<img src="img/5984487bNd632b80a.jpg" />
</li>
<li >
<img src="img/5983e7cdN9eb55aba.jpg" />
</li>
<li >
<img src="img/597fe4f2N39c8cbd6.jpg" />
</li>
<li >
<img src="img/59802573N434bb1a3.jpg" />
</li>
<li >
<img src="img/5981cc12N8a3cde50.jpg" />
</li>
<li>
<img src="img/5982c03bNc33ba684.jpg" />
</li>
<li >
<img src="img/5982ee72Ne4b3f13b.jpg" />
</li>
<li >
<img src="img/5979ad9dN277885bf.jpg" />
</li>
<li >
<img src="img/5984487bNd632b80a.jpg" />
</li>
<li id="img1_1">
<img src="img/5983e7cdN9eb55aba.jpg" />
</li>
</ul>
<input id="prev" type="button" value="<" />
<input id="next" type="button" value=">" />
<ul id="small">
</ul>
</div>
</body>
css部分
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width: 790px;
height: 340px;
border: 1px solid black;
overflow: hidden;
position: relative;
margin: 0 auto;
margin-top: 100px;
}
#img_all{
width: 79000px;
height: 340px;
position: absolute;
z-index: 1px;
left: -790px;
top: 0;
}
#container #img_all li{
list-style: none;
float: left;
width: 790px;
height: 340px;
z-index: 1;
margin-left: 0px;
}
#img_all img{
width: 790px;
height: 340px;
}
#prev{
width: 60px;
height: 60px;
color: gray;
z-index: 2;
font-size: 40px;
position: absolute;
top:140px;
left: 0px;
border: none;
display: none;
background-color:rgba(255,255,255,.8);
}
#next{
width: 60px;
height: 60px;
color: gray;
z-index: 2;
font-size: 40px;
position: absolute;
top:140px;
right: 0px;
border: none;
display: none;
overflow: hidden;
background-color:rgba(255,255,255,.8);
}
#small{
position: absolute;
z-index: 2;
background:rgba(254,254,254,0.5);
list-style: none;
height: 20px;
bottom:20px;
margin: 0 auto;
border-radius: 10px;
}
#small li{
float: left;
width: 13px;
height: 13px;
margin-left:11px;
margin-top: 3px;
background-color:white;
text-align: center;
border-radius: 50%;
}
#small li:hover{
cursor:pointer;
}
</style>
接下来我们来了解这个实现的基本原理我们先来看一张图,大家会就一目了然了
我们将图片连在一起放在一个div里,而这个div的大小只有一张图片这么大,我们通过给div设置overflow:hidden;让超出div的部分隐藏,这样我们通过让照片连在一起这个div通过javascript让其每次移动一张照片的像素,使得照片进行切换,在我们处理最后一张和第一张图片的时候大家注意力了:这里面有一个技巧,我们在最后一张图片后面加上第一张照片,在第一张照片前面加上最后一张照片,使用这两张照片实现一个轮转的效果,在我们照片运动到最后一张后面的第一张假图时,我们看到了第一张照片,然后我们立马让这个div立马回到第一张真图的位置,这样使得用户产生一个视觉效果,感觉这个自动回到了第一张,向前时的原理也是一样的,我们通过图片来看一下
在后面还有javascript的一些注意点,我们需要判断动画是否运行结束,防止无限进行点击事件,导致浏览器崩溃,这里我在javascript中具体具体进行了注释。
javascript代码如下:
<script type="text/javascript">
//运动函数
window.onload=function(){
var temp=-790;
var ocenter=document.getElementById("container");
var oimgs=document.getElementById("img_all");
var oprev=document.getElementById("prev");
var onext=document.getElementById("next");
var small=document.getElementById("small");
var smallLi=document.getElementById("img_all").getElementsByTagName("li");
var sports=false;//记录当前动画是否运行结束
var mousetimer=null;//设置鼠标移动上去时的计时器
var index=1;
var Curve=0;
var imgSum=smallLi.length;
//根据图片数量添加按钮
function addSmall(){
for(var i=0;i<smallLi.length-2;i++)
{
var newLi=document.createElement("li");
small.appendChild(newLi);
}
}
addSmall();
var osmall=document.getElementById("small").getElementsByTagName("li");
osmall[0].style.background='red';
//设置图片的宽度
//设置按钮居中
small.style.width=24*(imgSum-2)+11+'px';
small.style.left=parseInt((790-24*(imgSum-1))/2)+'px';
//运动函数
function startRemove(obj,itarget,time,mult){
var odiv=obj;
sports=true;
var timer=null;
clearTimeout(timer);
timer=setTimeout(function(){
var speed=(itarget-odiv.offsetLeft)/mult;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(odiv.offsetLeft==itarget)
{
odiv.style.left=itarget;
clearTimeout(timer);
sports=false;
}
else
{
odiv.style.left=odiv.offsetLeft+speed+'px';
setTimeout(arguments.callee,30);
sports=true;
}
},time);
//增加第一张和最后一张的判断条件
if(itarget>0)
{
itarget=(imgSum-2)*-790;
odiv.style.left=itarget+'px';
itarget=(imgSum-3)*-790;
}
if(itarget<(imgSum-1)*-790)
{
itarget=-790;
odiv.style.left=itarget+'px';
itarget=-1580;
}
return itarget;
}
function showbutton(){
//for循环的功能是清除在这之前所有按钮的颜色
for(var i=0;i<osmall.length;i++)
{
//使用匿名函数解决for循环问题
(function(o){
if(osmall[o].style.backgroundColor=="red")
{
osmall[o].style.backgroundColor='';
}
})(i);
}
if(index>imgSum-2)
{
index=1;
}
if(index<1)
{
index=imgSum-2;
}
osmall[index-1].style.backgroundColor='red';
}
//给每一个按添加事件
function osmallevent(){
for(var i=0;i<osmall.length;i++)
{
var t=0;
(function(o){
osmall[o].onmouseover=function(){
if(sports==false)
{
var temp2=0;
temp2=(o+1)*(-790);
startRemove(oimgs,temp2,0.5,2);
for(var i=0;i<osmall.length;i++)
{
(function(o){
if(osmall[o].style.backgroundColor=="red")
{
osmall[o].style.backgroundColor='';
}
})(i);
}
osmall[o].style.backgroundColor='red';
}
}
})(i);
}
}
osmallevent();
ocenter.onmouseover=function(){
oprev.style.display='block';
onext.style.display='block';
clearInterval(mousetimer);
}
function autoPlay(){
mousetimer=setInterval(onext.onclick=function(){
if(!sports){
temp-=790;
index++;
osmall[index-2].style.backgroundColor='';
temp=startRemove(oimgs,temp,30,6);
showbutton();
}
},2000);
}
autoPlay();
ocenter.onmouseout=function(){
oprev.style.display='none';
onext.style.display='none';
autoPlay();
}
onext.onclick=function(){
if(!sports){
temp-=790;
index++;
temp=startRemove(oimgs,temp,30,6);
showbutton();
console.log(index);
}
}
oprev.onclick=function(){
if(!sports){
index--;
temp+=790;
temp=startRemove(oimgs,temp,30,6);
showbutton();
console.log(index);
}
}
}
</script>
这里面比较人性画的东西就是我们在html中添加照片时,我们的小圆点导航是自动添加的,大家可以试一下,下面时这个程序的完整代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>京东轮播图</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width: 790px;
height: 340px;
border: 1px solid black;
/*overflow: hidden;*/
position: relative;
margin: 0 auto;
margin-top: 100px;
}
#img_all{
width: 79000px;
height: 340px;
position: absolute;
z-index: 1px;
left: -790px;
top: 0;
}
#container #img_all li{
list-style: none;
float: left;
width: 790px;
height: 340px;
z-index: 1;
margin-left: 0px;
}
#img_all img{
width: 790px;
height: 340px;
}
#prev{
width: 60px;
height: 60px;
color: gray;
z-index: 2;
font-size: 40px;
position: absolute;
top:140px;
left: 0px;
border: none;
display: none;
background-color:rgba(255,255,255,.8);
}
#next{
width: 60px;
height: 60px;
color: gray;
z-index: 2;
font-size: 40px;
position: absolute;
top:140px;
right: 0px;
border: none;
display: none;
overflow: hidden;
background-color:rgba(255,255,255,.8);
}
#small{
position: absolute;
z-index: 2;
background:rgba(254,254,254,0.5);
list-style: none;
height: 20px;
bottom:20px;
margin: 0 auto;
border-radius: 10px;
}
#small li{
float: left;
width: 13px;
height: 13px;
margin-left:11px;
margin-top: 3px;
background-color:white;
text-align: center;
border-radius: 50%;
}
#small li:hover{
cursor:pointer;
}
</style>
<script type="text/javascript">
//运动函数
window.onload=function(){
var temp=-790;
var ocenter=document.getElementById("container");
var oimgs=document.getElementById("img_all");
var oprev=document.getElementById("prev");
var onext=document.getElementById("next");
var small=document.getElementById("small");
var smallLi=document.getElementById("img_all").getElementsByTagName("li");
var sports=false;//记录当前动画是否运行结束
var mousetimer=null;//设置鼠标移动上去时的计时器
var index=1;
var Curve=0;
var imgSum=smallLi.length;
//根据图片数量添加按钮
function addSmall(){
for(var i=0;i<smallLi.length-2;i++)
{
var newLi=document.createElement("li");
small.appendChild(newLi);
}
}
addSmall();
var osmall=document.getElementById("small").getElementsByTagName("li");
osmall[0].style.background='red';
//设置图片的宽度
//设置按钮居中
small.style.width=24*(imgSum-2)+11+'px';
small.style.left=parseInt((790-24*(imgSum-1))/2)+'px';
//运动函数
function startRemove(obj,itarget,time,mult){
var odiv=obj;
sports=true;
var timer=null;
clearTimeout(timer);
timer=setTimeout(function(){
var speed=(itarget-odiv.offsetLeft)/mult;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(odiv.offsetLeft==itarget)
{
odiv.style.left=itarget;
clearTimeout(timer);
sports=false;
}
else
{
odiv.style.left=odiv.offsetLeft+speed+'px';
setTimeout(arguments.callee,30);
sports=true;
}
},time);
//增加第一张和最后一张的判断条件
if(itarget>0)
{
itarget=(imgSum-2)*-790;
odiv.style.left=itarget+'px';
itarget=(imgSum-3)*-790;
}
if(itarget<(imgSum-1)*-790)
{
itarget=-790;
odiv.style.left=itarget+'px';
itarget=-1580;
}
return itarget;
}
function showbutton(){
//for循环的功能是清除在这之前所有按钮的颜色
for(var i=0;i<osmall.length;i++)
{
//使用匿名函数解决for循环问题
(function(o){
if(osmall[o].style.backgroundColor=="red")
{
osmall[o].style.backgroundColor='';
}
})(i);
}
if(index>imgSum-2)
{
index=1;
}
if(index<1)
{
index=imgSum-2;
}
osmall[index-1].style.backgroundColor='red';
}
//给每一个按添加事件
function osmallevent(){
for(var i=0;i<osmall.length;i++)
{
var t=0;
(function(o){
osmall[o].onmouseover=function(){
if(sports==false)
{
var temp2=0;
temp2=(o+1)*(-790);
startRemove(oimgs,temp2,0.5,2);
for(var i=0;i<osmall.length;i++)
{
(function(o){
if(osmall[o].style.backgroundColor=="red")
{
osmall[o].style.backgroundColor='';
}
})(i);
}
osmall[o].style.backgroundColor='red';
}
}
})(i);
}
}
osmallevent();
ocenter.onmouseover=function(){
oprev.style.display='block';
onext.style.display='block';
clearInterval(mousetimer);
}
function autoPlay(){
mousetimer=setInterval(onext.onclick=function(){
if(!sports){
temp-=790;
index++;
osmall[index-2].style.backgroundColor='';
temp=startRemove(oimgs,temp,30,6);
showbutton();
}
},2000);
}
autoPlay();
ocenter.onmouseout=function(){
oprev.style.display='none';
onext.style.display='none';
autoPlay();
}
onext.onclick=function(){
if(!sports){
temp-=790;
index++;
temp=startRemove(oimgs,temp,30,6);
showbutton();
console.log(index);
}
}
oprev.onclick=function(){
if(!sports){
index--;
temp+=790;
temp=startRemove(oimgs,temp,30,6);
showbutton();
console.log(index);
}
}
}
</script>
</head>
<body>
<div id="container">
<ul id="img_all">
<li id="img8_1">
<img src="img/5984487bNd632b80a.jpg" />
</li>
<li >
<img src="img/5983e7cdN9eb55aba.jpg" />
</li>
<li >
<img src="img/597fe4f2N39c8cbd6.jpg" />
</li>
<li >
<img src="img/59802573N434bb1a3.jpg" />
</li>
<li >
<img src="img/5981cc12N8a3cde50.jpg" />
</li>
<li>
<img src="img/5982c03bNc33ba684.jpg" />
</li>
<li >
<img src="img/5982ee72Ne4b3f13b.jpg" />
</li>
<li >
<img src="img/5979ad9dN277885bf.jpg" />
</li>
<li >
<img src="img/5984487bNd632b80a.jpg" />
</li>
<li id="img1_1">
<img src="img/5983e7cdN9eb55aba.jpg" />
</li>
</ul>
<input id="prev" type="button" value="<" />
<input id="next" type="button" value=">" />
<ul id="small">
</ul>
</div>
</body>
</html>
整个轮播图就这样实现啦,希望这里面的东西对你javascript的学习有所帮助,如果大家有更好的方法以及技巧,欢迎大家与我交流,相互学习。