这套自适应全屏大图焦点轮播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>
效果截图: