<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#box{
width: 490px;
height: 170px;
margin: 100px auto;
border: 1px solid #000;
padding: 5px;
}
#img{
width: 490px;
height:170px;
position: relative;
overflow: hidden;
}
#img ul{
width: 600%;
position: absolute;
left: 0;
top: 0;
}
#img ul li{
float: left;
}
#icon{
position: absolute;
left: 700px;
top: 300px;
}
#icon span{
display: inline-block;
width: 26px;
height: 26px;
background-color: #000;
color: white;
text-align: center;
line-height: 26px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div id="img">
<ul>
<li><img src="image/01.jpg" alt=""></li>
<li><img src="image/02.jpg" alt=""></li>
<li><img src="image/03.jpg" alt=""></li>
<li><img src="image/04.jpg" alt=""></li>
<li><img src="image/05.jpg" alt=""></li>
</ul>
</div>
</div>
<div id="icon">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<script>
var box =document.getElementById("box");
var img=document.getElementById("img");
var ul=img.children[0];
var icon=document.getElementById("icon");
var span=icon.children;
var scrollWidth=img.offsetWidth;
for(var i =0;i<span.length;i++){
span[i].index=i;
span[i].οnclick=function(){
for(var j=0;j<span.length;j++){
span[j].style.background="black";
}
this.style.background="yellow";
move(ul,-this.index*scrollWidth);
}
}
function move(obj,length){
clearInterval(obj.timer);
var speed=obj.offsetLeft<length?15:-15;
obj.timer = setInterval(function() {
var result = length - obj.offsetLeft;
obj.style.left = obj.offsetLeft + speed + "px";
if(Math.abs(result) <= 15) {
obj.style.left = length + "px";
clearInterval(obj.timer);
}
},10);
}
</script>
</body>
</html>
<html>
<head>
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
#box{
width: 490px;
height: 170px;
margin: 100px auto;
border: 1px solid #000;
padding: 5px;
}
#img{
width: 490px;
height:170px;
position: relative;
overflow: hidden;
}
#img ul{
width: 600%;
position: absolute;
left: 0;
top: 0;
}
#img ul li{
float: left;
}
#icon{
position: absolute;
left: 700px;
top: 300px;
}
#icon span{
display: inline-block;
width: 26px;
height: 26px;
background-color: #000;
color: white;
text-align: center;
line-height: 26px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div id="img">
<ul>
<li><img src="image/01.jpg" alt=""></li>
<li><img src="image/02.jpg" alt=""></li>
<li><img src="image/03.jpg" alt=""></li>
<li><img src="image/04.jpg" alt=""></li>
<li><img src="image/05.jpg" alt=""></li>
</ul>
</div>
</div>
<div id="icon">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<script>
var box =document.getElementById("box");
var img=document.getElementById("img");
var ul=img.children[0];
var icon=document.getElementById("icon");
var span=icon.children;
var scrollWidth=img.offsetWidth;
for(var i =0;i<span.length;i++){
span[i].index=i;
span[i].οnclick=function(){
for(var j=0;j<span.length;j++){
span[j].style.background="black";
}
this.style.background="yellow";
move(ul,-this.index*scrollWidth);
}
}
function move(obj,length){
clearInterval(obj.timer);
var speed=obj.offsetLeft<length?15:-15;
obj.timer = setInterval(function() {
var result = length - obj.offsetLeft;
obj.style.left = obj.offsetLeft + speed + "px";
if(Math.abs(result) <= 15) {
obj.style.left = length + "px";
clearInterval(obj.timer);
}
},10);
}
</script>
</body>
</html>
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
