JS文字轮播效果
DIV代码部分
<div class="expert_news">
<p>News！</p>
<div id="demo" class="qimo8">
<div class="qimo">
<div id="demo1">
<ul id="mq_list" class="mq_list">
<li>
<a href="" target="_blank">111111111111111111111111111111111111111111111111</a>
</li>
<li>
<a href="" target="_blank">222</a>
</li>
<li>
<a href="" target="_blank">2333</a>
</li>
<!--复制2次-->
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
</div>
CSS样式部分
.expert_news {
width: 878px;
height: 50px;
background: url(http://image.huawei.com/tiny-lts/v1/images/0ca72258c9837293f4f1_16x16.png) no-repeat 20px 18px #f5f5f5;
margin-top: 25px;
border: 1px solid #dedede
}
.expert_news p {
float: left;
font-size: 14px;
color: #ca2023;
padding: 0px 0 0 45px
}
.qimo8 {
overflow: hidden;
width: 750px;
margin-left: 15px;
float: left
}
.qimo8 .qimo {
/*width:99999999px;*/
width: 8000%;
height: 50px;
}
.qimo8 .qimo div {
float: left;
}
.qimo8 .qimo ul {
float: left;
height: 50px;
overflow: hidden;
zoom: 1;
margin-top: 0px;
margin-bottom: 0px;
}
.qimo8 .qimo ul li {
float: left;
margin-left: 40px;
line-height: 50px;
padding-left: 5px;
font-family: Arial;
color: #333;
font-size: 13px;
list-style: none;
}
.qimo8 .qimo li:hover {
color: #ca2023
}
.qimo8 .qimo ul li a {
color: #333;
}
.qimo8 .qimo ul li a:hover {
color: #ca2023;
}
JS部分
var demo = document.getElementById("demo");
var demo1 = document.getElementById("demo1");
var demo2 = document.getElementById("demo2");
demo2.innerHTML = document.getElementById("demo1").innerHTML;
function Marquee() {
if(demo.scrollLeft - demo2.offsetWidth >= 0) {
demo.scrollLeft -= demo1.offsetWidth;
debugger;
} else {
demo.scrollLeft++;
console.log(demo.scrollLeft);
}
}
var myvar = setInterval(Marquee, 50);
demo.onmouseout = function() {
myvar = setInterval(Marquee, 50);
}
demo.onmouseover = function() {
clearInterval(myvar);
}
基本上就可以实现简单的轮播效果了
