一款基于jQuery的支持鼠标拖拽滑动焦点图
记得之前我们分享过一款jQuery全屏广告图片焦点图,图片切换效果还不错。今天我们要分享另外一款jQuery焦点图插件,它的特点是支持鼠标拖拽滑动,所以在移动设备上使用更加方便,你只要用手指滑动屏幕即可切换图片。
在线预览
一款基于jQuery的支持鼠标拖拽滑动焦点图.rar
实现的代码。
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>
- $(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);
- });
- });
【一款基于jQuery的支持鼠标拖拽滑动焦点图】相关文章
本文来源:https://www.51html5.com/a1476.html
上一篇:用CSS与jQuery打造很炫的切换效果
下一篇:jQuery图片分组分页插件
﹝一款基于jQuery的支持鼠标拖拽滑动焦点图﹞相关内容
- jQuery鼠标滑动切换焦点图
- 一款基于jquery和css3的响应式二级导航菜单
- 一款基于jquery和css3的头像恶搞特效
- 7款基于jquery实现web前端的源码特效
- 5款基于jQuery实现的动画的源码
- 支持鼠标滚轮缩放的图片放大镜效果
- 一款基于css3和jquery实现的动画弹出层
- 基于jQuery的图片相册滑出放大插件
- 用jquery实现鼠标滑动星级评分特效
- jQuery滑动杆打分插件 可左右滑动