我爱模板网 > 特效插件 > 滚动轮播 >  简单的jQuery图片滚动代码正文

简单的jQuery图片滚动代码

特效介绍
jQuery图片滚动插件

    简单的jQuery图片滚动代码,鼠标滑过右下角的控制点,可以让图片平滑滚动,不控制的话,图片自己也会每个3秒滚动一次。
使用方法
1、在head引入下面的代码:
<link rel="stylesheet" type="text/css" href="images/index_black.css">
<script src="http://www.5imoban.net/download/jquery/jquery-1.4.2.min.js"></script>
<script src="images/index2.js"></script>
2、在您的产品滚动的区域引入下面的html代码:
<div class="long_block_index">
  <div class="js_imgs_block">
    <div id="slideshow_wrapper">
        <div id="slideshow_photo">
            <a style="z-index:2" href="javascript:void(0)" index="1">
                <img border=0 src="images/ad01.jpg">
            </a>
            <a style="z-index:1" href="javascript:void(0)" index="2">
                <img border=0 src="images/ad02.jpg">
            </a>
            <a style="z-index:1" href="javascript:void(0)" target="_blank" index="3">
                <img border=0 imgsrc="images/ad03.jpg">
            </a>
            <a style="z-index:1" href="javascript:void(0)" index="4">
                <img border=0 imgsrc="images/ad04.jpg">
            </a>
            <a style="z-index:1" href="javascript:void(0)" index="5">
                <img border=0 imgsrc="images/ad05.jpg">
            </a>
        </div>
      <div id="slideshow_footbar"></div>
    </div>
  </div>
</div>
<div class="survey_block_index">
  <div class="title_survey_block_index">
    <ul class="scrollUl">
      <a id="m01" class="sd01" href="javascript:void(0)"></a>
      <a id="m02" class="sd02" href="javascript:void(0)"></a>
      <a style="BaCKGROUND-IMaGE: none" id="m03" class="sd03" href="javascript:void(0)"></a>
    </ul>
  </div>
</div>
注:自动滚动时间请打开index2.js,找到下面代码:
    setInterval(function()
    {
        if (indexAllowAutoSlide) slideDown();
    },3000);
将3000改成你想要的时间,单位是毫秒。


部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
上一篇:图片放大展示的jQuery图片滚动插件 下一篇:TouchSlide——手机网站滑动特效插件
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢