以下代码是最基本的banner图切换效果，是js写的，兼容各大浏览器哦~~~~
效果图为：
代码为：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{ padding:0; margin:0;}
body{ padding:0; margin:0; background:url(banner--img/bg.jpg) no-repeat center 200px #e9fedd; font-family:'微软雅黑';}
#wrap{ width:480px; height:480px; margin:100px auto; border:5px solid #fff; border-radius:10px; position:relative; background:#FFb;}
.pic{ width:480px; height:480px;}
#wrap p,#wrap span{ width:480px; height:30px; position:absolute; background:#000; opacity:0.4; color:#fff; text-align:center; line-height:30px; left:0;}
#wrap p{ bottom:0;}
#wrap span{ top:0;}
#wrap a{ width:40px; height:40px; text-align:center; line-height:40px; font-size:30px; color:#fff; position:absolute; top:220px; background:#000; opacity:0.3; text-decoration:none;}
#wrap a:hover{ opacity:0.8;}
#prev{ left:0;}
#next{ right:0;}
ul{position:absolute;padding-top:10px; left:180px; bottom:-30px;}
ul li{ width:20px; height:20px; border-radius:10px; float:left; background:#a4e380; list-style:none; margin-right:10px; cursor:pointer; position:relative;}
.active{ background:#66F;}
ul li div{ width:100px; height:100px; position:absolute;top:-100px; left:-40px; display:none;}
ul li div img{ width:100px; height:100px;}
</style>
<script type="text/javascript">
window.onload = function(){
var oWrap = document.getElementById('wrap');
var aImg = oWrap.getElementsByTagName('img')[0];
var aSpan = oWrap.getElementsByTagName('span')[0];
var aTxt = oWrap.getElementsByTagName('p')[0];
var oPrev = document.getElementById('prev');
var oNext = document.getElementById('next');
var aList = oWrap.getElementsByTagName('ul')[0];
var aLi = oWrap.getElementsByTagName('li');
var aDiv = oWrap.getElementsByTagName('div');
//数组加载图片
var arrImg = ['banner--img/01.jpg','banner--img/02.jpg','banner--img/03.jpg','banner--img/04.jpg'];
var arrTxt = ['这是第一张图片','这是第二张图片','这是第三张图片','这是第四张图片'];
var arrPic = ['banner--img/01.png','banner--img/02.png','banner--img/03.png','banner--img/04.png'];
var num =0;
//数据初始化
function show(){
aSpan.innerHTML = num+1+'/'+arrImg.length;
aImg.src = arrImg[num];
aTxt.innerHTML = arrTxt[num];
};
show();
//加载小圆点的数量
for(var i=0;i<arrImg.length;i++){
aList.innerHTML += '<li><div><img src ="" /></div></li>';
};
aLi[num].className = 'active';
//加载鼠标经过的图片
for(var i=0;i<arrPic.length;i++){
var aPic = aList.getElementsByTagName('img');
aPic[i].src = arrPic[i];
};
function hidn(){
for(var i=0;i<aLi.length;i++){
aLi[i].className = '';
};
};
//开始执行代码
oNext.onclick = function(){
hidn();
num++;
if(num==arrImg.length){
num=0;
};
aLi[num].className = 'active';
show();
};
oPrev.onclick = function(){
hidn();
num--;
if(num==-1){
num=arrImg.length-1;
};
aLi[num].className = 'active';
show();
};
//加载鼠标经过图标
for(var i=0;i<aLi.length;i++){
aLi[i].onmouseover = function(){
this.getElementsByTagName('div')[0].style.display = 'block';
};
aLi[i].onmouseout = function(){
this.getElementsByTagName('div')[0].style.display = 'none';
};
};
//点击小圆点时的效果
for(var i=0;i<aLi.length;i++){
aLi[i].index = i;
aLi[i].onclick = function(){
hidn();
num = this.index;
aLi[num].className = 'active';
show();
};
};
};
</script>
</head>
<body>
<div id="wrap">
<a id="prev" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<img class="pic" src="" />
<span>图片数量正在计算中...</span>
<p>图片文字正在加载中...</p>
<ul></ul>
</div>
</body>
</html>
里面的图片自己找图哦。。。
795
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
