目前只放代码,欢迎大家优化改进。
.expert_news {
width: 1200px;
margin-top: 40px;
margin-bottom: 20px;
margin-left: -40px;
position: relative;
height: 220px;
}
.expert_news h1 {
font-size: 24px;
color: #eb1c24;
background: url(http://hi3ms-image.huawei.com/hi/staticimages/hi3msf/images/2017/0309/09/58c0ab665e16c.png) 1px no-repeat;
padding-left: 55px;
}
.my_mq {
overflow: hidden;
width: 1125px;
height: 130px;
margin-left: 15px;
float: left;
position: relative;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 40px;
z-index: 9;
}
.my_mq .qimo {
width: 8000%;
height: 130px;
}
.my_mq .qimo div {
float: left;
}
.my_mq .qimo ul {
float: left;
height: 130px;
overflow: hidden;
zoom: 1;
margin-top: 0px;
margin-bottom: 0px;
}
.my_mq .qimo ul li {
float: left;
margin-left: 5px;
line-height: 50px;
padding-left: 5px;
font-family: Arial;
color: #333;
font-size: 13px;
list-style: none;
}
.my_mq .qimo li:hover {
color: #ca2023
}
.my_mq .qimo ul li a {
color: #333;
}
.my_mq .qimo ul li a:hover {
color: #ca2023;
}
.mq_left,
.mq_right {
position: absolute;
top: 96px;
left: 16px;
width: 24px;
height: 31px;
cursor: pointer;
background: url(http://hi3ms-image.huawei.com/hi/data/uploads//dm/hi3mse/uploads/2016/0426/15/571f120059653.png) no-repeat 0px 0px;
}
.mq_right {
left: auto;
right: 0px;
background-position: -30px 2px;
z-index: 10;
}
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;
} else {
demo.scrollLeft++;
console.log(demo.scrollLeft);
}
}
$('#mq_left').mousedown(function() {
demo.scrollLeft += 1000;
});
$('#mq_right').mousedown(function() {
demo.scrollLeft += -1000;
});
var myvar = setInterval(Marquee, 50);
demo.onmouseout = function() {
myvar = setInterval(Marquee, 50);
}
demo.onmouseover = function() {
clearInterval(myvar);
}
记得自己修改jquery的链接,自己在添加li以及a的链接以及图片