以下是 jQuery左右滚动banner代码 的示例演示效果:
部分效果截图:
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左右滚动banner代码</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--[if IE 6]>
<script type="text/javascript">
var blankImg = new Image();
blankImg.src = "images/15/95b471b54f3c8f5a8fc813e905a7a85b6004.png";
</script>
<![endif]-->
</head>
<body> <div class="Aflash">
<ul class="picUL">
<li class="picLI" id="j-focusPic">
<div class="picbox j-slider" style="left: -22310px;">
<span class="j-item">
<a target="_blank" href="#" title="《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房">
<img width="970" src="images/db508d5ecdef7c259b3ac2674cd1362b662.jpg"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【高清正片】战神重组 为战重生：《敢死队2》">
<img width="970" src="images/cda01360eaa0634a6c7277398b51dea19872.jpg" data-src="images/cda01360eaa0634a6c7277398b51dea19872.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【独家热播】《虎符传奇》更新至14集">
<img width="970" src="images/f0505e4ca9fe77f72f738acda0d4f74f5498.jpg" data-src="images/f0505e4ca9fe77f72f738acda0d4f74f5498.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【首播预告】《我怀了你的孩子》预告片激情上线">
<img width="970" src="images/9fc602fe9abfed85589a3b15a97a2c9f9657.jpg" data-src="images/9fc602fe9abfed85589a3b15a97a2c9f9657.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="盘点2012那些吓得末日都不敢来的神人">
<img width="970" src="images/a825c51f6f8ebb62e1e720aaed5d86ae5228.jpg" data-src="images/a825c51f6f8ebb62e1e720aaed5d86ae5228.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【独播动画】《刀剑神域》23:05与海外同步播出结局">
<img width="970" src="images/71d53424c710068d66966c3ffa30230f3494.jpg" data-src="images/71d53424c710068d66966c3ffa30230f3494.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【高清热播】《民兵葛二蛋》更新至20集">
<img width="970" src="images/eeb28772d70f28a4024f162783b8b79c9332.jpg" data-src="images/eeb28772d70f28a4024f162783b8b79c9332.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【高清正片】亚洲版“人皮客栈”：《惊魂游戏》">
<img width="970" src="images/1591e859234743eefe1336e8933ef7401206.jpg" data-src="images/1591e859234743eefe1336e8933ef7401206.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【足球直播】直播意甲、西甲2012收官焦点战">
<img width="970" src="images/cf6ac0688f690e86bd6e22d3a34d8d1c2047.jpg" data-src="images/cf6ac0688f690e86bd6e22d3a34d8d1c2047.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="微电影《青春不下线》发布，解冻你的青春！">
<img width="970" src="images/3d82582e4c6995e7ee60d2beb179705d1421.jpg" data-src="images/3d82582e4c6995e7ee60d2beb179705d1421.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房">
<img width="970" src="images/db508d5ecdef7c259b3ac2674cd1362b662.jpg"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【高清正片】战神重组 为战重生：《敢死队2》">
<img width="970" src="images/cda01360eaa0634a6c7277398b51dea19872.jpg" data-src="images/cda01360eaa0634a6c7277398b51dea19872.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【独家热播】《虎符传奇》更新至14集">
<img width="970" src="images/f0505e4ca9fe77f72f738acda0d4f74f5498.jpg" data-src="images/f0505e4ca9fe77f72f738acda0d4f74f5498.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【首播预告】《我怀了你的孩子》预告片激情上线">
<img width="970" src="images/9fc602fe9abfed85589a3b15a97a2c9f9657.jpg" data-src="images/9fc602fe9abfed85589a3b15a97a2c9f9657.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="盘点2012那些吓得末日都不敢来的神人">
<img width="970" src="images/a825c51f6f8ebb62e1e720aaed5d86ae5228.jpg" data-src="images/a825c51f6f8ebb62e1e720aaed5d86ae5228.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【独播动画】《刀剑神域》23:05与海外同步播出结局">
<img width="970" src="images/71d53424c710068d66966c3ffa30230f3494.jpg" data-src="images/71d53424c710068d66966c3ffa30230f3494.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【高清热播】《民兵葛二蛋》更新至20集">
<img width="970" src="images/eeb28772d70f28a4024f162783b8b79c9332.jpg" data-src="images/eeb28772d70f28a4024f162783b8b79c9332.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【高清正片】亚洲版“人皮客栈”：《惊魂游戏》">
<img width="970" src="images/1591e859234743eefe1336e8933ef7401206.jpg" data-src="images/1591e859234743eefe1336e8933ef7401206.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【足球直播】直播意甲、西甲2012收官焦点战">
<img width="970" src="images/cf6ac0688f690e86bd6e22d3a34d8d1c2047.jpg" data-src="images/cf6ac0688f690e86bd6e22d3a34d8d1c2047.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="微电影《青春不下线》发布，解冻你的青春！">
<img width="970" src="images/3d82582e4c6995e7ee60d2beb179705d1421.jpg" data-src="images/3d82582e4c6995e7ee60d2beb179705d1421.jpg" class="loading"></a></span><span class="j-item">
<a target="_blank" href="#" title="《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房">
<img width="970" src="images/db508d5ecdef7c259b3ac2674cd1362b662.jpg" data-src="images/db508d5ecdef7c259b3ac2674cd1362b662.jpg" class="loading"></a>
</span>
<span class="j-item">
<a target="_blank" href="#" title="【高清正片】战神重组 为战重生：《敢死队2》">
<img width="970" src="images/cda01360eaa0634a6c7277398b51dea19872.jpg" data-src="images/cda01360eaa0634a6c7277398b51dea19872.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【独家热播】《虎符传奇》更新至14集">
<img width="970" src="images/f0505e4ca9fe77f72f738acda0d4f74f5498.jpg" data-src="images/f0505e4ca9fe77f72f738acda0d4f74f5498.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【首播预告】《我怀了你的孩子》预告片激情上线">
<img width="970" src="images/9fc602fe9abfed85589a3b15a97a2c9f9657.jpg" data-src="images/9fc602fe9abfed85589a3b15a97a2c9f9657.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="盘点2012那些吓得末日都不敢来的神人">
<img width="970" src="images/a825c51f6f8ebb62e1e720aaed5d86ae5228.jpg" data-src="images/a825c51f6f8ebb62e1e720aaed5d86ae5228.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【独播动画】《刀剑神域》23:05与海外同步播出结局">
<img width="970" src="images/71d53424c710068d66966c3ffa30230f3494.jpg" data-src="images/71d53424c710068d66966c3ffa30230f3494.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【高清热播】《民兵葛二蛋》更新至20集">
<img width="970" src="images/eeb28772d70f28a4024f162783b8b79c9332.jpg" data-src="images/eeb28772d70f28a4024f162783b8b79c9332.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【高清正片】亚洲版“人皮客栈”：《惊魂游戏》">
<img width="970" src="images/1591e859234743eefe1336e8933ef7401206.jpg" data-src="images/1591e859234743eefe1336e8933ef7401206.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="【足球直播】直播意甲、西甲2012收官焦点战">
<img width="970" src="images/cf6ac0688f690e86bd6e22d3a34d8d1c2047.jpg" data-src="images/cf6ac0688f690e86bd6e22d3a34d8d1c2047.jpg" class="loading"></a></span>
<span class="j-item">
<a target="_blank" href="#" title="微电影《青春不下线》发布，解冻你的青春！">
<img width="970" src="images/3d82582e4c6995e7ee60d2beb179705d1421.jpg" data-src="images/3d82582e4c6995e7ee60d2beb179705d1421.jpg" class="loading"></a></span></div>
<div class="bg j-infobg" style="opacity: 0.5;"></div>
<div class="info j-info" style="display: block;">
<div class="infotxt w">
<h2><a target="_blank" href="#" title="【首播预告】《我怀了你的孩子》预告片激情上线">【首播预告】《我怀了你的孩子》预告片激情上线</a></h2>
<p><a target="_blank" href="#" title="【首播预告】《我怀了你的孩子》预告片激情上线">你是我的爸爸，也是我的情人。小女孩纠缠老男人，四角恋情玩弄了谁？乐视网开年大戏《我怀了你的孩子》1月1日震撼首播！</a></p>
</div>
</div>
<div class="info j-infocontainer" style="display:none;">
<div class="infotxt w">
<h2><a target="_blank" href="#" title="《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房">《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房</a></h2>
<p><a target="_blank" href="http://tv.letv.com/zt/styx/index.shtml" title="《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房">本剧剧情不拘泥于正史，而是分了宫廷和草莽两条线，故事庞大而人物精细，描绘出了一幅波澜壮阔的隋唐时代历史画卷。</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="#" title="【高清正片】战神重组 为战重生：《敢死队2》">【高清正片】战神重组 为战重生：《敢死队2》</a></h2>
<p><a target="_blank" href="#" title="【高清正片】战神重组 为战重生：《敢死队2》">史泰龙率一众老牌硬汉再度集结，施瓦辛格、斯坦森、李连杰，阵容更为强悍，在新成员的帮助下，敢死队员们要为死去的同伴报仇，捍卫正义。</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="#" title="【独家热播】《虎符传奇》更新至14集">【独家热播】《虎符传奇》更新至14集</a></h2>
<p><a target="_blank" href="#" title="【独家热播】《虎符传奇》更新至14集">该剧描写的是春秋战国时期四公子以及传奇女子如姬夫人之间讲诚信、重承诺，以生命的代价维护正义：不畏权势，慈悲悯弱的动人传说。</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="#" title="【首播预告】《我怀了你的孩子》预告片激情上线">【首播预告】《我怀了你的孩子》预告片激情上线</a></h2>
<p><a target="_blank" href="#" title="【首播预告】《我怀了你的孩子》预告片激情上线">你是我的爸爸，也是我的情人。小女孩纠缠老男人，四角恋情玩弄了谁？乐视网开年大戏《我怀了你的孩子》1月1日震撼首播！</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="#" title="盘点2012那些吓得末日都不敢来的神人">盘点2012那些吓得末日都不敢来的神人</a></h2>
<p><a target="_blank" href="#" title="盘点2012那些吓得末日都不敢来的神人">2012年全球最火的词儿当属“Style”，中文叫“范儿”。来吧！随我们一同领教在众“范儿”脱颖而出的“奇葩Style”！</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="#" title="【独播动画】《刀剑神域》23:05与海外同步播出结局">【独播动画】《刀剑神域》23:05与海外同步播出结局</a></h2>
<p><a target="_blank" href="#" title="【独播动画】《刀剑神域》23:05与海外同步播出结局">乐视网动漫频道独家与海外同步播出，2012最具人气新番动画《刀剑神域》第25话大结局。经历重重磨难的桐人与亚丝娜最后的战斗！</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="#" title="【高清热播】《民兵葛二蛋》更新至20集">【高清热播】《民兵葛二蛋》更新至20集</a></h2>
<p><a target="_blank" href="#" title="【高清热播】《民兵葛二蛋》更新至20集">两个农村里的小人物，在混乱的战争年代，成长的路程却大相径庭。从前的难兄难弟发展成了什么样的关系？且看黄渤高虎搞笑演绎！</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="#" title="【高清正片】亚洲版“人皮客栈”：《惊魂游戏》">【高清正片】亚洲版“人皮客栈”：《惊魂游戏》</a></h2>
<p><a target="_blank" href="#" title="【高清正片】亚洲版“人皮客栈”：《惊魂游戏》">莫小棋饰演游戏公司的职员，而胡兵饰演其男友，因种种原因两人感情出现裂痕，连环怪事由此而生，并牵涉进他人命案。</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="#" title="【足球直播】直播意甲、西甲2012收官焦点战">【足球直播】直播意甲、西甲2012收官焦点战</a></h2>
<p><a target="_blank" href="#" title="【足球直播】直播意甲、西甲2012收官焦点战">12月22日19:30，国米VS热那亚。12月23日01:00，巴拉多利德VS巴萨；3点马拉加VS皇马；3点45罗马VSAC米兰。乐视体育将三屏同步直播。</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="#" title="微电影《青春不下线》发布，解冻你的青春！">微电影《青春不下线》发布，解冻你的青春！</a></h2>
<p><a target="_blank" href="#" title="微电影《青春不下线》发布，解冻你的青春！">青春校园VS残酷现实——网游玩家真实故事改编，直击80、90后的生存囧况！</a></p>
</div>
</div>
<!--<div style="display: block; position: relative; z-index: 100; width: 110px; height: 124px; left: 10px; top: 226px;" class="path">
<a hidefocus="true" class="path-item i-menu" title="播放" href="#" target="_blank" style="cursor: pointer; position: absolute; left: 0px; top: 43px; width: 65px; height: 65px; outline: none; z-index: 102;"></a>
<a hidefocus="true" class="path-item i-ipad" title="ipad版" href="#" style="cursor: pointer; position: absolute; left: 17.5px; top: 60.5px; width: 30px; height: 30px; outline: none; z-index: 101;"></a>
<a hidefocus="true" class="path-item i-iphone" title="iphone版" href="#" target="_blank" style="cursor: pointer; position: absolute; left: 17.5px; top: 60.5px; width: 30px; height: 30px; outline: none; z-index: 101;"></a>
<a hidefocus="true" class="path-item i-tv" title="TV版" href="#" target="_blank" style="cursor: pointer; position: absolute; left: 17.5px; top: 60.5px; width: 30px; height: 30px; outline: none; z-index: 101;"></a>
<a hidefocus="true" class="path-item i-pc" title="乐视网络电视" href="#" target="_blank" style="cursor: pointer; position: absolute; left: 17.5px; top: 60.5px; width: 30px; height: 30px; outline: none; z-index: 101;"></a>
</div>-->
</li>
</ul>
<div class="infobtn" id="j-focusBtns">
<div class="pre on-1"><a href="javascript:void(0)"></a><i style="display:none"></i></div>
<div class="smalpic j-container">
<div class="smallbox j-slider" style="left: 0px;">
<a class="j-item" href="#" title="《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房" target="_blank">
<img src="images/70a978cbc6a32efda5b1a4a0ce79bff1505.jpg" alt="《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房">
<b></b></a>
<a class="j-item" href="#" title="【高清正片】战神重组 为战重生：《敢死队2》" target="_blank">
<img src="images/3db3b6829c4d92879bd779a47b6d295b9517.jpg" alt="【高清正片】战神重组 为战重生：《敢死队2》">
<b></b></a>
<a class="j-item" href="#" title="【独家热播】《虎符传奇》更新至14集" target="_blank">
<img src="images/9e0f213dc0b2539c5bc4c278b1e5944a7349.jpg" alt="【独家热播】《虎符传奇》更新至14集">
<b></b></a>
<a class="j-item on" href="#" title="【首播预告】《我怀了你的孩子》预告片激情上线" target="_blank">
<img src="images/8723655c77e137e85b94c7a48475ac547016.jpg" alt="【首播预告】《我怀了你的孩子》预告片激情上线">
<b></b></a>
<a class="j-item" href="#" title="盘点2012那些吓得末日都不敢来的神人" target="_blank">
<img src="images/5b035206fbaf15c6bd0724d9c4a4296a7097.jpg" alt="盘点2012那些吓得末日都不敢来的神人">
<b></b></a>
<a class="j-item" href="#" title="【独播动画】《刀剑神域》23:05与海外同步播出结局" target="_blank">
<img src="images/662fda3e374751934e10953d99e0265e4384.jpg" alt="【独播动画】《刀剑神域》23:05与海外同步播出结局">
<b></b></a>
<a class="j-item" href="#" title="【高清热播】《民兵葛二蛋》更新至20集" target="_blank">
<img src="images/20dc66194903de30aad5f37af9524071801.jpg" alt="【高清热播】《民兵葛二蛋》更新至20集">
<b></b></a>
<a class="j-item" href="#" title="【高清正片】亚洲版“人皮客栈”：《惊魂游戏》" target="_blank">
<img src="images/52d72d1c5affd250250209f140b45f5a5237.jpg" alt="【高清正片】亚洲版“人皮客栈”：《惊魂游戏》">
<b></b></a>
<a class="j-item" href="#" title="【足球直播】直播意甲、西甲2012收官焦点战" target="_blank">
<img src="images/c5c0440889c9315c9480e3c24a39bb892178.jpg" alt="【足球直播】直播意甲、西甲2012收官焦点战">
<b></b></a>
<a class="j-item" href="#" title="微电影《青春不下线》发布，解冻你的青春！" target="_blank">
<img src="images/65823e383d7916b861527a37647cb89d5631.jpg" alt="微电影《青春不下线》发布，解冻你的青春！">
<b></b></a> </div>
</div>
<div class="next"><a href="javascript:void(0)"></a><i style="display:none"></i></div>
</div>
</div>
<script type="text/javascript" src="js/zzsc.js"></script>
</body>
</html>
JS代码(zzsc.js):
(function(window){
if (!window.yuuk){
window.yuuk ={
}
}
yuuk.using = function(){
var a = arguments,o = this,i = 0,j,d,arg,isExist;
arg = a[0],isExist = a[1];
if (arg && arg.indexOf(".")){
d = arg.split(".");
for (j = (d[0] == "yuuk") ? 1:0;
j < d.length;
j++){
if (!o[d[j]] && isExist){
return null}
o[d[j]] = o[d[j]] ||{
}
;
o = o[d[j]]}
}
else{
o[arg] = o[arg] ||{
}
}
return o}
;
}
)(window);
(function(a){
$.extend(a,{
lazyloadImg:function(g,i){
var f ={
threshold:0,failurelimit:0,event:"scroll",effect:"show",loadingEffect:false,container:window}
;
var c = $(g);
var b = [];
c.filter("img").each(function(){
var k = this;
k.loaded = false;
var m = $(k);
if (m.attr("data-src") == undefined){
m.attr("data-src",m.attr("src"));
m.removeAttr("src")}
if (f.loadingEffect){
var l = "./images/blank.png";
if (m.attr("src") != l){
m.attr("src",l);
m.addClass("loading")}
}
}
);
}
}
)}
)(yuuk.using("Utils"));
(function(a){
$.extend(a,{
timer:function(g,f){
var d ={
name:"TIMER#0000",interval:1000,immediately:true}
;
if (f){
$.extend(d,f)}
if (typeof g !== "function"){
throw new Error("您没有为Timer指定有效的执行函数。")}
var e = null;
var c = 0;
var b ={
start:function(){
if (e != null){
clearInterval(e);
e = null}
var h = function(){
c += 1;
g(b)}
;
e = setInterval(h,d.interval);
if (d.immediately){
h()}
}
,stop:function(){
if (e != null){
clearInterval(e);
e = null}
}
,getCounter:function(){
return c}
}
;
return b}
,gotoAnchor:yuuk.using("Utils").gotoAnchor}
)}
)(yuuk.using("Common"));
(function(a){
a.Slider = function(g,f){
var d ={
stepSize:1,clipSize:1,sliderFinder:".j-silder",sliderItemFinder:".j-item",sliderItemWidth:0,sliderItemCount:0,mode:"default",goMode:"left",onInit:function(s,r){
}
,onSlidBegin:function(s,r){
}
,onSlidEnd:function(s,r){
}
}
;
if (f){
$.extend(d,f)}
var i = $(g);
var m = $(d.sliderFinder,i);
var q = $(d.sliderItemFinder,i);
var b = d.sliderItemCount > 0 ? d.sliderItemCount:q.size();
var k = d.sliderItemWidth > 0 ? d.sliderItemWidth:q.outerWidth(true);
var e = false;
var l = false;
var j = 0;
var c = function(r){
switch (d.goMode){
case "left":return{
left:r * k * -1}
;
case "top":return{
top:r * k * -1}
;
case "marginLeft":return{
marginLeft:r * k * -1}
;
case "marginTop":return{
marginTop:r * k * -1}
;
default:return{
left:r * k * -1}
}
}
;
if (b > d.clipSize){
if (d.mode === "round"){
m.append(q.clone(true));
m.append(q.clone(true));
e = true;
l = true;
q = $(d.sliderItemFinder,i)}
else{
var h = 0;
var n = b - d.clipSize;
if (j >= n){
j = n;
l = false}
else{
l = true}
if (j <= h){
j = 0;
e = false}
else{
e = true}
}
}
else{
e = false;
l = false}
m.find("img[data-src]").each(function(){
var r = this;
r.loaded = false;
var s = $(r).attr("src","./images/blank.png").addClass("loading").one("do-load",function(){
if (r.loaded){
return}
$("<img />").bind("load",function(){
s.attr("src",s.attr("data-src"));
r.loaded = true}
).attr("src",s.attr("data-src"))}
)}
);
var o = null;
var p ={
gotoIndex:function(r){
d.onSlidBegin(p,{
index:r}
);
m.animate(c(r),{
queue:false,complete:function(){
j = r;
clearTimeout(o);
o = setTimeout(function(){
d.onSlidEnd(p,{
index:r}
)}
,100)}
}
);
for (var s = r;
s < r + d.stepSize;
s++){
q.eq(s).find("img[data-src]").trigger("do-load")}
}
,gotoNextStep:function(){
var s = j + d.stepSize;
if (d.mode === "round"){
var r = b * 3 - d.clipSize;
if (s > r){
j = j - b;
m.css(c(j));
s = j + d.stepSize}
}
else{
var r = b - d.clipSize;
if (s >= r){
s = r;
l = false}
else{
l = true}
e = true}
this.gotoIndex(s);
return l}
,gotoPreStep:function(){
var r = j - d.stepSize;
if (d.mode === "round"){
if (r < 0){
j = j + b;
m.css(c(j));
r = j - d.stepSize}
}
else{
if (r <= 0){
r = 0;
e = false}
else{
e = true}
l = true}
this.gotoIndex(r);
return e}
,isPreEnable:function(){
return e}
,isNextEnable:function(){
return l}
}
;
p.gotoIndex(0);
d.onInit(p,{
}
);
return p}
;
a.slider = a.Slider}
)(yuuk.using("UI"));
(function(c){
var d = yuuk.using("UI");
var a = yuuk.using("Common");
(function(g,e,h){
function f(i,k){
var j = this;
if (!g(i)[0]){
throw "Path Container Error"}
if (! (j instanceof f)){
return new f(i,k)}
g.extend(j.options ={
}
,f.Options,k);
j.container = g(i);
j._init()}
g.extend(f,{
Options:{
size:[110,124],xy:[10,226],zIndex:100,menuSize:[65,65],itemSize:[30,30],modCls:"path",itemCls:"path-item",duration:100,rate:100}
}
);
g.extend(f.prototype,{
_init:function(){
var j = this,i = j.container,l = j.options,m = l.itemCls,p = l.zIndex,o = l.itemSize,k = l.menuSize,n = j.xy ={
menu:l.button[0][0]}
;
i.hide().addClass(l.modCls).css({
position:"relative",zIndex:p,width:l.size[0],height:l.size[1],left:l.xy[0],top:l.xy[1]}
).show();
n.button = [(k[0] - o[0]) / 2 + n.menu[0],(k[1] - o[1]) / 2 + n.menu[1]];
j.buttons = [];
g.each(l.button,function(r,q){
var t = r === 0,s = g('<a hideFocus="true"></a>').appendTo(i).attr({
"class":m + " " + q[1],title:q[2],href:q[3],target:q[4] || "_blank",hideFocus:"true"}
).css({
cursor:"pointer",position:"absolute",left:(t ? n.menu:n.button)[0],top:(t ? n.menu:n.button)[1],width:t ? k[0]:o[0],height:t ? k[1]:o[1],outline:"none",zIndex:p + (t ? 2:1)}
);
if (r === 0){
j.menu = s}
else{
j.buttons.push(s)}
}
);
j._attach()}
,_attach:function(){
var k = this,l = k.options,o,i,n,m,j;
if (k._task){
return k}
m = k.xy.menu;
j = k.xy.button;
i = l.duration;
n = k.buttons.length * i;
k._task = function(p){
g(k.buttons).each(function(r,q){
p = p === true;
var s = l.button[r + 1][0];
g(q).stop().animate({
left:p ? m[0] + s[0]:j[0],top:p ? m[1] + s[1]:j[1]}
,i + (p ? l.rate * r:(n - l.rate * r)))}
)}
;
k.menu.mouseenter(function(p){
clearTimeout(o);
k._task(true)}
);
k.container.mouseleave(function(p){
clearTimeout(o);
o = setTimeout(k._task,100)}
);
return k}
,notify:function(k,i){
var j;
if (k === "menu" && i && g(i)[0] && (j ={
}
)){
g.each(["href","target"],function(l,m){
j[m] = g(i).attr(m)}
);
g(this.menu).attr(j)}
return this}
}
);
e.using("UI").Path = f}
)(jQuery,yuuk);
(function b(){
var e = d.Path($("<div></div>").appendTo("#j-focusPic").hide(),{
button:[[[0,43],"i-menu","播放","#"],[[20,-41],"i-ipad","ipad版","http://www.97zzw.com"],[[60,-23],"i-iphone","iphone版","http://www.97zzw.com"],[[76,14],"i-tv","TV版","http://www.97zzw.com"],[[68,51],"i-pc","乐视网络电视","http://www.97zzw.com"]]}
);
var j = d.slider("#j-focusPic",{
sliderFinder:".j-slider",sliderItemFinder:".j-item",sliderItemWidth:970,sliderItemCount:10,stepSize:1,clipSize:1,mode:"round",onSlidBegin:function(o,n){
$("#j-focusPic .j-info").hide();
$("#j-focusPic .j-infobg").css("opacity",0)}
,onSlidEnd:function(p,n){
var o = [];
o.push("<div class='infotxt w'>");
o.push($("#j-focusPic .j-infocontainer>.infotxt").eq(n.index % 10).html());
o.push("</div>");
$("#j-focusPic .j-info").html(o.join("")).show();
$("#j-focusPic .j-infobg").animate({
opacity:0.5}
)}
}
);
var h = d.slider("#j-focusBtns",{
sliderFinder:".j-slider",sliderItemFinder:".j-item",sliderItemWidth:70,sliderItemCount:10,clipSize:5,stepSize:5,onSlidBegin:function(o,n){
$("#j-focusBtns .pre").addClass("on-1");
$("#j-focusBtns .next").addClass("on-2")}
,onSlidEnd:function(o,n){
if (o.isPreEnable()){
$("#j-focusBtns .pre").removeClass("on-1")}
else{
$("#j-focusBtns .pre").addClass("on-1")}
if (o.isNextEnable()){
$("#j-focusBtns .next").removeClass("on-2")}
else{
$("#j-focusBtns .next").addClass("on-2")}
}
}
);
var g = $("#j-focusBtns .j-item");
var i = $("#j-focusBtns .pre,#j-focusBtns .next");
var l = 0;
var k = g.eq(l);
k.siblings().removeClass("on");
k.addClass("on");
var m = a.timer(function(){
l += 1;
l = l % 10;
var n = g.eq(l);
n.siblings().removeClass("on");
n.addClass("on");
j.gotoNextStep();
e.notify("menu",n);
if (l == 0){
h.gotoPreStep()}
if (l == 5){
h.gotoNextStep()}
}
,{
interval:5000,immediately:false}
);
e.notify("menu",g.eq(l));
m.start();
$(".Aflash").mouseover(function(n){
m.stop()}
).mouseout(function(n){
m.start()}
);
g.each(function(o,n){
var p = $(n);
p.mouseover(function(q){
if (o == l){
return}
l = o;
j.gotoIndex(l);
p.siblings().removeClass("on");
p.addClass("on");
e.notify("menu",g.eq(l))}
)}
);
var f = null;
i.mouseover(function(o){
var n = $(this);
if (n.hasClass("on-1") || n.hasClass("on-2")){
return}
clearTimeout(f);
var p = $(this).find("i");
f = setTimeout(function(){
p.fadeIn("fast")}
,200)}
).mouseout(function(n){
clearTimeout(f);
var o = $(this).find("i");
f = setTimeout(function(){
o.fadeOut("fast")}
,200)}
).click(function(o){
var n = $(this);
if (n.hasClass("on-1") || n.hasClass("on-2")){
return}
if ($(this).hasClass("pre")){
h.gotoPreStep()}
else{
h.gotoNextStep()}
}
)}
)();
d.slider("#j-hitshow",{
sliderFinder:".j-slider",sliderItemFinder:".w128",sliderItemWidth:137,sliderItemCount:14,stepSize:7,clipSize:7,onInit:function(f,e){
$("#j-hitshow .a1").click(function(g){
if (!$(this).hasClass("on-1")){
return}
f.gotoPreStep()}
);
$("#j-hitshow .a2").click(function(g){
if (!$(this).hasClass("on-2")){
return}
f.gotoNextStep()}
)}
,onSlidBegin:function(){
$("#j-hitshow .a1").removeClass("on-1");
$("#j-hitshow .a2").removeClass("on-2")}
,onSlidEnd:function(f,e){
if (f.isPreEnable()){
$("#j-hitshow .a1").addClass("on-1")}
else{
$("#j-hitshow .a1").removeClass("on-1")}
if (f.isNextEnable()){
$("#j-hitshow .a2").addClass("on-2")}
else{
$("#j-hitshow .a2").removeClass("on-2")}
}
}
);
}
)(yuuk.using("Plugin"));
CSS代码(zzsc.css):
body{margin:0;color:#6C6C6C;font:12px/21px "宋体";background:#333;}
ul,ol,li,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,input{margin:0;padding:0;}
img{border:none;}
li{list-style:none;}
img{vertical-align:middle;}
div,ul,dl{zoom:1;}
div:after,ul:after,dl:after{content:"";display:block;clear:both;height:0;visibility:hidden;}
h2,h3,h1{font-size:14px;}
a{color:#fff;text-decoration:none}
a:hover{color:#fff;text-decoration:underline}
.Aflash{width:970px;margin:0 auto;background:url(../images/titbg.gif) repeat-x left top;position:relative;overflow:hidden;}
.smallbox b,.pre a,.next a{background:url(../images/doc.png) no-repeat -1000px -1000px;}
.picUL{margin-top:13px;}
.picLI{position:relative;width:970px;overflow:hidden;}
.picbox{width:10000px;}
.picbox small{display:block;background:url(http://i0.letvimg.com/img/201112/06/home/tv.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://i0.letvimg.com/img/201112/06/home/tv.png');position:absolute;left:-8px;top:-7px;width:110px;height:110px;}
.picbox .tv{display:none;}
.picbox img{height:350px;}
.picLI .bg{background:#000000;opacity:0.5;filter:Alpha(opacity=50);position:absolute;left:0;top:255px;height:95px;width:970px;}
.picLI .info{position:absolute;left:0;top:255px;height:88px;overflow:hidden;width:500px;padding-left:20px;margin-top:7px;}
.picLI h2{font-size:16px;font-family:"微软雅黑";height:35px;line-height:35px;overflow:hidden;}
.picLI p{line-height:20px;}
.picLI a:hover{text-decoration:none;}
.pre,.next{float:left;margin-top:28px;position:relative;width:30px;z-index:11;}
.pre i,.next i{background:url(../images/tipN.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/tipN.png');display:block;width:25px;height:24px;position:absolute;left:20px;top:2px;display:none;}
.next i{background:url(../images/tipP.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/tipP.png');left:-20px;}
.smalpic{float:left;width:350px;display:block;zoom:1;overflow:hidden;padding:10px 5px 0 5px;}
.pre a{width:27px;height:26px;display:block;background-position:-84px -10px;}
.next a{width:27px;height:26px;display:block;background-position:-123px -10px;}
.pre i{display:block;}
.infobtn{position:absolute;right:10px;top:280px;width:420px;}
.smallbox{width:10000px;}
.smallbox img{width:55px;height:55px;border:3px solid #999999;}
.smallbox a{display:block;float:left;width:70px;text-align:center;outline:none;position:relative;z-index:10;}
.smallbox a b{display:none;}
.smallbox a.on img{border:3px solid #c21f22;}
.smallbox a.on b{display:block;}
.smallbox b{background-position:-60px -10px;display:block;zoom:1;overflow:hidden;width:10px;height:8px;position:absolute;left:30px;top:-7px;}
#j-focusPic{position:relative;overflow:hidden;width:970px;height:350px;}
#j-focusPic .j-slider{position:absolute;width:1000000px;}
#j-focusPic .j-item{display:block;float:left;width:970px;height:350px;overflow:hidden;}
#j-focusPic .j-info{height:85px;}
#j-focusPic.j-infocontainer{display:none;}
#j-focusBtns .j-container{position:relative;height:70px;width:350px;padding:0px;padding-top:10px;}
#j-focusBtns .j-slider{position:absolute;}
#j-focusBtns .pre a,#j-focusBtns .next a{cursor:pointer;}
#j-focusBtns .on-1 a{background-position:-84px -46px;cursor:default;}
#j-focusBtns .on-2 a{background-position:-123px -46px;cursor:default;}
#j-hitshow .j-container{position:relative;width:968px;height:180px;overflow:hidden;}
#j-hitshow .j-slider{position:absolute;width:10000px;}
#j-hitshow .a1.disable{background-position:-10px -10px;cursor:default;}
#j-hitshow .a1.disable:hover{background-position:-10px -10px;}
#j-hitshow .a2.disable{background-position:-23px -10px;cursor:default;}
#j-hitshow .a2.disable:hover{background-position:-23px -10px;}
/*播放按钮css控制*/
.picLI .info{width:405px;padding:0;left:110px;}
.picLI p{height:40px;overflow:hidden;}
.path a.i-menu{background:url(../images/menu.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="(../images/menu.png");}
.path a.i-menu:hover{background:url(../images/menu1.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/menu1.png")}
.path a.i-ipad{background:url(../images/ipad.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images");}
.path a.i-ipad:hover{background:url(../images/ipad1.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/ipad1.png")}
.path a.i-iphone{background:url(../images/iphone.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/iphone.png");}
.path a.i-iphone:hover{background:url(../images/iphone1.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/iphone1.png");}
.path a.i-tv{background:url(../images/tv.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/tv.png");}
.path a.i-tv:hover{background:url(../images/tv1.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/tv1.png");}
.path a.i-pc{background:url(../images/pc.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/pc.png");}
.path a.i-pc:hover{background:url(../images/pc1.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="../images/pc1.png");}
分享到QQ
分享到微博
微信扫一扫
