经验分享程序开发文档资料数据资源其它资源

jQuery箭头控制图文左右滚动代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery箭头控制图文左右滚动代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery箭头控制图文左右滚动代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery箭头控制图文左右滚动代码</title>
<link type="text/css" rel="stylesheet" href="css/zzsc.css">
<script type="text/javascript" src="js/jquery1.4.2.js"></script>
</head>

<body>
<div>
<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="#" target="_blank"><img alt="青春偶像" src="images/tt16.gif" width="66" height="20"></a></span><a href="#" target="_blank"><img src="images/zzbz.gif" width="47" height="20"></a></h2>
<div class="info"><a style="COLOR: #75a503" href="#" target="_blank">你的青春你做主</a></div>
<div class="pic"><a href="#" target="_blank"><img alt="飞一般爱情小说" src="images/01.jpg" width="120" height="165"></a><span><strong><a href="#" 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="#" target="_blank">美丽传说</a> <font color="#666666">　高分港剧</font></li>
<li><a href="#" target="_blank">北极光</a> <font color="#666666">　蓝正龙耍帅</font></li>
<li><a href="#" target="_blank">春蚕织梦</a> <font color="#666666">年代偶像剧</font></li>
</ul>
</div>
<div class="more"><a href="#" target="_blank">更多&gt;&gt;</a></div></div></div>
<!--伊人剧场-->
<div class="left wdC">
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="#" target="_blank"><img alt="伊人剧场" src="images/tt18.gif" width="66" height="20"></a></span></h2>
<div class="info"><a style="COLOR: #be49b7" href="#" target="_blank">女人最爱 男人回避</a></div>
<div class="pic"><a href="#" target="_blank"><img alt="咕咕是一只猫" src="images/02.jpg" width="120" height="165"></a><span><strong><a href="#" 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="#" target="_blank">春草</a> 　<font color="#666666">林妙可登荧屏</font></li>
<li><a href="#" target="_blank">萍踪侠影</a> <font color="#666666">稚嫩范冰冰</font></li>
<li><a href="#" target="_blank">幸福的完美</a> 　<font color="#666666">印小天</font></li>
</ul>
</div>
<div class="more"><a href="#" target="_blank">更多&gt;&gt;</a></div></div></div>
<!--家庭情感-->
<div class="left wdE">
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="#" target="_blank"><img alt="家庭情感" src="images/tt20.gif" width="66" height="20"></a></span><a href="#" target="_blank"><img src="images/zzbz.gif" width="47" height="20"></a></h2>
<div class="info"><a style="COLOR: #8455c7" href="#" target="_blank">爱恨情仇 家长里短</a></div>
<div class="pic"><a href="#" target="_blank"><img alt="爱有来生" src="images/03.jpg" width="120" height="165"></a><span><strong><a href="#" 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="#" target="_blank">小姨多鹤</a> 　<font color="#666666">孙俪姜文</font></li>
<li><a href="#" target="_blank">笑着活下去</a> <font color="#666666">杨幂主演</font></li>
<li><a href="#" target="_blank">天伦劫</a> <font color="#666666">战争中的家庭</font></li>
</ul>
</div>
<div class="more"><a href="#" target="_blank">更多&gt;&gt;</a></div></div></div>
<!--悬疑谍战-->
<div class="left wdH">
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="#" target="_blank"><img alt="悬疑谍战" src="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="#" target="_blank"><img alt="救命" src="images/04.jpg" width="120" height="165"></a><span><strong><a href="#" 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="#" target="_blank">誓言</a>　 <font color="#666666">钟镇涛演公安</font></li>
<li><a href="#" target="_blank">血玲珑</a> <font color="#666666">王姬母爱爆棚</font></li>
<li><a href="#" target="_blank">谈判专家</a>　 <font color="#666666">欧阳震华</font></li>
</ul>
</div>
<div class="more"><a href="#" target="_blank">更多&gt;&gt;</a></div></div></div>
<!--军事战争-->
<div class="left wdG">
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="#" target="_blank"><img alt="军事战争" src="images/tt22.gif" width="66" height="20"></a></span><a href="#" target="_blank"><img alt="" src="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="#" target="_blank"><img alt="罗马，不设防的城市" src="images/12.jpg" width="120" height="165"></a><span><strong><a href="#" 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="#" target="_blank">洪湖赤卫队</a> <font color="#666666">经典翻拍</font></li>
<li><a href="#" target="_blank">投名状</a> <font color="#666666">四大巨星主演</font></li>
<li><a href="#" target="_blank">勇者无敌</a> 　<font color="#666666">媲美潜伏</font></li>
</ul>
</div>
<div class="more"><a href="#" target="_blank">更多&gt;&gt;</a></div></div></div>
<!--白领剧场-->
<div class="left wdB">
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="#" target="_blank"><img alt="白领剧场" src="images/tt17.gif" width="66" height="20"></a></span><a href="#" 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="#" target="_blank"><img alt="神经侠侣" src="images/11.jpg" width="120" height="165"></a><span><strong><a href="#" 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="#" target="_blank">溏心风暴</a> <font color="#666666">港剧新经典 </font></li>
<li><a href="#" target="_blank">OK公司</a> <font color="#666666">老剧笑料百出 </font></li>
<li><a href="#" target="_blank">万事如意</a> <font color="#666666">编辑部故事 </font></li>
</ul>
</div>
<div class="more"><a href="#" target="_blank">更多&gt;&gt;</a></div></div></div>
<!--精英剧场-->
<div class="left wdD">
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="#" target="_blank"><img alt="精英剧场" src="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="#" target="_blank"><img alt="可可西里" src="images/10.jpg" width="120" height="165"></a><span><strong><a href="#" 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="#" target="_blank">上海王</a> <font color="#666666">袁立大气演绎</font></li>
<li><a href="#" target="_blank">上海滩</a> <font color="#666666">经典百看不厌</font></li>
<li><a href="#" target="_blank">法证先锋1</a> <font color="#666666">港剧精品</font></li>
</ul>
</div>
<div class="more"><a href="#" target="_blank">更多&gt;&gt;</a></div></div></div>
<!--古装武侠-->
<div class="left wdF">
<div class="tBG"></div>
<div class="bord">
<h2><span><a href="#" target="_blank"><img alt="古装武侠" src="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="#" target="_blank"><img alt="刀剑笑" src="images/09.jpg" width="120" height="165"></a><span><strong><a href="#" 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="#" target="_blank">大醉侠</a> <font color="#666666">赵文卓杨恭如</font></li>
<li><a href="#" target="_blank">风云必胜 </a><font color="#666666">柔情何润东</font></li>
<li><a href="#" target="_blank">肥姐挂帅</a> <font color="#666666">怀念沈殿霞</font></li>
</ul>
</div>
<div class="more"><a href="#" target="_blank">更多&gt;&gt;</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[0],
		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[1].offsetLeft - lisr[0].offsetLeft, 
		idxArear = [0, numr - pnumr],
		idxr = 0;
	
	function updateNum(n){
		if (n > idxArear[1] || n < idxArear[0]) {return;}
		
		btnPr[((n == 0)?'add':'remove') + 'Class']('uN');
		btnNr[((n == idxArear[1])?'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>
</body>
</html>

CSS代码(zzsc.css):

/* ȫ��CSS���� */
body{margin:0 auto;padding:0;background:#FFF;color:#666;font:12px '����';text-align:center;}
body > div{margin-right:auto;margin-left:auto;text-align:center;}
div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;}
ul,ol,li{list-style:none}
table,td,input,textarea{font-size:12px}
/* ������ɫ */
a{color:#333;text-decoration:none;}
a:hover{color:#C00;text-decoration:underline;}
/* ���� */
h2{text-align:right;}
h2 span{float:left;font-weight:bold;}
.clear,.area,.pp,.pt{zoom:1}
.show{display:block;}
.hidden{display:none;}
.pp,.pt,.list12 ul,.list14 ul,.area{width:100%;margin:0 auto;}
.pp:after,.pt:after,.area:after,.clear:after{content:".";display:block;visibility:hidden;height:0;clear:both;}
.pp{text-align:center;}
.pp img{display:block;margin:0 auto;}
/*��ͼ��ͼƬ����*/
.pp span{display:block;}
.pt{color:#666;line-height:20px;text-align:left;}
.pt div{float:left;margin:0 10px 0 0;}
/*ͼ�Ļ���*/
.pt p{clear:none}
/* ��������� */
.list14 li,.list12 li{padding:3px 0;color:#333;font-size:12px;line-height:16px;text-align:left;}
.list14 li{padding:4px 0;font-size:14px;}
/* �������� */
.left,.center,.l,.right,.r{display:inline;float:left;}
.right,.r{float:right;}
.fontArial{font-family:'Arial'}
.b{font-weight:bold;}
/* �Ӵ� */
.blank5,.blank8{height:5px;font-size:1px;}
.blank8{height:8px;}
.more{text-align:right;}
/* ���� */
.area{width:950px;}
/*ҳ������ */
li.nodot{background:none!important;padding-left:0px!important;}
/* ȥ���б�ǰ׺ */
.area{width:980px;}
/*������*/
.menuA li,#contentE .btns a{background:url(icon.gif) no-repeat}
/* E���CSS��ʽ */
#contentE .left .list12 li{background:url("bg01.gif") no-repeat 0 4px transparent;padding-left:14px;}
#channelNav{display:none;}
#contentE .pic,.same .pic,.pubFun .pp li{position:relative;}
#contentE .label{position:absolute;top:140px;left:21px;_left:2px;height:15px;width:120px;margin:0 auto;color:#FFF;line-height:14px;text-align:right;padding:3px 5px 0 0}
#contentE .label i{position:absolute;height:18px;width:120px;left:0;top:0;background:#000;filter:alpha(opacity=60);opacity:0.60;}
#contentE .label em,.same .pic .label em,.pubFun .pp .label em{margin:0;position:relative;z-index:2;color:#FFF;font:12px/14px "����";margin-right:3px;}
#contentE{width:978px;margin:20px auto 0;border:1px #E2E2E2 solid;border-top:0}
#contentE .left{width:163px;height:360px}
#contentE .bord{width:162px;height:360px;border-right:1px #E2E2E2 solid}
#contentE .left h2{height:20px;padding:8px 17px 0}
#contentE .left .info{width:127px;margin:1px auto 4px;text-align:left;line-height:20px}
#contentE .left .pic span{display:block;margin:9px auto 2px;line-height:20px}
#contentE .left .line{width:89%}
#contentE .left .list12 ul{width:131px;margin:9px auto 0}
#contentE .left .list12 li{padding-left:12px}
#contentE .left .more{padding-right:15px;line-height:22px}
#contentE .btns{position:relative;height:1px;font-size:0}
#contentE .btns a{position:absolute;background-position:0 -60px;width:14px;height:46px;top:-237px;left:0}
#contentE .btns .down{background-position:-20px -60px;left:auto;right:0}
#contentE .btns a:hover.up{background-position:0 -110px}
#contentE .btns a:hover.down{background-position:-20px -110px}
#contentE .btns .uN,#contentE .btns a:hover.uN{cursor:none;background-position:0 -160px}
#contentE .btns .dN,#contentE .btns a:hover.dN{cursor:none;background-position:-20px -160px}
#contentE .cons{width:978px;overflow:hidden;position:relative;height:360px}
#contentE .con{float:left;width:9999px;position:absolute;left:0;top:0;}
#contentE .tBG{height:7px;font-size:0;width:100%}
#contentE .wdA .tBG{background:#7FB304}
#contentE .wdA .bgBord{background:#F8FBF0}
#contentE .wdA .info{color:#7FB304}
#contentE .wdB .tBG{background:#6D92A7}
#contentE .wdB .bgBord{background:#F3F5F6}
#contentE .wdB .info{color:#638AA0}
#contentE .wdC .tBG{background:#BE49B7}
#contentE .wdC .bgBord{background:#FAF1F3}
#contentE .wdC .info{color:#BE49B7}
#contentE .wdD .tBG{background:#4894C7}
#contentE .wdD .bgBord{background:#F3F8FA}
#contentE .wdD .info{color:#4894C7}
#contentE .wdE .tBG{background:#8455C7}
#contentE .wdE .bgBord{background:#F5F2FB}
#contentE .wdE .info{color:#8455C7}
#contentE .wdF .tBG{background:#9E7D44}
#contentE .wdF .bgBord{background:#F5EFEE}
#contentE .wdF .info{color:#9E7D44}
#contentE .wdG .tBG{background:#6A815E}
#contentE .wdG .bgBord{background:#F0F4EE}
#contentE .wdG .info{color:#6A815E}
#contentE .wdH .tBG{background:#828181}
#contentE .wdH .bgBord{background:#F3F3F3}
#contentE .wdH .info{color:#828181}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
134.49 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
134.49 KB
立即下载
张伊
了解
打赏作者 鼓励作者
Html Js 滚动条
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章