郁闷吧 微信小程序 4188479 63242849 39070147 130690866
还没有任何记录...

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

懒人建站提供网页素材下载、网站模板
这一切都是免费的!
当前位置:懒人建站 > javascript > 幻灯片代码 >

仿淘宝上下翻滚的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图片切换特效http://www.51xuediannao.com/js/slide/taobao_Slide.html

(责任编辑:懒人建站)

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

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