top
元旦节到了,元旦节快乐...

固定当前背景  反馈、咨询、建议、留言等,请点这里[Alt+G]

本栏相关
其他文章
JavaScriptJavaScript当前位置:首页 >>开发技巧>>JavaScript
Jquery图片无缝连续循环滚动 支持上下左右的滚动
编辑yang 发布时间2014-11-08 浏览量6554 来源本站原创
摘要:imgScroll插件是本站依赖于jQuery所编写的图片循环切换插件,支持渐变及滚动等方式,带有可控制焦点切换、向左向右切换滚动、图片连续无缝循环滚动的效果,本实例将演示图片连续无缝循环滚动效果,引用jquery.imgscroll.min.js后直接调用即可。
  • 第一张图片
  • 第二张图片
  • 第三张图片
  • 第四张图片
  • 第五张图片

CSS代码(参考)

<style>
*{padding:0; margin:0}
li{list-style:none; padding:0; margin:0}
.g1,.g2,.g3,.g4{width:380px; height:180px; float:left; margin:0 5px 5px 10px}
</style>

JS代码(核心)

<script src="http://www.xcsoft.cn/Public/js/jquery.js"></script><!--引入Jquery-->
<script src="http://www.xcsoft.cn/Public/js/jquery.imgscroll.min.js?v=2014102202"></script><!--引入图片循环滚动js-->
<script>
$(function(){
    imgScroll.rolling({
        name:'g1',
        width:'380px',
        height:'180px',
        direction:'top',
        speed:10,
        addcss:true
        })
})
</script>

HTML代码(标准示例)

<div class="g1">
  <ul>
    <li><img src="http://www.xcsoft.cn/Public/images/img/1.jpg"></li>
    <li><img src="http://www.xcsoft.cn/Public/images/img/2.jpg"></li>
    <li><img src="http://www.xcsoft.cn/Public/images/img/3.jpg"></li>
    <li><img src="http://www.xcsoft.cn/Public/images/img/4.jpg"></li>
    <li><img src="http://www.xcsoft.cn/Public/images/img/5.jpg"></li>
  </ul>
</div>

       代码就写一个例子了,其他的应该可以现学现用吧。

标签   技巧网页制作

按键盘左右方向键可快速浏览上一篇(←)、下一篇(→)


反馈/咨询/建议/留言(GuestBook)
您好,怎么称呼您!
您的姓名:
上一步:鼠标向上滚动/左方向键(←)
下一步或完成:鼠标向下滚动/Tab键/右方向键(→)
如果您有空的话,可以填一下您的相关信息!
您的电话:
您的邮箱:
现在,请填写您想要了解的信息!
信息内容:
验证码: 看不清?点图片刷新