简单轮播图的实现
现在一些网站上都会有轮播图的出现,对于我们看见的种类也有很多,说明自己对轮播图实现的思路也需要有一些掌握,今天就来看一下轮播图,并理清一下自己的思路
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
vertical-align: top;
}
.box {
width: 730px;
height: 454px;
margin: 100px auto;
border: 1px solid #ccc;
padding: 5px;
}
.inner {
width: 730px;
height: 454px;
position: relative;
overflow: hidden;
}
ul {
width: 1000%;
position: absolute;
}
li {
float: left;
}
.square {
position: absolute;
right: 10px;
bottom: 10px;
}
span {
display: inline-block;
width: 20px;
height: 20px;
background-color: white;
color: black;
text-align: center;
line-height: 20px;
cursor: pointer;
}
span.current {
color: #fff;
background-color: orangered;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<ul>
<li>
<a href="#"><img src="images/1.jpg" /></a>
</li>
<li>
<a href="#"><img src="images/2.jpg" /></a>
</li>
<li>
<a href="#"><img src="images/3.jpg" /></a>
</li>
<li>
<a href="#"><img src="images/4.jpg" /></a>
</li>
<li>
<a href="#"><img src="images/5.jpg" /></a>
</li>
<li>
<a href="#"><img src="images/6.jpg" /></a>
</li>
</ul>
<div class="square">
<span class="current">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</div>
</div>
<script>
var spanObjs = document.getElementsByTagName("span");
var ulObj = document.getElementsByTagName("ul")[0];
var imgWidth = document.getElementsByClassName("inner")[0].offsetWidth;
for(var i = 0; i < spanObjs.length; i++) {
spanObjs[i].setAttribute("index", i);
spanObjs[i].onmouseover = function() {
for(var j = 0; j < spanObjs.length; j++) {
spanObjs[j].className = "";
}
this.className = "current";
var index = this.getAttribute("index");
animate(ulObj,-index*imgWidth);
}
}
function animate(element,target){
clearInterval(timeId);
var timeId = setInterval(function() {
var step = 10;
var current = element.offsetLeft;
step=current<target?step:-step;
if(Math.abs(target-current)>Math.abs(step)) {
current += step;
element.style.left = current + "px";
}else{
element.style.left=target+"px";
clearInterval(timeId);
}
}, 20);
}
</script>
</body>
</html>
以上代码就是有关轮播图的实现,设计成一个函数,是为了以后其他元素对象想要进行移动时也可以进行调用,今天就到这里,也希望自己可以一天天的慢慢的提高,不怕嘲笑,加油