利用jQuery实现左右滚动banner代码



32 127 43



特效描述:利用jQuery实现 左右滚动 banner,利用jQuery实现左右滚动banner代码

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/zzsc.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>

3. HTML代码

    <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="http://51qianduan.com/jiaoben/" title="《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房">
<img width="970" src="images/db508d5ecdef7c259b3ac2674cd1362b662.jpg"></a></span>
<span class="j-item">
<a target="_blank" href="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" title="《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房">
<img width="970" src="images/db508d5ecdef7c259b3ac2674cd1362b662.jpg"></a></span>
<span class="j-item">
<a target="_blank" href="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" title="【首播预告】《我怀了你的孩子》预告片激情上线">【首播预告】《我怀了你的孩子》预告片激情上线</a></h2>
<p><a target="_blank" href="http://51qianduan.com/jiaoben/" title="【首播预告】《我怀了你的孩子》预告片激情上线">你是我的爸爸,也是我的情人。小女孩纠缠老男人,四角恋情玩弄了谁?乐视网开年大戏《我怀了你的孩子》1月1日震撼首播!</a></p>
</div>
</div>
<div class="info j-infocontainer" style="display:none;">
<div class="infotxt w">
<h2><a target="_blank" href="http://51qianduan.com/jiaoben/" title="《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房">《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房</a></h2>
<p><a target="_blank" href="http://www.51qianduan.com//zt/styx/index.shtml" title="《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房">本剧剧情不拘泥于正史,而是分了宫廷和草莽两条线,故事庞大而人物精细,描绘出了一幅波澜壮阔的隋唐时代历史画卷。</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="http://51qianduan.com/jiaoben/" title="【高清正片】战神重组 为战重生:《敢死队2》">【高清正片】战神重组 为战重生:《敢死队2》</a></h2>
<p><a target="_blank" href="http://51qianduan.com/jiaoben/" title="【高清正片】战神重组 为战重生:《敢死队2》">史泰龙率一众老牌硬汉再度集结,施瓦辛格、斯坦森、李连杰,阵容更为强悍,在新成员的帮助下,敢死队员们要为死去的同伴报仇,捍卫正义。</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="http://51qianduan.com/jiaoben/" title="【独家热播】《虎符传奇》更新至14集">【独家热播】《虎符传奇》更新至14集</a></h2>
<p><a target="_blank" href="http://51qianduan.com/jiaoben/" title="【独家热播】《虎符传奇》更新至14集">该剧描写的是春秋战国时期四公子以及传奇女子如姬夫人之间讲诚信、重承诺,以生命的代价维护正义:不畏权势,慈悲悯弱的动人传说。</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="http://51qianduan.com/jiaoben/" title="【首播预告】《我怀了你的孩子》预告片激情上线">【首播预告】《我怀了你的孩子》预告片激情上线</a></h2>
<p><a target="_blank" href="http://51qianduan.com/jiaoben/" title="【首播预告】《我怀了你的孩子》预告片激情上线">你是我的爸爸,也是我的情人。小女孩纠缠老男人,四角恋情玩弄了谁?乐视网开年大戏《我怀了你的孩子》1月1日震撼首播!</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="http://51qianduan.com/jiaoben/" title="盘点2012那些吓得末日都不敢来的神人">盘点2012那些吓得末日都不敢来的神人</a></h2>
<p><a target="_blank" href="http://51qianduan.com/jiaoben/" title="盘点2012那些吓得末日都不敢来的神人">2012年全球最火的词儿当属“Style”,中文叫“范儿”。来吧!随我们一同领教在众“范儿”脱颖而出的“奇葩Style”!</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="http://51qianduan.com/jiaoben/" title="【独播动画】《刀剑神域》23:05与海外同步播出结局">【独播动画】《刀剑神域》23:05与海外同步播出结局</a></h2>
<p><a target="_blank" href="http://51qianduan.com/jiaoben/" title="【独播动画】《刀剑神域》23:05与海外同步播出结局">乐视网动漫频道独家与海外同步播出,2012最具人气新番动画《刀剑神域》第25话大结局。经历重重磨难的桐人与亚丝娜最后的战斗!</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="http://51qianduan.com/jiaoben/" title="【高清热播】《民兵葛二蛋》更新至20集">【高清热播】《民兵葛二蛋》更新至20集</a></h2>
<p><a target="_blank" href="http://51qianduan.com/jiaoben/" title="【高清热播】《民兵葛二蛋》更新至20集">两个农村里的小人物,在混乱的战争年代,成长的路程却大相径庭。从前的难兄难弟发展成了什么样的关系?且看黄渤高虎搞笑演绎!</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="http://51qianduan.com/jiaoben/" title="【高清正片】亚洲版“人皮客栈”:《惊魂游戏》">【高清正片】亚洲版“人皮客栈”:《惊魂游戏》</a></h2>
<p><a target="_blank" href="http://51qianduan.com/jiaoben/" title="【高清正片】亚洲版“人皮客栈”:《惊魂游戏》">莫小棋饰演游戏公司的职员,而胡兵饰演其男友,因种种原因两人感情出现裂痕,连环怪事由此而生,并牵涉进他人命案。</a></p>
</div>
<div class="infotxt w">
<h2><a target="_blank" href="http://51qianduan.com/jiaoben/" title="【足球直播】直播意甲、西甲2012收官焦点战">【足球直播】直播意甲、西甲2012收官焦点战</a></h2>
<p><a target="_blank" href="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" title="微电影《青春不下线》发布,解冻你的青春!">微电影《青春不下线》发布,解冻你的青春!</a></h2>
<p><a target="_blank" href="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" 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="http://51qianduan.com/jiaoben/" title="《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房" target="_blank">
          <img src="images/70a978cbc6a32efda5b1a4a0ce79bff1505.jpg" alt="《隋唐英雄》更新至47集:程咬金裴翠翠闹洞房">
          <b></b></a>
          <a class="j-item" href="http://51qianduan.com/jiaoben/" title="【高清正片】战神重组 为战重生:《敢死队2》" target="_blank">
          <img src="images/3db3b6829c4d92879bd779a47b6d295b9517.jpg" alt="【高清正片】战神重组 为战重生:《敢死队2》">
          <b></b></a>
          <a class="j-item" href="http://51qianduan.com/jiaoben/" title="【独家热播】《虎符传奇》更新至14集" target="_blank">
          <img src="images/9e0f213dc0b2539c5bc4c278b1e5944a7349.jpg" alt="【独家热播】《虎符传奇》更新至14集">
          <b></b></a>
          <a class="j-item on" href="http://51qianduan.com/jiaoben/" title="【首播预告】《我怀了你的孩子》预告片激情上线" target="_blank">
          <img src="images/8723655c77e137e85b94c7a48475ac547016.jpg" alt="【首播预告】《我怀了你的孩子》预告片激情上线">
          <b></b></a>
          <a class="j-item" href="http://51qianduan.com/jiaoben/" title="盘点2012那些吓得末日都不敢来的神人" target="_blank">
          <img src="images/5b035206fbaf15c6bd0724d9c4a4296a7097.jpg" alt="盘点2012那些吓得末日都不敢来的神人">
          <b></b></a>
          <a class="j-item" href="http://51qianduan.com/jiaoben/" title="【独播动画】《刀剑神域》23:05与海外同步播出结局" target="_blank">
          <img src="images/662fda3e374751934e10953d99e0265e4384.jpg" alt="【独播动画】《刀剑神域》23:05与海外同步播出结局">
          <b></b></a>
          <a class="j-item" href="http://51qianduan.com/jiaoben/" title="【高清热播】《民兵葛二蛋》更新至20集" target="_blank">
          <img src="images/20dc66194903de30aad5f37af9524071801.jpg" alt="【高清热播】《民兵葛二蛋》更新至20集">
          <b></b></a>
          <a class="j-item" href="http://51qianduan.com/jiaoben/" title="【高清正片】亚洲版“人皮客栈”:《惊魂游戏》" target="_blank">
          <img src="images/52d72d1c5affd250250209f140b45f5a5237.jpg" alt="【高清正片】亚洲版“人皮客栈”:《惊魂游戏》">
          <b></b></a>
          <a class="j-item" href="http://51qianduan.com/jiaoben/" title="【足球直播】直播意甲、西甲2012收官焦点战" target="_blank">
          <img src="images/c5c0440889c9315c9480e3c24a39bb892178.jpg" alt="【足球直播】直播意甲、西甲2012收官焦点战">
          <b></b></a>
          <a class="j-item" href="http://51qianduan.com/jiaoben/" 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> 
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动 滑块 滑动门 触屏滑动 滑动插件 滑块插件 滑动选项卡 滑动切换 滚动切换 滚动条切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 滑动星星打分 切换按钮 表单 表单美化 表单插件 表单美化插件 焦点图 幻灯片 轮播图 bar焦点图 其他 带简介的焦点图 图片滑动 图片滑块 图片切换 图片选项卡 图标选项卡 选项卡自动切换 按钮控制 鼠标滑过 鼠标悬停 跟随鼠标移动

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到