一款基于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="data:images/20141206093912_0947.jpg"></li>
<li>
<img src="data:images/20141206093851_5791.jpg"></li>
<li>
<img src="data:images/20141206092732_4208.jpg"></li>
<li>
<img src="data: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:http://www.w2bc.com/Article/17889
一款基于jQuery的支持鼠标拖拽滑动焦点图的更多相关文章
- 支持鼠标拖拽滑动的jQuery焦点图
在线演示 本地下载
- 一款基于jQuery的带文字标题上下切换焦点图
今天给大家分享一款很实用的jQuery焦点图插件,它的最大特点就是使用非常方便,而且实现相对比较简单.焦点图的图片下方悬浮文字链接,鼠标滑过文字时即可切换至相应的图片,在图片切换的过程中出现淡入淡出的 ...
- 基于jQuery带标题的图片3D切换焦点图
今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...
- 基于jQuery自适应宽度跟高度可自定义焦点图
基于jQuery自适应宽度跟高度可自定义焦点图.这是一款带左右箭头,缩略小图切换的jQuery相册代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <section cl ...
- 一款基于jquery实现的鼠标单击出现水波特效
今天要为大家绍一款由jquery实现的鼠标单击出现水波特效.用鼠标猛点击页面,你可以看到页面不断出面水波纹效果.然后水波纹渐渐消失.效果非常不错.我们一起看下效果图: 在线预览 源码下载 实现的代 ...
- PC端的鼠标拖拽滑动
1.滑块拖拽 html: <div id="div1"> js: <script> var oDiv=null; ; ; window.onload=fun ...
- 一款基于jquery的鼠标经过图片列表特效
今天要给大家推荐一款基于jquery的鼠标经过图片列表特效.当鼠标经过列表图片的时候,图片放大,且有一个半透明的遮罩层随之移动.效果图如下: 在线预览 源码下载 实现的代码 html代码: < ...
- 完美实现鼠标拖拽事件,解决各种小bug,基于jquery
鼠标拖拽事件是web中使用频率极高的事件,之前写过的代码包括网上的代码,总存在各种各样的问题,包括拖拽体验差,松开鼠标后拖拽效果仍存在以及代码冗余过大等 本次我才用jQuery实现一个尽可能高效的拖拽 ...
- 10款基于jquery的web前端动画特效
1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...
随机推荐
- R语言简单入门
一.运行R语言可以做哪些事? 1.探索性数据分析(将数据绘制图表) 2.统计推断(根据数据进行预测) 3.回归分析(对数据进行拟合分析) 4.机器学习(对数据集进行训练和预测) 5.数据产品开发 二. ...
- Error when running Swift3 in REPL
Traceback (most recent call last): File "", line 1, in NameError: name 'run_one_line' is n ...
- nodejs 调用 OC 方法
nodejs 借助 nodobjc 模块 https://github.com/TooTallNate/NodObjC demo: var $ = require('nodobjc') $.frame ...
- geeksforgeeks@ Find sum of different corresponding bits for all pairs (Bit manipulation)
http://www.practice.geeksforgeeks.org/problem-page.php?pid=387 Find sum of different corresponding b ...
- delphi请求idhttp数据
idhttp ss : TStringStream; begin ss := TStringStream.)); { 指定gb2312的中文代码页,或者54936(gb18030)更好些 utf8 对 ...
- windows下揪出java程序占用cpu很高的线程 并找到问题代码 死循环线程代码
我的一个java程序偶尔会出现cpu占用很高的情况 一直不知道什么原因 今天终于抽时间解决了 系统是win2003 jvisualvm 和 jconsole貌似都只能看到总共占用的cpu 看不到每个线 ...
- 一个效果很华丽的仿桌面APP,却胜似Launcher
开发Android APP的同学是否对于Launcher实现的绚丽效果而痴迷呢?什么,连Android Launcher是什么都不知道.好吧,拿起侬的手机,在解锁后的首页界面上左右滑动滑动,体验体验, ...
- HDU 1002 分类: ACM 2015-06-18 23:03 9人阅读 评论(0) 收藏
昨天做的那题其实和大整数相加类似.记得当初我大一寒假就卡在这1002题上,结果之后就再也没写题... 到今天终于把大整数相加写了一遍. 不过写的很繁琐,抽时间改进一下写简洁一点. #include&l ...
- POJ 2888 Magic Bracelet(Burnside引理,矩阵优化)
Magic Bracelet Time Limit: 2000MS Memory Limit: 131072K Total Submissions: 3731 Accepted: 1227 D ...
- SPI移位寄存器
spi移位寄存器即是spi的数据寄存器,在stm32中数据手册是这样描述的: