知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    仿淘宝上下翻滚的jquery图片切换特效

    作者:佳明妈 来源:jquery特效 2011-05-10 人气:
    仿淘宝网首页上下翻滚的jquery图片切换特效,滚动方式为上下翻滚切换的焦点幻灯片特效,jquery.Slide.js已经被压缩不是原始的jquery文件,不过不影响使用和修改,完全可以自己重写部分

    仿淘宝网首页上下翻滚的jquery图片切换特效,收集与网络,原作者未知,滚动方式为上下翻滚切换的焦点幻灯片特效,基于jquery,jquery.Slide.js已经被压缩不是原始的jquery文件,不过不影响使用和修改,完全可以自己重写部分样式,如果你重写的样式不生效可以在css样式后面加 !important ,如:#btnlistID li{ color:#ffffff!important;}

    jquery代码如下:

    <script src="http://lib.sinaapp.com/js/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="js/jquery.Slide.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
        $("#taobaoSlide").KinSlideshow({
                moveStyle:"down",
                intervalTime:8,
                mouseEvent:"mouseover",
                titleFont:{TitleFont_size:14,TitleFont_color:"#ffffff"}
        });
    })
    </script>
    <style>
    #btnlistID li{ color:#ffffff!important;}
    </style>

    这里引用了谷歌的http://lib.sinaapp.com/js/jquery/1.3/jquery.min.js,你可以换成你自己的引用路径。

    $("#taobaoSlide").KinSlideshow 这里的# taobaoSlide 是你 jquery图片切换特效 容器的ID。

    moveStyle:"down", 这里的 down 你可以试试 left   呵呵,聪明的你一定知道什么意思了。

    titleFont:{TitleFont_size:14,TitleFont_color:"#ffffff"}  这是字号 和字体 颜色了。

    #btnlistID li{ color:#ffffff!important;} 这个样式是可以控制那个数字颜色的,数字的颜色默认是黑色,你想改变这个颜色你可以用这种方式,

    其他地方的样式也可以用这种方式改变。

    jquery图片切换特效 容器的HTML代码如下:

    <div id="taobaoSlide" style="visibility:hidden;">
            <a href="http://www.51xuediannao.com/" target="_blank"><img src="images/1.jpg" alt="懒人建站为您提供-基于jquery特效" width="500" height="200" /></a>
            <a href="http://www.51xuediannao.com/JS/" target="_blank"><img src="images/2.jpg" alt="懒人建站为您分享基于jquery 特效,分享是一种精神" width="500" height="200" /></a>
            <a href="http://www.51xuediannao.com/jquery/" target="_blank"><img src="images/1.jpg" alt="懒人建站为您提供-jquery 图片特效,jquery 菜单特效" width="500" height="200" /></a>
            <a href="http://www.51xuediannao.com/" target="_blank"><img src="images/2.jpg" alt="懒人建站 jquery 特效" width="500" height="200" /></a>
        </div>

    这个不多解释,

    你还要问怎么在你的页面中调用?这里说的基本很清楚了,还是不明白?那看演示吧,看演示里面怎么调用的。

    类似这样的
    <a href="http://www.51xuediannao.com/JS/" target="_blank"><img src="images/2.jpg" alt="懒人建站为您分享基于jquery 特效,分享是一种精神" width="500" height="200" /></a>
    一条一条的文章列表的读取应该不是什么难事吧!

     

    ↓ 查看全文

    仿淘宝上下翻滚的jquery图片切换特效由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    仿淘宝上下翻滚的jquery图片切换特效-最新评论