jQuery图文左右滚动代码(箭头控制)
以上只是部份演示图片，详细可以付费购买。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery图文左右滚动代码(箭头控制)</title>
<link type="text/css" rel="stylesheet" href="images/zzsc.css">
<script type="text/javascript" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/js/jquery1.4.2.js"></script>
</head>
<body>
<div id="contentE" class="area">
<div class="cons">
<div class="con" style="left: 0px;"><!--调整第一个显示位置请修改"left:0px;的值" -->
<div class="left wdA">
<!--青春偶像-->
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="https://www.niuniubbs.com" target="_blank"><img alt="青春偶像" src="images/tt16.gif" width="66" height="20"></a></span><a href="https://www.niuniubbs.com" target="_blank"><img src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/zzbz.gif" width="47" height="20"></a></h2>
<div class="info"><a style="COLOR: http://www.niuniubbs.com" href="https://www.niuniubbs.com" target="_blank">你的青春你做主</a></div>
<div class="pic"><a href="https://www.niuniubbs.com" target="_blank"><img alt="飞一般爱情小说" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/01.jpg" width="120" height="165"></a><span><strong><a href="https://www.niuniubbs.com" target="_blank">飞一般爱情小说</a></strong></span><span class="label"><i></i><em>击败所有同类青春片</em></span></div>
<div class="line"></div>
<div class="list12">
<ul>
<li><a href="https://www.niuniubbs.com" target="_blank">美丽传说</a> <font color="#666666"> 高分港剧</font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">北极光</a> <font color="#666666"> 蓝正龙耍帅</font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">春蚕织梦</a> <font color="#666666">年代偶像剧</font></li>
</ul>
</div>
<div class="more"><a href="https://www.niuniubbs.com" target="_blank">更多>></a></div></div></div>
<!--伊人剧场-->
<div class="left wdC">
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="https://www.niuniubbs.com" target="_blank"><img alt="伊人剧场" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/tt18.gif" width="66" height="20"></a></span></h2>
<div class="info"><a style="COLOR: https://www.niuniubbs.com" href="https://www.niuniubbs.com" target="_blank">女人最爱 男人回避</a></div>
<div class="pic"><a href="https://www.niuniubbs.com" target="_blank"><img alt="咕咕是一只猫" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/02.jpg" width="120" height="165"></a><span><strong><a href="https://www.niuniubbs.com" target="_blank">咕咕是一只猫</a></strong></span><span class="label"><i></i><em>催人泪下的真事改编</em></span></div>
<div class="line"></div>
<div class="list12">
<ul>
<li><a href="https://www.niuniubbs.com" target="_blank">春草</a> <font color="#666666">林妙可登荧屏</font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">萍踪侠影</a> <font color="#666666">稚嫩范冰冰</font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">幸福的完美</a> <font color="#666666">印小天</font></li>
</ul>
</div>
<div class="more"><a href="https://www.niuniubbs.com" target="_blank">更多>></a></div></div></div>
<!--家庭情感-->
<div class="left wdE">
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="https://www.niuniubbs.com" target="_blank"><img alt="家庭情感" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/tt20.gif" width="66" height="20"></a></span><a href="https://www.niuniubbs.com" target="_blank"><img src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/zzbz.gif" width="47" height="20"></a></h2>
<div class="info"><a style="COLOR: 8455c7" href="https://www.niuniubbs.com" target="_blank">爱恨情仇 家长里短</a></div>
<div class="pic"><a href="https://www.niuniubbs.com" target="_blank"><img alt="爱有来生" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/03.jpg" width="120" height="165"></a><span><strong><a href="https://www.niuniubbs.com" target="_blank">爱有来生</a></strong></span><span class="label"><i></i><em>俞飞鸿筹备多年情感作</em></span></div>
<div class="line"></div>
<div class="list12">
<ul>
<li><a href="https://www.niuniubbs.com" target="_blank">小姨多鹤</a> <font color="666666">孙俪姜文</font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">笑着活下去</a> <font color="666666">杨幂主演</font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">天伦劫</a> <font color="#666666">战争中的家庭</font></li>
</ul>
</div>
<div class="more"><a href="https://www.niuniubbs.com" target="_blank">更多>></a></div></div></div>
<!--悬疑谍战-->
<div class="left wdH">
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="https://www.niuniubbs.com" target="_blank"><img alt="悬疑谍战" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/tt23.gif" width="66" height="20"></a></span></h2>
<div class="info"><a style="COLOR: #828181" href="#" target="_blank">生于60年 永远不Out</a></div>
<div class="pic"><a href="https://www.niuniubbs.com" target="_blank"><img alt="救命" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/04.jpg" width="120" height="165"></a><span><strong><a href="https://www.niuniubbs.com" target="_blank">救命</a></strong></span><span class="label"><i></i><em>“鬼后”李心洁惊悚</em></span></div>
<div class="line"></div>
<div class="list12">
<ul>
<li><a href="https://www.niuniubbs.com" target="_blank">誓言</a> <font color="#666666">钟镇涛演公安</font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">血玲珑</a> <font color="#666666">王姬母爱爆棚</font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">谈判专家</a> <font color="#666666">欧阳震华</font></li>
</ul>
</div>
<div class="more"><a href="https://www.niuniubbs.com" target="_blank">更多>></a></div></div></div>
<!--军事战争-->
<div class="left wdG">
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="https://www.niuniubbs.com" target="_blank"><img alt="军事战争" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/tt22.gif" width="66" height="20"></a></span><a href="https://www.niuniubbs.com" target="_blank"><img alt="" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/zzbz.gif" width="47" height="20"></a></h2>
<div class="info"><a style="COLOR: #6a815e" href="#" target="_blank">男人世界的刀光剑影</a></div>
<div class="pic"><a href="https://www.niuniubbs.com" target="_blank"><img alt="罗马，不设防的城市" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/12.jpg" width="120" height="165"></a><span><strong><a href="https://www.niuniubbs.com" target="_blank">罗马，不设防的城市</a></strong></span><span class="label"><i></i><em>大师费里尼编剧作品</em></span></div>
<div class="line"></div>
<div class="list12">
<ul>
<li><a href="https://www.niuniubbs.com" target="_blank">洪湖赤卫队</a> <font color="#666666">经典翻拍</font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">投名状</a> <font color="#666666">四大巨星主演</font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">勇者无敌</a> <font color="#666666">媲美潜伏</font></li>
</ul>
</div>
<div class="more"><a href="https://www.niuniubbs.com" target="_blank">更多>></a></div></div></div>
<!--白领剧场-->
<div class="left wdB">
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="https://www.niuniubbs.com" target="_blank"><img alt="白领剧场" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/tt17.gif" width="66" height="20"></a></span><a href="https://www.niuniubbs.com" target="_blank"><img alt="" src="images/ppbz.jpg" width="55" height="12"></a></h2>
<div class="info"><a style="COLOR: #638aa0" href="#" target="_blank">人人都是杜拉拉 </a></div>
<div class="pic"><a href="https://www.niuniubbs.com" target="_blank"><img alt="神经侠侣" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/11.jpg" width="120" height="165"></a><span><strong><a href="https://www.niuniubbs.com" target="_blank">神经侠侣</a></strong></span><span class="label"><i></i><em>陈奕迅+容祖儿</em></span></div>
<div class="line"></div>
<div class="list12">
<ul>
<li><a href="https://www.niuniubbs.com" target="_blank">溏心风暴</a> <font color="#666666">港剧新经典 </font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">OK公司</a> <font color="#666666">老剧笑料百出 </font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">万事如意</a> <font color="#666666">编辑部故事 </font></li>
</ul>
</div>
<div class="more"><a href="https://www.niuniubbs.com" target="_blank">更多>></a></div></div></div>
<!--精英剧场-->
<div class="left wdD">
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="https://www.niuniubbs.com" target="_blank"><img alt="精英剧场" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/tt19.gif" width="66" height="20"></a></span></h2>
<div class="info"><a style="COLOR: #4894c7" href="#" target="_blank">精英智商大考验</a></div>
<div class="pic"><a href="https://www.niuniubbs.com" target="_blank"><img alt="可可西里" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/10.jpg" width="120" height="165"></a><span><strong><a href="https://www.niuniubbs.com" target="_blank">可可西里</a></strong></span><span class="label"><i></i><em>评价最高的陆川作品</em></span></div>
<div class="line"></div>
<div class="list12">
<ul>
<li><a href="https://www.niuniubbs.com" target="_blank">上海王</a> <font color="#666666">袁立大气演绎</font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">上海滩</a> <font color="#666666">经典百看不厌</font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">法证先锋1</a> <font color="#666666">港剧精品</font></li>
</ul>
</div>
<div class="more"><a href="https://www.niuniubbs.com" target="_blank">更多>></a></div></div></div>
<!--古装武侠-->
<div class="left wdF">
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="https://www.niuniubbs.com" target="_blank"><img alt="古装武侠" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/tt21.gif" width="66" height="20"></a></span></h2>
<div class="info"><a style="COLOR: #9e7d44" href="#" target="_blank">有人的地方就有江湖</a></div>
<div class="pic"><a href="https://www.niuniubbs.com" target="_blank"><img alt="刀剑笑" src="//xcdn.php.cn/js/ads/jQuery图文左右滚动代码(箭头控制)/images/09.jpg" width="120" height="165"></a><span><strong><a href="https://www.niuniubbs.com" target="_blank">刀剑笑</a></strong></span><span class="label"><i></i><em>林青霞与刘天王经典</em></span></div>
<div class="line"></div>
<div class="list12">
<ul>
<li><a href="https://www.niuniubbs.com" target="_blank">大醉侠</a> <font color="#666666">赵文卓杨恭如</font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">风云必胜 </a><font color="#666666">柔情何润东</font></li>
<li><a href="https://www.niuniubbs.com" target="_blank">肥姐挂帅</a> <font color="#666666">怀念沈殿霞</font></li>
</ul>
</div>
<div class="more"><a href="https://www.niuniubbs.com" target="_blank">更多>></a></div></div></div>
</div>
</div>
<div class="btns"><a href="javascript:void(0)" class="up"></a><a href="javascript:void(0)" class="down"></a></div>
</div>
<script type="text/javascript">
jQuery(function(jq){
var rr = jq('#contentE');
var conr = rr.find('div.con'),
conr0 = conr,
btnWr = rr.find('> div.btns'),
btnPr = btnWr.find('a.up'),
btnNr = btnWr.find('a.down');
var lisr = conr.find('.left');
conr.find(".bord").hover(function(){
jq(this).addClass("bgBord");
},function(){
jq(this).removeClass("bgBord");
});
var pnumr = 6, numr = lisr.length;
if(numr <= pnumr)return;
var owr = lisr.offsetLeft - lisr.offsetLeft,
idxArear = ,
idxr = 0;
function updateNum(n){
if (n > idxArear || n < idxArear) {return;}
btnPr[((n == 0)?'add':'remove') + 'Class']('uN');
btnNr[((n == idxArear)?'add':'remove') + 'Class']('dN');
idxr = n;
conr.stop().animate({left: -n * owr},300);
}
btnPr.click(function(){
updateNum(idxr - 1);
return false;
});
btnNr.click(function(){
updateNum(idxr + 1);
return false;
});
});
</script>
</div>
<div style="text-align:center;clear:both">
<p>来源：<a href="https://www.niuniubbs.com" target="_blank">牛牛论坛</a></p>
</div>
</body>
</html>
以上代码中的图片和JS，请下载到自己网站目录中使用！
这个行，我来试试
页:
[1]