JavaScript 23 轮播效果

最新推荐文章于 2024-01-04 11:44:36 发布

zhiying_08

最新推荐文章于 2024-01-04 11:44:36 发布

阅读量199

点赞数

本文链接：https://blog.csdn.net/zhiying_08/article/details/78637622

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.swipe{
width: 800px;
height: 400px;
margin: 50px auto;
overflow: hidden;
position: relative;

}
.container{
width: 4800px;
height: 400px;
position: absolute;
left: 0;
/*transition: all 1s ease-in-out;*/
}
.slide{
float: left;
width: 800px;
height: 100%;
text-align: center;
line-height: 400px;
font-size: 100px;
color: white;
background: cyan;
}
</style>
</head>
<body>

<div class="swipe">

<div class="container">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">1</div>
</div>
</div>
<script type="text/javascript">
var conDiv=document.getElementsByClassName("container")[0];
var dx=0;
function move(){
dx-=5;
if(dx%800==0){
//每次偏完一整张暂时清除计数器
clearInterval(timer);
//延迟一定时间后再次开启
setTimeout(function(){
timer=setInterval(move,20);
},2000);
}
if(dx<=-3200){
dx=0;
}

conDiv.style.left=dx+"px"
// if(index<=-5){
// index=0;
// }
}
var timer=setInterval(move,20);

</script>

</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhiying_08

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 23 轮播效果

*{margin: 0;padding: 0;}.swipe{width: 800px;height: 400px;margin: 50px auto;overflow: hidden;position: relative;}.container{width: 4800px;height: 400px;position: absolute
复制链接

扫一扫