<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0039)http://js.itobe.cn/demo/2013/a01107/ -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<META content="text/html; charset=gb2312" http-equiv="Content-Type">
<STYLE type="text/css">
body{position:relative;margin:0;padding:55px 0 0 0;}
#bdshare{margin:-5px 0 0 0;}
</STYLE>
<TITLE>支持满屏响应式设计的jQuery焦点轮播代码</TITLE>
<SCRIPT type="text/javascript" src="demo_files/jquery-1.7.1.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="demo_files/jquery.event.drag-1.5.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="demo_files/jquery.touchSlider.js"></SCRIPT>
<LINK rel="stylesheet" href="demo_files/common.css">
<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>
<META name="GENERATOR" content="MSHTML 9.00.8112.16496"></HEAD>
<BODY>
<DIV class="main_visual">
<DIV class="flicking_con">
<DIV class="flicking_inner"><A href="http://js.itobe.cn/">1</A><A href="http://js.itobe.cn/">2</A><A
href="http://js.itobe.cn/">3</A><A href="http://js.itobe.cn/">4</A><A
href="http://js.itobe.cn/">5</A></DIV></DIV>
<DIV class="main_image">
<UL>
<LI><SPAN class="img_3"></SPAN></LI>
<LI><SPAN class="img_4"></SPAN></LI>
<LI><SPAN class="img_1"></SPAN></LI>
<LI><SPAN class="img_2"></SPAN></LI>
<LI><SPAN class="img_5"></SPAN></LI></UL><A id="btn_prev"
href="javascript:;"></A><A id="btn_next"
href="javascript:;"></A></DIV></DIV><BR>
jQuery实现的支持满屏响应式设计的焦点图轮播特效源码.zip
版权申诉
196 浏览量
2022-11-07
23:55:59
上传
评论
收藏 425KB ZIP 举报
jQuery实现的支持满屏响应式设计的焦点图轮播特效源码.zip （15个子文件） 
132674333927966389 images 
btn_main_img.png 3KB
img_main_2.jpg 141KB img_main_4.jpg 110KB img_main_1.jpg 101KB img_main_5.jpg 103KB img_main_3.jpg 63KB hover_right.png 4KB hover_left.png 4KB
聚来宝_淘宝购物返利教程.url 137B
index.html 3KB 服务器软件.url 122B demo_files jquery.event.drag-1.5.min.js 2KB jquery-1.7.1.min.js 92KB jquery.touchSlider.js 12KB common.css 2KB资源评论
