html
<div class="t2" id="container"> <div class="t2l f_l" id="btnNext"></div> <div class="t2c f_l" id="listBox"> <div id="list"> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝1</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝2</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝3</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝4</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝5</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝6</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝1</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝2</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝3</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝4</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝5</a></dd> </dl> <dl class="f_l"> <dt><a href="###" title="吴珍宝"><img src="images/doctor.jpg" alt="吴珍宝" /></a></dt> <dd><a href="###" title="吴珍宝">吴珍宝6</a></dd> </dl> </div> </div> <div class="t2r f_l" id="btnPrev"></div> <img src="images/famous.png" width="50" height="155" class="t2Position" /> </div>
css
/*第二区样式*/ .t2{ width:980px; height:214px; background:url(../images/t2Bg.gif) repeat-x; margin:13px auto 0 auto; border-bottom:2px solid #f09; border-top:6px solid #f09; position:relative;} .t2l{ width:100px; height:214px; background:url(../images/onLeft.gif) no-repeat 63px 84px;} .t2c{ width:816px; height:180px; overflow:hidden;} .t2c dl{ width:136px; padding-top:20px;} .t2c dl dt{ } .t2c dl dt img{ width:105px; height:123px; border:1px solid #ccc; display:block; padding:4px;} .t2c dl dd{ width:115px; text-align:center; padding-top:8px;} .t2c dl dd a{ font-size:14px; color:#f09; font-size:14px; font-weight:bold;} .t2r{ width:50px; height:214px; background:url(../images/onRight.gif) no-repeat 0px 84px;} .t2Position{ position:absolute; left:-7px; top:30px;}
引用
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script> <script type="text/javascript" src="js/jquery.imageScroller.js"></script> <script type="text/javascript"> $(function () { $("#listBox").imageScroller({ next: "btnNext", prev: "btnPrev", frame: "list", child: "dl", auto: true }); }); </script>
效果图:
相关推荐
横向无缝的图片滚动,两端带左右控制按钮,需要鼠标点击按钮才会滚动,点一下滚动一下,这是Jquery jcarousel插件应用实用例子,演示文档虽然是HTML格式,但由代码来看,在ASP/PHP/ASP.NET中使用也很方便,而且图片...
横向无缝左右滚动的JS图片展示代码
JS无缝图片滚动,横向和横向滚动二例,响应鼠标停止,无使用jQuery,图片滚动应用广泛,本代码在IE8、火狐等浏览器下兼容性好,代码效率高,而且代码也很少,方便大家嵌入到自己的网页中,运行效果如上图所示。
内容索引:脚本资源,jQuery,图片滚动,无缝滚动代码,jQuery插件 jQuery 横向图片滚动,带左右控制按钮,原作品中作者用数字代替了图片,源码爱好者把数字换成了图片,这样更直观一些,但是核心没有变,本滚动可自由判断...
脚本资源,jQuery,图片滚动,jcarousel,Jquery插件 Jquery jcarousel插件应用实用:横向无缝的图片滚动,两端带左右控制按钮,需要鼠标点击按钮才会滚动,点一下滚动一下,演示文档虽然是HTML格式,但由代码来看,在...
108. 推荐jQuery网站首页三幅banner切换大图广告自动滚动代码下载 109. 推荐jQuery购物类产品图片放大插件jqzoom v2.0下载 110. 推荐实用jquery图片截取代码下载 111. 站长推荐jQuery产品展示专用的图片幻灯+缩略...
93. 基于jQuery的横向无缝图片滚动插件jcarousel 94. 实用jquery焦点图源码2 95. 常用jQuery新闻焦点图片切换效果插件 96. 强大jQuery实现3D文字三维旋转效果代码下载 97. 很帅的jquery焦点图切换源码可用于产品...
1. 2款jQuery图片自动切换常用广告代码 2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与...93. 基于jQuery的横向无缝图片滚动插件jcarousel **** …… …… …… 很多很多
1. 2款jQuery图片自动切换常用广告代码 ...108. 推荐jQuery网站首页三幅banner切换大图广告自动滚动代码下载 109. 推荐jQuery购物类产品图片放大插件jqzoom v2.0下载 110. 推荐实用jquery图片截取代码下载
jquery实现区块或链接横向无缝循环滚动,自适应宽度,可随意设置外容器的宽度。高度自适应,兼容IE,FF,CHROME.zip
一、J Query实例大全 ...一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery定时图片切换代码下载 78.一款实用经典jQuery图片切换展示插件下载 79.下载jQuery动感广告图片翻转插件(PictureRoll)...
里给大家分享的是使用jQuery实现简单的无缝滚动的效果,其思路是我们通过js控制 ul 标签的margin 来实现滚动。横向滚动则是控制 margin-left ; 纵向滚动则是控制 margin-top;,有需要的小伙伴可以参考下。
本文实例为大家分享了jquery.kxbdmarquee.js无缝滚动的具体代码,供大家参考,具体内容如下 strep1.页面引入相关文件 [removed][removed] [removed][removed] step2.写html结构、css样式、js css样式: ...
精美的js水平图片滚动特效代码集,一共有5款,在火狐和Chrome下效果更佳,基于jquery.easing插件实现,全部都是横向一排的图片无缝滚动,区别是动画效果的稍有不同,左右两头都可手动控制图片向前、向后滚动。
<li>111 <li>222 <li>333 结构简单明了,没什么说的。... div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:...横向滚动则是控制 margin-left ; 纵向滚动则是控制 margin-top; 初始状
内容索引:脚本资源,jQuery,图片滚动 jQuery 模仿走马灯形式的图片滚动,成组图片连续滚动,每三个成一批,无缝吻合,国外网站用得最多了,测试时候请注意页面编码为GB2312,编码不对可能导致打开测试页面什么也看不...
本篇文章分享了如何实现文字无缝向上翻动效果的示例代码。代码清晰明了,可直接下载使用。有兴趣的朋友可以看下