`

jQuery 无缝图片横向滚动代码

 
阅读更多

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>

 

 效果图:

 

 

 

  • 大小: 33.4 KB
  • js.rar (31.8 KB)
  • 下载次数: 3
2
1
分享到:
评论

相关推荐

    横向无缝的图片滚动,jQuery jcarousel实例.rar

    横向无缝的图片滚动,两端带左右控制按钮,需要鼠标点击按钮才会滚动,点一下滚动一下,这是Jquery jcarousel插件应用实用例子,演示文档虽然是HTML格式,但由代码来看,在ASP/PHP/ASP.NET中使用也很方便,而且图片...

    横向无缝左右滚动的JS图片展示代码

    横向无缝左右滚动的JS图片展示代码

    JS无缝图片滚动,横向和纵向滚动二例.rar

    JS无缝图片滚动,横向和横向滚动二例,响应鼠标停止,无使用jQuery,图片滚动应用广泛,本代码在IE8、火狐等浏览器下兼容性好,代码效率高,而且代码也很少,方便大家嵌入到自己的网页中,运行效果如上图所示。

    jQuery 横向图片滚动,带左右控制

    内容索引:脚本资源,jQuery,图片滚动,无缝滚动代码,jQuery插件 jQuery 横向图片滚动,带左右控制按钮,原作品中作者用数字代替了图片,源码爱好者把数字换成了图片,这样更直观一些,但是核心没有变,本滚动可自由判断...

    Jquery jcarousel插件应用实用:横向无缝图片滚动

    脚本资源,jQuery,图片滚动,jcarousel,Jquery插件 Jquery jcarousel插件应用实用:横向无缝的图片滚动,两端带左右控制按钮,需要鼠标点击按钮才会滚动,点一下滚动一下,演示文档虽然是HTML格式,但由代码来看,在...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    108. 推荐jQuery网站首页三幅banner切换大图广告自动滚动代码下载 109. 推荐jQuery购物类产品图片放大插件jqzoom v2.0下载 110. 推荐实用jquery图片截取代码下载 111. 站长推荐jQuery产品展示专用的图片幻灯+缩略...

    jquery 动态示例

    93. 基于jQuery的横向无缝图片滚动插件jcarousel 94. 实用jquery焦点图源码2 95. 常用jQuery新闻焦点图片切换效果插件 96. 强大jQuery实现3D文字三维旋转效果代码下载 97. 很帅的jquery焦点图切换源码可用于产品...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    1. 2款jQuery图片自动切换常用广告代码 2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与...93. 基于jQuery的横向无缝图片滚动插件jcarousel **** …… …… …… 很多很多

    100多个JQuery效果示例(实例)div+css+javascrpit

    1. 2款jQuery图片自动切换常用广告代码 ...108. 推荐jQuery网站首页三幅banner切换大图广告自动滚动代码下载 109. 推荐jQuery购物类产品图片放大插件jqzoom v2.0下载 110. 推荐实用jquery图片截取代码下载

    jquery实现区块或链接横向无缝循环滚动,自适应宽度,可随意设置外容器的宽度 高度自适应,兼容IE,FF,CHROME.zip

    jquery实现区块或链接横向无缝循环滚动,自适应宽度,可随意设置外容器的宽度。高度自适应,兼容IE,FF,CHROME.zip

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一、J Query实例大全 ...一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery定时图片切换代码下载 78.一款实用经典jQuery图片切换展示插件下载 79.下载jQuery动感广告图片翻转插件(PictureRoll)...

    jquery实现简单的无缝滚动

    里给大家分享的是使用jQuery实现简单的无缝滚动的效果,其思路是我们通过js控制 ul 标签的margin 来实现滚动。横向滚动则是控制 margin-left ; 纵向滚动则是控制 margin-top;,有需要的小伙伴可以参考下。

    jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果

    本文实例为大家分享了jquery.kxbdmarquee.js无缝滚动的具体代码,供大家参考,具体内容如下 strep1.页面引入相关文件 [removed][removed] [removed][removed] step2.写html结构、css样式、js css样式:   ...

    5款精美的js水平图片滚动特效代码集.rar

    精美的js水平图片滚动特效代码集,一共有5款,在火狐和Chrome下效果更佳,基于jquery.easing插件实现,全部都是横向一排的图片无缝滚动,区别是动画效果的稍有不同,左右两头都可手动控制图片向前、向后滚动。

    jQuery插件实现无缝滚动特效

    &lt;li&gt;111 &lt;li&gt;222 &lt;li&gt;333 结构简单明了,没什么说的。... div box是最外层盒子,给它指定的宽高,记得给box添加一个 overflow:...横向滚动则是控制 margin-left ; 纵向滚动则是控制 margin-top;  初始状

    jQuery 模仿走马灯形式的图片滚动

    内容索引:脚本资源,jQuery,图片滚动 jQuery 模仿走马灯形式的图片滚动,成组图片连续滚动,每三个成一批,无缝吻合,国外网站用得最多了,测试时候请注意页面编码为GB2312,编码不对可能导致打开测试页面什么也看不...

    基于JQuery实现的跑马灯效果(文字无缝向上翻动)

    本篇文章分享了如何实现文字无缝向上翻动效果的示例代码。代码清晰明了,可直接下载使用。有兴趣的朋友可以看下

Global site tag (gtag.js) - Google Analytics