同样的需要自己添加链接以及图片在li中，优化就交给你了
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<style>.zzn_share{width:1200px;margin-top:40px;margin-bottom:20px;margin-left:-40px; overflow:hidden;position:relative; }
.zzn_share 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 { width:1190px; height: 130px; position: relative; margin-top:20px; margin-bottom:20px;margin-left:10px;z-index:9;float:left}
.mq_con { width: 800px; width:1150px; height:130px; position: relative; margin-left:20px; }
.mq_list { width: 300%; height: 100%; position: absolute; margin: 0; padding: 0; list-style: none; }
.mq_list li {float:left; width: 208px;height:130px;text-align: center; display:block; position:relative;
background: url(http://hi3ms-image.huawei.com/hi/staticimages/hi3msg/images/2017/1102/16/59fad9ae95bcf.png) no-repeat;margin-left:10px}
.mq_list li span{float:left;text-align:left;width:255px;padding:4px 10px 0 10px}
.mq_list li h3{float:left;font-size:14px;}
.mq_list li h4{float:left;font-size:12px;color:#666;font-weight:normal;}
.mq_left, .mq_right { position: absolute; top: 40px; left: 0px; 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: -24px 0; }
</style>
<div class="zzn_share">
<h1>精彩瞬间</h1>
<div class="my_mq">
<div id="mq_con" class="mq_con">
<ul id="mq_list" class="mq_list" >
<li><a href="" target="_blank"><img src="org.jpg"/></a></li>
</ul>
</div>
<div id="mq_left" class="mq_left"></div>
<div id="mq_right" class="mq_right"></div>
</div>
</div>
<script>
var mqCon; //外部框
var mqList; //滚动内容
var mqTimer ; //计时器
var mqLeft = 0; //左边距
var mqStep = 2; //滚动步长(PX)
var mqStep1 = 170; //控件按下时的步长
var mqDirec = 1; //滚动方向,左:-1 右:1
var isCtl = 0; //是否触发左右控件
function mqRun() {
mqStop();
mqTimer = setInterval(function(){
//如果触发左右控件则加速
mqStep_ = isCtl == 1 ? mqStep1 : mqStep;
if ( mqDirec == 1 ) {
mqLeft += mqStep_;
} else {
mqLeft -= mqStep_;
}
//移动到指定位置
mqList.css({ left: mqLeft });
//左边滚动的最大值
var maxLeft = mqCon.width() - mqList.width();
if ( mqLeft > 0 ) {
//向右滚动到尽头
mqLeft = 0;
if ( isCtl == 1 ) {
//如果控件按下了, 则不再滚动
return;
} else {
//改变方向
mqDirec = -1;
}
} else if ( mqLeft < maxLeft ) {
//向左滚动到尽头
mqLeft = maxLeft;
if ( isCtl == 1 ) {
return;
} else {
mqDirec = 1;
}
}
},100)
}
function mqStop(){
clearInterval( mqTimer );
}
$().ready(function() {
//页面初始化
mqCon = $('#mq_con');
mqList = $('#mq_list');
mqCon.css({'overflow':'hidden'}); //隐藏超出项目
var mq_width = mqList.children('li').size() * mqList.children('li').eq(0).width(); //计算出内部滚动条的实际宽度
mqList.width( mq_width ); //设置内部宽度
//如果内部宽度比外部宽度小则不需要滚动
if ( mq_width > mqCon.width() ) {
mqRun();//开始滚动
//绑定事件
mqList.hover(function(){
mqStop();
},function(){
mqRun();
});
$('#mq_left').mousedown(function(){
//向右滚动
mqDirec = 1;
isCtl = 1;
});
$('#mq_right').mousedown(function(){
//向左滚动
mqDirec = -1;
isCtl = 1;
});
$('#mq_left,#mq_right').mouseup(function(){
isCtl = 0;
});
}
});
</script>
</body>
</html>
