一、html代码
<div class="Broadcast"><div id="ul"><img src='' class='img'>< img src='' class='img' >
< img src='' class='img' >
< img src='' class='img' >
< img src='' class='img' >
</div>
<p class="page" id="ul1">
<span></span>
< span></span>
<span><span>
<span><span>
</p>
</div>
.Broadcast{
width: rem(750);
height:rem(350);
overflow: hidden;
position: relative;
div{
width:rem(3750);
position: absolute;
display: flex;
div{
width:rem(750);
height:rem(350);
}
}
}
.page{
width: 100%;
position: absolute;
bottom: 0;
padding-right: rem(31);
text-align: right;
margin-bottom: rem(14);
span{ width:rem(15);
height: rem(15);
display: inline-block;
border:0;
border-radius:rem(10);
background: #ffffff;
margin-left: rem(11.5);
}
span:hover{
background: #F96E9D;
}
}
.img{
width:100%;
}
三、js代码
// 轮播 (使用定时器控制轮播的间隔时间)
var a = 100;
setInterval(function(){
ul.style.left = ul.offsetLeft - a +'px';
if( ul.offsetLeft < -3000){
ul.style.left = '0px'
}
},400)
