这次我们来探讨一下关于各种轮播函数以及各种相关css的细节。我按照书写过程中出的预想偏差来写。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div,ul,li{
margin:0;
padding:0;
list-style: none;
border: 0;
}
body{
background: #f0f8ff;
}
#box{
margin:10px auto;
position: relative;
/*position内容，relative和absolute自行学习!!!!!!!absolute很重要*/
width: 502px;
height: 202px;
/*此处多的两个边框属性用于.list-image的border*/
cursor: pointer;
border: 8px solid #fff;
}
.list-image{
width: 500px;
height: 200px;
border: 1px solid purple;
position: relative;
}
.list-image li{
/* width: 500px;
height: 200px;*/
/*font-size: 0;*/
}
</style>
</head>
<body>
<div id="box">
<ul class="list-image">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="list-number">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
<script type="text/javascript">
var oBox=document.getElementById("box");
var oUl=oBox.getElementsByTagName("ul");
var oImage=oUl[0].getElementsByTagName("li");
</script>
</html>
问题来了，我明明在开头加了margin:0,padding:0，这个时候的li之间为什么还是会有白色边距？？？？我们来加一句话：
alert(oImage[1].offsetHeight);//输出203
也就是说，我的图片虽然设置的是200px的高度，但是li的高度确是203px，而我们在开头给li设置的margin:0,padding:0也没有生效！！
那么解决方法是什么呢？上方代码中注释的font-size:0和直接给li设置width:500和height:200均可以解决这个问题。答主能力有限，暂时无法说明为什么。
接下来我往.list-image上加了一句话。
.list-image{
width: 500px;
height: 200px;
border: 1px solid purple;
position: relative;
overflow: hidden;
}
超过边界的东西都直接被隐藏了起来，之后我加上了这么一句.
.list-image li{
width: 500px;
height: 200px;
position: absolute;
}
即是说，一个position:absolute改变了这么多。这又是为什么呢？
后来居上
如果有多个元素在同一位置设置了position：absolute的话，当然这种清况是很少见的，这种情况会遵循浏览器的渲染顺序表现，也就是后来者居上的意思。
position之absolute定位深入理解
之后我们再写
.list-image li{
width: 500px;
height: 200px;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.list-image li.current{
opacity: 1;
filter: alpha(opacity=1);
/*filter是兼容写法，兼容IE8以下的*/
}
又回到了正确的状态。（其实本人也不是很懂，先留坑，待更）
- opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的
- visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
- display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样
接下来修改样式。
.list-number li{
float: left;
color: #fff;
background: #f60;
width: 20px;
height: 20px;
border-radius: 20px;
cursor: pointer;
margin-right: 5px;
text-align: center;
font:10px/20px Arial;
opacity: 0.7;
filter: alpha(opacity=70);
}
.list-number li.current{
opacity: 1;
filter: alpha(opacity=100);
}
至此，基本布局完成，接下来我们用JS实现淡入淡出的轮播效果。
接下来，我们先实现普通的图片切换。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div,ul,li{
margin:0;
padding:0;
list-style: none;
border: 0;
}
body{
background: #f0f8ff;
}
#box{
margin:10px auto;
position: relative;
/*position内容，relative和absolute自行学习!!!!!!!absolute很重要*/
width: 502px;
height: 202px;
/*此处多的两个边框属性用于.list-image的border*/
border: 8px solid #fff;
}
.list-image{
width: 500px;
height: 200px;
border: 1px solid purple;
position: relative;
overflow: hidden;
}
.list-image li{
width: 500px;
height: 200px;
position: absolute;
opacity: 0;
filter: alpha(opacity=0);
}
.list-image li.current{
opacity: 1;
filter: alpha(opacity=100);
/*filter是兼容写法，兼容IE8以下的*/
}
.list-number{
position: absolute;
right: 0;
bottom: 5px;
}
.list-number li{
float: left;
color: #fff;
background: #f60;
width: 20px;
height: 20px;
border-radius: 20px;
cursor: pointer;
margin-right: 5px;
text-align: center;
font:10px/20px Arial;
opacity: 0.7;
filter: alpha(opacity=70);
}
.list-number li.current{
opacity: 1;
filter: alpha(opacity=100);
}
</style>
</head>
<body>
<div id="box">
<ul class="list-image">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="list-number">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
<script type="text/javascript">
var oBox=document.getElementById("box");
var oUl=oBox.getElementsByTagName("ul");
var oImage=oUl[0].getElementsByTagName("li");
var oNumber=oUl[1].getElementsByTagName("li");
var index=0;
for(var i=0;i<oNumber.length;i++){
oNumber[i].index=i;
oNumber[i].onmouseover=function(){
show(this.index);
}
}
function show(x){
for(var i=0;i<oNumber.length;i++){
oNumber[i].className="";
oImage[i].className="";
}
oNumber[x].className="current";
oImage[x].className="current";
}
</script>
</html>
我们在JS中直接使用了current样式，因此切换的特别突兀，所以我们在这里进行修改使它变成淡入淡出的。
首先，我们添加全局变量 var timer=null;接下来，修改show(x)函数
function show(x){
for(var i=0;i<oNumber.length;i++){
oNumber[i].className="";
// oImage[i].className="";
//我们发现以上的""的css元素已经被我们改变，因此这种方法不行。
oImage[i].style["opacity"]=0;
//上面这句等同于 oImage[i].style.opacity=0;
oImage[i].style.filter="alpha(opacity=0)";
}
oNumber[x].className="current";
// oImage[x].className="current";
//注释掉上方，开始我们不突兀的淡入淡出轮播
var alpha=0;
//变量记录透明度变化(淡入淡出实现的根本)
clearInterval(timer);
//停止计时器，自行体会，主要用于切换之中
timer=setInterval(function(){
alpha+=2;
alpha>100 && (alpha=100);
oImage[x].style.opacity=alpha/100;
alpha==100 && clearInterval(timer);
},20);
}
之后，我们来实现自动的淡入淡出轮播。首先，我们添加自动计时器。
var play_timer=null;
接着，添加记录当前第几章图片的index。
var index=0;
同时，我们要在show(x)最后一句上加个
index=x;消除某些bug。
然后添加自动函数。
oBox.onmouseover=function(){
clearInterval(play_timer);
}
function Auto(){
play_timer=setInterval(function(){
if(index<oNumber.length-1){
index++;
}else{
index=0;
}
show(index);
},2000);
}
oBox.onmouseout=function(){
Auto();
}
Auto();
网友评论