<!DOCTYPE html>
<html>
<head>
<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: 500%;
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="slider">
<div class="inner">
<ul id="box">
<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 id="bt">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
<script type="text/javascript" src = sport.js></script>
<script>
window.onload = function(){
timerone = setInterval(autoPlay,2000);
}
function $(id){
return document.getElementById(id);
}
var box = $('box');
var oli = $('bt').children;
var target = 0;
var index = 0;
var timerone = null;
function autoPlay(){
index++;
if(index>=oli.length){
index = 0;
}
if(target === -490*4){
target = 0
}else{
target-=490
}
for(var i = 0;i<oli.length;i++){
oli[i].className = '';
}
oli[index].className = 'current';
startMove(box,target,'left')
}
</script>
sport.js
function startMove(obj,target,attr){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var current = parseFloat(getStyle(obj,attr));
var speed = 0;
if(attr === 'opacity'){
speed = target-current>0?0.1:-0.1;
}else{
speed = (target - current)/10; //
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
}
if(target == current){
clearInterval(obj.timer);
}else{
if(attr === 'opacity'){
obj.style[attr] = current+speed;
}else{
obj.style[attr] = current+speed+'px';
}
}
},20)
}
//获取元素的属性
function getStyle(obj,attr){
if(window.getComputedStyle){
return window.getComputedStyle(obj,null)[attr];
}else{
return obj.currentStyle[attr];
}
}
//针对两种情况来进行一下整合
如下图
ten.gif
