目前只放代码，欢迎大家优化改进。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
</head>
<body>
<!--<iframe src="plan.html" width="100%" height="100%" style="height: 100vh;">
</iframe>-->
<style>
.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;
}
</style>
<div class="expert_news">
<h1>精彩瞬间</h1>
<div id="demo" class="my_mq">
<div class="qimo">
<div id="demo1">
<ul id="mq_list" class="mq_list">
<li>
<a href="" target="_blank"><img src="737.jpg" /></a>
</li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<div id="mq_left" class="mq_left"></div>
<div id="mq_right" class="mq_right"></div>
</div>
<!--------------news无间隙循环滚动js代码------------->
<script type="text/javascript">
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);
}
</script>
</body>
</html>
记得自己修改jquery的链接，自己在添加li以及a的链接以及图片
网友评论