html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图1</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/轮播图.css" />
<script type="text/javascript" src="../js/basics.js"></script>
<script type="text/javascript" src="../js/轮播图2.js"></script>
</head>
<body>
<div id="wrap">
<div id='box'>
<ul class="clear" id="list">
<li>
<img src="../img/1504579720226.jpg" />
</li>
<li>
<img src="../img/1504579756992.jpg" />
</li>
<li>
<img src="../img/1504579814977.jpg" />
</li>
<li>
<img src="../img/1504579832741.jpg" />
</li>
<li>
<img src="../img/1504579877857.jpg" />
</li>
</ul>
</div>
<div id="aside">
<ul>
<li>
<img src="../img/1504579720226.jpg" />
</li>
<li>
<img src="../img/1504579756992.jpg" />
</li>
<li>
<img src="../img/1504579814977.jpg" />
</li>
<li>
<img src="../img/1504579832741.jpg" />
</li>
<li>
<img src="../img/1504579877857.jpg" />
</li>
</ul>
</div>
</div>
</body>
</html>
CSS部分
#wrap{
width: 900px;
margin: 100px auto 0;
position: relative;
}
#box{
width: 900px;
height: 400px;
position:absolute;
top:0;
left: 0;
border: solid 2px palegreen;
overflow: hidden;
}
#box ul{
position: absolute;
}
#box ul li{
height: 400px;
width: 900px;
}
#box ul li img{
height: 400px;
width: 900px;
float: left;
}
#aside{
width:100px;
position:absolute;
right: 0;
top: 38px;
}
#aside ul li{
margin: 5px 0;
cursor: pointer;
}
#aside ul li img{
height: 60px;
width: 100px;
display: block;
opacity: 0.5;
filter: aplha(opacity = 50);
}
#aside ul .liNone{
display: none;
}
js部分
window.onload = function(){
var box = $('box');
var oUl = $('list');
var lis = oUl.getElementsByTagName('li');
oUl.appendChild(lis[0].cloneNode(true)); //克隆第一个节点
oUl.style.height = lis[0].offsetHeight*lis.length + 'px'; //设置ul的高度
var liHeight = lis[0].offsetHeight; //单个li的高度
var asideDiv = $('aside'); //旁边的图标栏
var asideLis = asideDiv.getElementsByTagName('li');
var i = 0;
var timer = setInterval(function(){
i++; //定时器一开,则滑动到第二张图片
move();
},1000);
function move(){
if(i == lis.length){
oUl.style.top = 0 +'px';
i = 1; //从第二张图片开始滑动
}
animate(oUl,'top',liHeight*-i); //自己封装的方法用于改变指定元素的指定属性
if(i == asideLis.length){ //设置侧边栏图片透明度
animateOpacity(asideLis[0].children[0],100);
for(var j = 1; j < asideLis.length;j++){
animateOpacity(asideLis[j].children[0],30);
}
// animateOpacity(asideLis[0].children[0],100,function(){ //这种方法就是一闪而过
// animateOpacity(asideLis[0].children[0],30);
// });
}else{
animateOpacity(asideLis[i].children[0],100);
for(var j = 0; j < asideLis.length;j++){
if(j != i){
animateOpacity(asideLis[j].children[0],30);
}
}
// animateOpacity(asideLis[i].children[0],100,function(){
// animateOpacity(asideLis[i].children[0],30);
// });
}
}
//鼠标在小图标上停住,离开继续动画
for(var k = 0; k < asideLis.length;k++){
asideLis[k].index = k;
asideLis[k].onmouseover = function(){
i = this.index;
move();
clearInterval(timer);
}
asideLis[k].onmouseout= function(){
timer = setInterval(function(){
i++; //定时器一开,则滑动到第二张图片
move();
},1000);
}
}
//鼠标滑到大图片上时停住
box.onmouseover = function(){
clearInterval(timer);
};
box.onmouseout = function(){
timer = setInterval(function(){
i++; //定时器一开,则滑动到第二张图片
move();
},1000);
};
};
第一种轮播图:
思路:
1、添加一个容器wrap
2、将ul设置为相对定位
3、将所有的图片垂直摆放
4、克隆ul的第一子节点(目的:当图片滑动到原来的最后一张时,不直接弹回第一张图片)加到ul的最后一个节点上并将所有li的高度和设置成ul的高度
5、设置一个定时器每隔指定时间,将ul的top值更新为 -i(用于记录li的个数)*单个li的高度(负号表示向下).当i的值等于li的个数时,将ul的top值设为0px,将i的值设置为1(既从第二张图片开始继续轮播,因为最后一张(克隆的)和第一张图片是一样的)
以上的ul和li都是box中的
6、旁边的侧边栏(小图片)在图片轮播过程中,改变其对应的透明度。需注意,当i的值等于asideLis的长度时,改变第一个小图标的透明度
7、鼠标划入任意小图片,通过改变i的值,使i的值等于事件发生的位置,从而跳转到相应的大图。滑出时,再次开启定时器(若:小图标和大图在统一div中,并且给他们的包含块设置了移入删除定时器,移出添加定时器,则需注意当鼠标移除小图标时,是否会触发容器的鼠标事件)