Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 基于jquery编写的横向自适应幻灯片切换特效的实例代码

基于jquery编写的横向自适应幻灯片切换特效的实例代码

发布时间:2014-03-01   编辑:www.jquerycn.cn
全屏自适应jquery焦点图切换特效,在IE6这个蛋疼的浏览器兼容性问题上得到了和谐,兼容IE6。适用浏览器:IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.相关代码:

复制代码 代码如下:

<script type="text/javascript">
jquery(".fullSlide").hover(function() {
    jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
},
function() {
    jQuery(this).find(".prev,.next").fadeOut()
});
jQuery(".fullSlide").slide({
    titCell: ".hd ul",
    mainCell: ".bd ul",
    effect: "fold",
    autoPlay: true,
    autoPage: true,
    trigger: "click",
    startFun: function(i) {
        var curLi = jQuery(".fullSlide .bd li").eq(i);
        if ( !! curLi.attr("_src")) {
            curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
        }
    }
});
</script>

效果图如下:

您可能感兴趣的文章:
基于jquery编写的横向自适应幻灯片切换特效的实例代码
详解HTML5幻灯片系统--H5Slides
HTML5幻灯片系统:H5Slides
jquery幻灯片效果的插件一例
基于jquery的网站幻灯片切换效果焦点图代码
简单常用的幻灯片播放实现代码
javascript 竖向排列的图片幻灯切换效果
2013年优秀jQuery插件整理小结
jquery【插件】图片切换轮播等
js 可控制的图片幻灯切换效果

关键词: 自适应  幻灯片  切换特效   
[关闭]