滚动轮播
2017-12-11 本文已影响0人
leesession
<css>
ul,li{
list-style: none;
margin: 0;
padding: 0;
}
li{
height: 28px;
line-height: 28px;
text-align: center;
}
ul{
position: relative;
float: left;
width: 80%;
}
.container{
width: 90%;
margin: 0 auto;
height: 28px;
overflow: hidden;
background-color: #ddd;
content: "";
display: block;
clear: both;
}
#news_left{
float: left;
width: 20%;
background-color: #e4393c;
height: 28px;
}
<html>
<!--滚动轮播-->
<div class="container">
<div id="news_left"></div>
<ul id="newShow">
</ul>
</div>
<js>
var news=[
"first about cd subway 10",
"second about computer",
"third about my future",
"first about cd subway 10"
],
html="",
height=28,
index= 1,
layout=3000,
animated=500;
for(var n of news){//i=0;i<news.length;i++
html+=`<li>${n}</li>`
}
$("#newShow").html(html);
function upDown(){
setInterval(function(){
$("#newShow").animate({
top:-index*height+"px"
},animated,function(){
if(index==3){
index=0;
$("#newShow").css({
top:-index*height+"px"
})
}
index++;
})
},layout)
}
upDown()
