自适应全屏大图焦点轮播banner切换插件

92建站   2021-10-15   收藏本文
焦点轮播图,图片切换插件

类型细分:焦点轮播

布局形式:响应式

编码格式:UTF8

下载说明:百度盘不限速方法

这套自适应全屏大图焦点轮播banner切换插件,是基于jQuery SuperSlide插件开发制作的,非常棒的大图焦点图片自适应轮播切换特效,可以很好的适应宽度自适应浏览器,带有按钮控制功能。

使用方法:

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>

<script type="text/javascript">
    jQuery(".slideBox").slide({ mainCell: ".bd ul", effect: "fold", autoPlay: true, trigger: "click" });
    jQuery(function () {
        var len = jQuery(".hd ul").find("li").length;
        var width = len * 20 - 10;
        jQuery(".hd").css("width", width + "px").css("margin-left", "-" + width / 2 + "px");
        jQuery(".hd").find('li').last().css("margin", "0px");
        jQuery(".bd img").css("position", "absolute").css("left", "50%").css("transform", "translate(-50%)");
        jQuery(".hd ul").find('li').eq('@index').click();
    })

    // 切换图片
    jQuery('.switch').click(function (e) {
        var index = $(".hd li").index($(".hd .on").eq(0));
        var width = $(this).width();
        var positionX = e.pageX - $(this).offset().left; //获取当前鼠标相对div的X坐标
        if (positionX < width / 2) {
            // 上一张
            index -= 1;
            if (index >= 0) {
                jQuery(".hd ul").find("li").eq(index).click();
            }
        } else {
            // 下一张
            index += 1;
            var len = jQuery(".hd ul").find("li").length;
            if (index <= len - 1) {
                jQuery(".hd ul").find("li").eq(index).click();
            }
        }
    })

</script>

效果截图:

焦点轮播图,图片切换插件

免责声明:本站模板均来自用户分享和网络收集,仅供学习与参考,请勿用于商业用途,若损害您的权益,请联系网站客服,核实后立即删除。
展开