signed

QiShunwang

“诚信为本、客户至上”

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

2021/6/3 14:05:38   来源:

复制代码 代码如下:

<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全屏焦点图左右切换插件responsiveslides
  • jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
  • jQuery插件multiScroll实现全屏鼠标滚动切换页面特效
  • jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
  • 基于Jquery的简单图片切换效果
  • jQuery 一个图片切换的插件
  • 一个基于jquery的图片切换效果
  • Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
  • 基于Jquery实现的一个图片滚动切换
  • jquery横向纵向鼠标滚轮全屏切换