简单的无缝轮播
通过appendTo实现的无缝轮播效果,存在的弊端是无法控制轮播元素的位置。这种轮播效果不建议作为banner轮播。第一次发布文章求大神多指点。
无缝轮播
直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<title></title>
<style type="text/css" >
.box{
width: 600px;
height: 400px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.box ul{
width: 500%;
height: 100%;
position: absolute;
top: 0;
left: -600px;
}
.box li{
width: calc(100% / 5);
height: 100%;
float: left;
}
.button>div{
float: left;
width: 100px;
height: 60px;
margin-right: 30px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box">
<ul class="clearfix">
<li style="background-color: red;">5555</li>
<li style="background-color: yellow;">1111</li>
<li style="background-color: blue;">2222</li>
<li style="background-color: pink;">3333</li>
<li style="background-color: black;">4444</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function bannerMove(){
var $boxwidth = $(".box").width();
var movelenght = -parseFloat($boxwidth) + "px";
$(".box ul").css({
left:0
});
$(".box li").eq(0).appendTo($(".box ul"));
$(".box ul").stop(true).animate({
left:movelenght
});
}
var click = setInterval(bannerMove,2000)
</script>
</body>
</html>