您的位置：首页 > Web前端 > JavaScript

JS--图片轮播效果

2013-08-27 18:25 441 查看
搞了很长时间才弄清楚图片轮播效果的原理，理解各个事件发生的原因，浪费了这么长的时间，只怪自己的知识太过于薄弱。现将代码写下，供大家参看，如有不妥之处还望指出，大家一起学习。

功能：

1、点击左右两边的按钮，可以让图片进行左右滚动。





2、鼠标点击下方的一排按钮，可切换至想要的那张图片。



3、鼠标经过下方的一排按钮上时，可对图片进行小图预览。



4、当没有鼠标事件时，图片可进行自动播放。

5、当鼠标停留在整个区域上时，图片停止自动播放，当鼠标移出时，继续自动播放。

效果：



代码如下：

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=10,chrome=1" />
<title>图片轮换效果</title>
<style>
body,div,ul,li,a,img,span{padding:0;margin:0;}
img{border:0;vertical-align:middle;}
li{list-style:none;}
body{width:100%;height:100px;background:url(img/bg.jpg) no-repeat;font-family:'微软雅黑';}
.wrap{width:742px;height:462px;margin:10% auto 60px;position:relative;}
.tit{height:50px;line-height:50px;padding-left:10px;margin-bottom:12px;font-size:30px;color:#fff;}
p{width:742px;height:462px;position:absolute;padding:0;margin:0;}
#img{width:686px;height:390px;margin:28px 0 0 28px;}
.wrap a{width:30px;height:60px;line-height:60px;text-align:center;top:208px;position:absolute;display:block;opacity:0.5;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);}
.wrap a:hover{opacity:1;filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);}
#prev{left:2px;}
#next{right:2px;}
.btdiv{width:686px;height:50px;line-height:50px;position:absolute;bottom:0;left:37px;}
.pic_intro{width:400px;height:50px;line-height:50px;color:#000;font-size:16px;float:left;padding-left:10px;}
#ul1{height:10px;padding-top:20px;float:right;padding-right:24px;}
#ul1 li{width:14px;height:11px;float:left;margin-left:14px;background:url(img/dot_11.png) no-repeat;position:relative;}
#ul1 .active{background:url(img/dot_22.png) no-repeat;}
#ul1 span{width:76px;height:69px;display:none;position:absolute;top:-74px;left:-34px;background:url(img/dot_3.png) no-repeat center bottom;}
#ul1 img{width:70px;height:56px;border:3px solid #fff;border-radius:5px;}
.btm{width:100%;height:60px;background:url(img/btm.png) repeat-x;position:fixed;bottom:0;}
</style>
<script>
window.onload=function(){
var oWrap=document.getElementById('wrap');
var oImg=document.getElementById('img');
var oPre=document.getElementById('prev');
var oNext=document.getElementById('next');
var oNext=document.getElementById('next');
var oTxt=document.getElementById('txt');
var oUl1=document.getElementById('ul1');
var aLi=oUl1.getElementsByTagName('li');
var arrIMG1=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']
var arrTXT=['春天--等闲识得东风面，万紫千红总是春','夏天--绿树阴浓夏日长，楼台倒影入池塘','秋天--榈庭多落叶，慨然知已秋','冬天--寒风摧树木，严霜结庭兰']
var num=0;
var timer=null;
function autoPlay(){
timer=setInterval(function(){
num++;
if(num==arrIMG1.length){
num=0;
}
show();
},800);
}
autoPlay();
oWrap.onmouseover=function(){clearInterval(timer);}
oWrap.onmouseout=autoPlay;
oPre.onclick=function(){
num--;
if(num==-1){
num=arrIMG1.length-1;
}
show();
}
oNext.onclick=function(){
num++;
if(num>=arrIMG1.length){
num=0;
}
show();
}
function show(){
oImg.src=arrIMG1[num];
oTxt.innerHTML=arrTXT[num];
for(var i=0;i<aLi.length;i++){
aLi[i].className='';
}
aLi[num].className='active';
}
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onclick=function(){
oImg.src=arrIMG1[this.index];
oTxt.innerHTML=arrTXT[this.index];
for(var i=0;i<aLi.length;i++){
aLi[i].className='';
}
this.className='active';
num=this.index;
}
aLi[i].onmouseover=function(){
this.getElementsByTagName('span')[0].style.display='block';
}
aLi[i].onmouseout=function(){
this.getElementsByTagName('span')[0].style.display='none';
}
}

}
</script>
</head>
<body>
<div class="wrap" id="wrap">
<p><img src="img/pic_bg.png" /></p>
<img src="img/1.jpg" id='img' />
<a href="javascript:;" id="prev"><img src="img/prev.png" /></a>
<a href="javascript:;" id="next"><img src="img/next.png" /></a>
<div class="btdiv">
<div class="pic_intro" id="txt">春天--等闲识得东风面，万紫千红总是春</div>
<ul id="ul1">
<li class="active"><span><img src="img/1.jpg" /></span></li>
<li><span><img src="img/2.jpg" /></span></li>
<li><span><img src="img/3.jpg" /></span></li>
<li><span><img src="img/4.jpg" /></span></li>
</ul>
</div>
</div>
</body>
</html>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航