<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
<style type="text/css">
* {
margin : 0;
padding : 0;
}
.wrapper {
width: 520px;
height: 280px;
/*border: 1px solid green;*/
overflow: hidden;
position: relative;
}
.content1 {
width: 520px;
height: 280px;
display: inline-block;
/*background-color: red;*/
position: absolute;
left : 0px;
top: 0;
background-image : url(./1.jpg);
}
.content2 {
width: 520px;
height: 280px;
display: inline-block;
/*background-color: green;*/
position: absolute;
left : 520px;
top: 0;
background-image : url(./2.jpg);
}
.content3 {
width: 520px;
height: 280px;
display: inline-block;
/*background-color: orange;*/
position: absolute;
left : 1040px;
top: 0;
background-image : url(./3.jpg);
}
</style>
</head>
<body>
<div class = "wrapper">
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
</div>
<script type="text/javascript">
//实现时间暂停，t单位秒 开始尝试使用后来发现没有用
// function sleep(t){
// var timestamp = new Date().getTime();
// timestamp += (t * 1000);
// while(timestamp != new Date().getTime()){}
// }
var div1 = document.getElementsByClassName('content1')[0];
var div2 = document.getElementsByClassName('content2')[0];
var div3 = document.getElementsByClassName('content3')[0];
div1.style.left = 0;
div2.style.left = '520px';
div3.style.left = '1040px';
var timer = setInterval(move, 4000);
function move(){
var timerFast = setInterval(moveFast, 10)
//滑动效果的函数
function moveFast(){
div1.style.left = parseInt(div1.style.left) - 20 + 'px';
div2.style.left = parseInt(div2.style.left) - 20 + 'px';
div3.style.left = parseInt(div3.style.left) - 20 + 'px';
//当切换轮播图的时候停止
if(div1.style.left == "-520px"){
div1.style.left = '1040px';
clearInterval(timerFast);
}
if(div2.style.left == '-520px'){
div2.style.left = '1040px';
clearInterval(timerFast);
}
if(div3.style.left == "-520px"){
div3.style.left = '1040px';
clearInterval(timerFast);
}
}
}
</script>
</body>
</html>
第一次尝试写有点冗余
368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
