<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,
ul,
ol,
li,
img {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 490px;
height: 170px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
overflow: hidden;
}
.ad {
width: 490px;
height: 170px;
overflow: hidden;
position: relative;
}
#box img {
width: 490px;
}
.ad ul li {
float: left;
}
.ad ul {
position: absolute;
top: 0;
width: 2450px;
}
.ad ul li.current {
display: block;
}
#arr {
display: block;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div id="box" class="all">
<div class="ad">
<ul id="imgs">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
</ul>
</div>
<div id="arr"><span id="left"><</span><span id="right">></span></div>
</div>
</body>
</html>
<script src="sport.js"></script>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
var oLeft = $("left");
var oRight = $("right");
var oUl = $("imgs");
var target = 0;
oRight.onclick = function() {
if (target === -490*4) {
target === -490*4;
} else {
target -= 490;
}
// 执行运动函数
startMove(oUl,target,"left");
}
oLeft.onclick = function() {
if (target === 0) {
target === 0;
} else {
target += 490;
}
// 执行运动函数
startMove(oUl,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];
}
}
//针对两种情况来进行一下整合
如图
nine.gif
网友评论