以下是 兼容PC手机可拖动jQuery焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>兼容PC手机可拖动jQuery焦点图</title>
<link href="css/sytyle.css" rel="stylesheet">
<script src="js/jquery-1.js"></script>
<script src="js/jquery_002.js"></script>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(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);
});
});
</script>
</head>
<body>
<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>
</body>
</html>JS代码(jquery_002.js):
/*jquery.event.drag.js ~ v1.5 ~ Copyright (c) 2008,Three Dub Media (http://threedubmedia.com)Liscensed under the MIT License ~ http://threedubmedia.googlecode.com/files/MIT-LICENSE.txt*/
(function(E){
E.fn.drag=function(L,K,J){
if(K){
this.bind("dragstart",L)}
if(J){
this.bind("dragend",J)}
return !L?this.trigger("drag"):this.bind("drag",K?K:L)}
;
var A=E.event,B=A.special,F=B.drag={
not:":input",distance:0,which:1,dragging:false,setup:function(J){
J=E.extend({
distance:F.distance,which:F.which,not:F.not}
,J||{
}
);
J.distance=I(J.distance);
A.add(this,"mousedown",H,J);
if(this.attachEvent){
this.attachEvent("ondragstart",D)}
}
,teardown:function(){
A.remove(this,"mousedown",H);
if(this===F.dragging){
F.dragging=F.proxy=false}
G(this,true);
if(this.detachEvent){
this.detachEvent("ondragstart",D)}
}
}
;
B.dragstart=B.dragend={
setup:function(){
}
,teardown:function(){
}
}
;
function H(L){
var K=this,J,M=L.data||{
}
;
if(M.elem){
K=L.dragTarget=M.elem;
L.dragProxy=F.proxy||K;
L.cursorOffsetX=M.pageX-M.left;
L.cursorOffsetY=M.pageY-M.top;
L.offsetX=L.pageX-L.cursorOffsetX;
L.offsetY=L.pageY-L.cursorOffsetY}
else{
if(F.dragging||(M.which>0&&L.which!=M.which)||E(L.target).is(M.not)){
return}
}
switch(L.type){
case"mousedown":E.extend(M,E(K).offset(),{
elem:K,target:L.target,pageX:L.pageX,pageY:L.pageY}
);
A.add(document,"mousemove mouseup",H,M);
G(K,false);
F.dragging=null;
return false;
case !F.dragging&&"mousemove":if(I(L.pageX-M.pageX)+I(L.pageY-M.pageY)<M.distance){
break}
L.target=M.target;
J=C(L,"dragstart",K);
if(J!==false){
F.dragging=K;
F.proxy=L.dragProxy=E(J||K)[0]}
case"mousemove":if(F.dragging){
J=C(L,"drag",K);
if(B.drop){
B.drop.allowed=(J!==false);
B.drop.handler(L)}
if(J!==false){
break}
L.type="mouseup"}
case"mouseup":A.remove(document,"mousemove mouseup",H);
if(F.dragging){
if(B.drop){
B.drop.handler(L)}
C(L,"dragend",K)}
G(K,true);
F.dragging=F.proxy=M.elem=false;
break}
return true}
function C(M,K,L){
M.type=K;
var J=E.event.handle.call(L,M);
return J===false?false:J||M.result}
function I(J){
return Math.pow(J,2)}
function D(){
return(F.dragging===false)}
function G(K,J){
if(!K){
return}
K.unselectable=J?"off":"on";
K.onselectstart=function(){
return J}
;
if(K.style){
K.style.MozUserSelect=J?"":"none"}
}
}
)(jQuery);
CSS代码(sytyle.css):
@charset "utf-8";div{text-align:left}
a img{border:0}
body{color:#333;text-align:center;font:12px "宋体";}
ul,ol,li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000;text-decoration:none}
.clear{height:0;overflow:hidden;clear:both}
/* main_image */
.main_visual{height:305px;overflow:hidden;position:relative;}
.main_image{height:254px;overflow:hidden;position:relative;margin-top:20px;}
.main_image ul{height:254px;overflow:hidden;position:absolute;top:0;left:0}
.main_image li{float:left;height:254px;}
.main_image li img{display:block;width:300px;}
.main_image li a{display:block;width:100%;height:254px}
div.flicking_con{position:absolute;top:280px;left:50%;z-index:999;width:300px;height:21px;margin:0 0 0 -50px;}
div.flicking_con a{float:left;width:21px;height:21px;margin:0;padding:0;background:url('../images/btn_main_img.png') 0 0 no-repeat;display:block;text-indent:-1000px}
div.flicking_con a.on{background-position:0 -21px}
#btn_prev,#btn_next{z-index:11111;position:absolute;display:block;width:73px!important;height:74px!important;top:50%;margin-top:-37px;display:none;}
#btn_prev{background:url(../img/hover_left.png) no-repeat left top;left:10px;}
#btn_next{background:url(../img/hover_right.png) no-repeat right top;right:10px;}
分享到QQ
分享到微博
微信扫一扫
