JS文字轮播效果

DIV代码部分

News！

• 111111111111111111111111111111111111111111111111

• 222

• 2333

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);

}

基本上就可以实现简单的轮播效果了