核心提示：仿flash的图片轮换器web小渣渣，最近在网上看了一个n年前的视屏(地址这里)照着视屏的代码参照网上的写了一波，发一篇博客记录一波 学习历程最终效果图： 最终代码如下：tuPianLunHuan.h...
仿flash的图片轮换器
web小渣渣，最近在网上看了一个n年前的视屏(地址这里)照着视屏的代码参照网上的写了一波，发一篇博客记录一波 学习历程
最终效果图：
最终代码如下：
tuPianLunHuan.html
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/tuPianLunHuan.js" type="text/javascript"></script>
<link href="css/tuPianLunHuan.css" type="text/css" rel="stylesheet">
</head>
<body>
<p id="playImages" class="play">
<ul class="big_pic">
<!--左右按钮-->
<p class="prev"></p>
<p class="next"></p>
<!--将大图片分成左右两块-->
<a class="mark_left" href="javascript：;"></a>
<a class="mark_right" href="javascript：;"></a>
<!--图片堆叠-->
<li style="z-index: 1"><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
</ul>
<p class="small_pic">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
</ul>
</p>
</p>
</body>
</html>
tuPianLunHuan.css
body{
margin: 0px;
padding: 0px;
}
ul{
margin: 0px;
padding: 0px;
}
li{
list-style: none;
}
.play{
width: 600px;
height: 550px;
border: 2px solid gray;
position: relative;
margin: 0 auto;
margin-top: 20px;
}
.big_pic{
width: 600px;
height: 400px;
position: relative;
background: snow;
overflow: hidden;
}
/*设置优先级最上面的z-index为1,其他为0， 轮播的时候只要把需要的图片优先级设为1就行了*/
.big_pic li{
width: 600px;
height: 400px;
overflow:hidden;
position: absolute;
background: black;
z-index: 0;
}
.big_pic li img{
width: 600px;
height: 400px;
position: absolute;
}
.mark_left{
width: 300px;
height: 400px;
background: orange;
position: absolute;
left: 0px;
top: 0px;
z-index: 3000;
/*隐藏，相当于display：none*/
filter: alpha(opacity:0);
opacity: 0;
}
.mark_right{
width: 300px;
height: 400px;
background: aquamarine;
position: absolute;
left: 300px;
top: 0px;
z-index: 3000;
filter: alpha(opacity:0);
opacity: 0;
}
.prev{
width: 80px;
height: 52px;
background: url(../img/btn.png) no-repeat;
position: absolute;
z-index: 3001;
top: 160px;
left: 10px;
cursor: pointer;
filter: alpha(opacity:0);
opacity: 0;
}
.next{
width: 80px;
height: 52px;
background: url(../img/btn.png) no-repeat -80px 0px;
position: absolute;
z-index: 3001;
top: 160px;
right: 10px;
cursor: pointer;
filter: alpha(opacity:0);
opacity: 0;
}
.small_pic{
width: 594px;
height: 144px;
position: relative;
top: 0;left: 0;
border: 3px solid paleturquoise;
overflow: hidden;
}
.small_pic ul{
width: 594px;
height: 144px;
position: absolute;
left: 0px;
top: 0px;
}
.small_pic li img{
width: 194px;
height: 140px;
}
.small_pic ul li{
border:2px solid paleturquoise;
width: 194px;
height: 140px;
float: left;
cursor: pointer;
filter: alpha(opacity:60);
opacity: 0.6;
}
tuPianLunHuan.js
window.onload=function(){
var oPlay=document.getElementById('playImages');
var uBig=getClass(oPlay,'big_pic')[0];
var uSmall=getClass(oPlay,'small_pic')[0];
var oPrev=getClass(oPlay,'prev')[0];
var oNext=getClass(oPlay,'next')[0];
var aLeft=getClass(oPlay,'mark_left')[0];
var aRight=getClass(oPlay,'mark_right')[0];
var oUlSmall=uSmall.getElementsByTagName('ul')[0];
var oSli=uSmall.getElementsByTagName('li');
var oBli=uBig.getElementsByTagName('li');
oUlSmall.style.width=oSli[0].offsetWidth*oSli.length+'px';
//移动到左按钮时，或者移入图片左边的区域时， 慢慢显示左边的按钮
oPrev.onmouseover=aLeft.onmouseover=function(){
move(oPrev,100,'opacity');
// move(aLeft,100,'opacity');
};
//移动到左按钮时，或者移出图片左边的区域时， 慢慢显示左边的按钮
/*oPrev.onmouserout=*/aLeft.onmouseout=function(){
move(oPrev,0,'opacity');
// move(aLeft,0,'opacity');
};
oNext.onmouseover=aRight.onmouseover=function(){
move(oNext,100,'opacity');
// move(aRight,100,'opacity');
};
/*oNext.onmouseout=*/aRight.onmouseout=function(){
move(oNext,0,'opacity');
// move(aRight,0,'opacity');
};
//第几张图片
var index=0;
//图片的优先级
var newZIndex=2;
//添加所有下面小图片的点击事件和移入移出事件
for (var i=0;i<oSli.length;i++){
oSli[i].num=i;
oSli[i].onclick=function(){
if(this.num==index) {
return;
} else{
index=this.num;
tab();
}
};
oSli[i].onmouseover=function(){
move(this,100,'opacity');
};
oSli[i].onmouseout=function(){
if(this.num!=index){
move(this,60,'opacity');
}
};
}
// 左按钮的点击事件,当最左边的时候将调到最右边
oPrev.onclick=function(){
index--;
if(index==-1){
index=oSli.length-1;
}
tab();
};
// 右按钮的点击事件,当最左边的时候将调到最左边
oNext.onclick=function(){
index++;
if(index==oBli.length){
index=0;
}
tab();
};
function tab() {
// 图片下拉显示效果
oBli[index].style.height = 0;
//把要显示的图片优先级变成最高，这样就可以覆盖之前的图片（当然这里会有一点小问题，也不想改了）
oBli[index].style.zIndex = newZIndex++;
move(oBli[index], 400, 'height');
//其他所有的small预览图片编程0.6的透明度
for (var i = 0; i < oSli.length; i++) {
move(oSli[i], 60, 'opacity');
}
//选中小图片的变成1的透明度
move(oSli[index], 100, 'opacity');
//选中后让线面的small预览图片，移动到中间（到边界时除外）
if (index == 0) {
move(oUlSmall, 0, 'left');
} else if (index == oSli.length - 1) {
move(oUlSmall, -(index - 2) * oSli[0].offsetWidth, 'left');
} else {
move(oUlSmall, -(index - 1) * oSli[0].offsetWidth, 'left');
}
};
//定时器轮播
var timer=setInterval(oNext.onclick,3000);
// 移入的时候停止轮播
oPlay.onmouseover=function(){
clearInterval(timer);
};
// 移出的时候开启定时器,开始轮播
oPlay.onmouseout=function(){
timer=setInterval(oNext.onclick,3000);
};
};
function move(obj,iTarget,name){
//保证只有一个定时器
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var cur=0;
if(name=='opacity'){
//获取非行间样式css的透明度
cur=Math.round(parseFloat(getStyle(obj,name))*100);
}else{
cur=parseInt(getStyle(obj,name));
}
// alert(name+cur);
//渐变缓冲，
var speed=(iTarget-cur)/30;
//取整
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==iTarget){
//消除定时器
clearInterval(obj.timer);
}else{
if(name=='opacity'){
// 设置透明度
obj.style.opacity=(cur+speed)/100;
obj.style.filter='alpha(opacity:'+cur+speed+')';
}else{
//这里用来设置left的
var cur2 = cur+speed;
obj.style.filter='alpha(opacity:'+cur2+')'; //兼容<=ie8
}
}
},30);
};
function getStyle(obj,name){
if(obj.currentStyle){
// runtimeStyle 运行时的样式！如果与style的属性重叠，将覆盖style的属性！
// currentStyle 指 style 和 runtimeStyle 的结合！ 通过currentStyle就可以获取
// 到通过内联或外部引用的CSS样式的值了（仅限IE）
return obj.currentStyle[name];
}else{
//要兼容FF，就得需要getComputedStyle 出马了
return getComputedStyle(obj,false)[name];
}
};
//获取class
function getClass(oParent,name){
var oArray=[];
//获取所有的标签名
var oBj=oParent.getElementsByTagName('*');
for(var i=0;i<oBj.length;i++){
//找到目标的class名
if(oBj[i].className==name){
//推到数组里面去
oArray.push(oBj[i]);
}
}
//返回数组
return oArray;
}
