一款基于jQuery的支持鼠标拖拽滑动焦点图

记得之前我们分享过一款jQuery全屏广告图片焦点图，图片切换效果还不错。今天我们要分享另外一款jQuery焦点图插件，它的特点是支持鼠标拖拽滑动，所以在移动设备上使用更加方便，你只要用手指滑动屏幕即可切换图片。



在线预览 源码下载

实现的代码。

html代码：

<div class="main_visual">
<div class="flicking_con">
<a class="on" href="#@">1</a> <a href="#@">2</a> <a href="#@">3</a> <a href="#@">4</a>
</div>
<div class="main_image">
<ul>
<li>
<img src="images/20141206093912_0947.jpg"></li>
<li>
<img src="images/20141206093851_5791.jpg"></li>
<li>
<img src="images/20141206092732_4208.jpg"></li>
<li>
<img src="images/20141206093851_5791.jpg"></li>
</ul>
</div>
<script>
$(".main_image img").each(function () {
var ww = $(".main_image").width();
var w = $(this).width();
var ml = Math.round((parseInt(ww) - parseInt(w)) / 2);
$(this).css({ marginLeft: ml + "px" })
})
</script>
</div>

js代码：

$(document).ready(function () {

$(".main_visual").hover(function () {
$("#btn_prev,#btn_next").fadeIn()
}, function () {
$("#btn_prev,#btn_next").fadeOut()
});

$dragBln = false;

$(".main_image").touchSlider({
flexible: true,
speed: 200,
btn_prev: $("#btn_prev"),
btn_next: $("#btn_next"),
paging: $(".flicking_con a"),
counter: function (e) {
$(".flicking_con a").removeClass("on").eq(e.current - 1).addClass("on");
}
});

$(".main_image").bind("mousedown", function () {
$dragBln = false;
});

$(".main_image").bind("dragstart", function () {
$dragBln = true;
});

$(".main_image a").click(function () {
if ($dragBln) {
return false;
}
});

timer = setInterval(function () {
$("#btn_next").click();
}, 5000);

$(".main_visual").hover(function () {
clearInterval(timer);
}, function () {
timer = setInterval(function () {
$("#btn_next").click();
}, 5000);
});

$(".main_image").bind("touchstart", function () {
clearInterval(timer);
}).bind("touchend", function () {
timer = setInterval(function () {
$("#btn_next").click();
}, 5000);
});

});

via：/article/1211408.html