不多说,直接上代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{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;
}
</style>
</head>
<body>
<div class="slider" id="jd">
<div class="inner">
<ul>
<li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
</ul>
</div>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
<script>
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<olLis.length; i++)
{
olLis[i].index = i; // 每个li 的索引号
olLis[i].onmouseover = function() {
for(var j=0;j<olLis.length;j++)
{
olLis[j].className = "";
}
this.className = "current";
target = -this.index * 490; // 目标位置 就是用当前的索引号乘以 一个盒子的宽度
}
}
setInterval(function() {
leader = leader + (target - leader ) / 10;
ul.style.left = leader + "px";
},30);
</script>
其中,上面代码段中,实现轮播的主要思想是让轮播图片进行浮动即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);
这部分代码便是控制速度有快到慢进行切换的核心代码