|
不多说，直接上代码
*{margin: 0; padding: 0;}
ul,ol{list-style:none;}
img {
display: block; /* 清除图片底册 3像素缝隙*/
}
.slider {
width: 490px;
height: 170px;
border:1px solid #ccc;
margin: 100px auto;
padding:5px;
position: relative;
}
.inner {
width: 100%;
height: 100%;
background-color: pink;
position: relative;
/*overflow: hidden*/
}
.inner ul {
width: 1000%;
position: absolute;
top: 0;
left: 0;
}
.inner ul li {
float: left;
}
.slider ol {
position: absolute;
left: 50%;
margin-left: -80px;
bottom: 10px;
}
.slider ol li{
float: left;
width: 18px;
height: 18px;
background-color: #fff;
margin-right: 10px;
text-align: center;
line-height: 18px;
cursor: pointer;
}
.slider ol li.current {
background-color: orange;
}
1
2
3
4
5
var jd = document.getElementById("jd");
var ul = jd.children[0].children[0];
var ol = jd.children[1];
var olLis = ol.children;
var leader = 0, target = 0; // target 目标位置
for(var i=0; i
leader = leader + (target - leader ) / 10;
ul.style.left = leader + "px";
},30);
其中，上面代码段中，实现轮播的主要思想是让轮播图片进行浮动即float: left;并且设其宽度为 width: 1000%;这里的宽度根据有几个li而定； 让其父元素ul进行固定定位即position: absolute;其宽度是100%，并且会设置超出隐藏即overflow: hidden；不难想到ul的父元素也是需要相对定位的即 position: relative;上面就是通过浮动实现图片轮播的原理，下面将简述切换效果速度有快到慢的原理，代码如下：
setInterval(function() {
leader = leader + (target - leader ) / 10;
ul.style.left = leader + "px";
},30);
这部分代码便是控制速度有快到慢进行切换的核心代码
|