左右焦点轮播图
<!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 {
490px;
height: 170px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
overflow: hidden;
}
.ad {
490px;
height: 170px;
overflow: hidden;
position: relative;
}
#box img {
490px;
}
.ad ol {
position: absolute;
right: 10px;
bottom: 10px;
}
.ad ol li {
20px;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
text-align: center;
background: #fff;
float: left;
margin-right: 10px;
cursor: pointer;
_display: inline;
}
.ad ol li.current {
background: yellow;
}
.ad ul li {
float: left;
}
.ad ul {
position: absolute;
top: 0;
2940px;
}
.ad ul li.current {
display: block;
}
#arr {
display: none;
}
#arr span {
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 >
<div class="ad">
<ul >
<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 >></span></div>
</div>
</body>
</html>
<script src="../../../public.js"></script>
<script src="../sport2.js"></script>
<script type="text/javascript">
var target = 0;
$id("box").onmouseover = function(){
$id("arr").style.display = "block";
}
$id("box").onmouseout = function(){
$id("arr").style.display = "none";
}
$id("left").onclick = function(){
if( target == 0 ){
target = 0;
}else{
target += 490;
}
startMove( $id("imgs") , target , "left" );
}
$id("right").onclick = function(){
if( target == -4*490 ){
target = -4*490
}else{
target -= 490;
}
startMove( $id("imgs") , target , "left" );
}
</script>