jQuery手指滑动轮播效果


Posted in Javascript onDecember 22, 2016

备注 : 需要引入对应js

下面给大家分享下实现代码,具体代码如下所示:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
<script type="text/javascript" src="js/jquery.touchSlider.js"></script>
// style 代码
@charset "utf-8";
*{margin:0;padding:0;list-style:none;border:0;}
body{width:100%;margin:0 auto;overflow:hidden}
/* main_image */
.main_visual{height:422px;border-top:1px solid #d7d7d7;overflow:hidden;position:relative;}
.main_image{height:422px;overflow:hidden;position:relative;}
.main_image ul{width:9999px;height:422px;overflow:hidden;position:absolute;top:0;left:0}
.main_image li{float:left;width:100%;height:422px;}
.main_image li span{display:block;width:100%;height:422px}
.main_image li a{display:block;width:100%;height:422px}
.main_image li .img_1{background:url('../images/img_main_1.jpg') center top no-repeat}
.main_image li .img_2{background:url('../images/img_main_2.jpg') center top no-repeat}
.main_image li .img_3{background:url('../images/img_main_3.jpg') center top no-repeat}
.main_image li .img_4{background:url('../images/img_main_4.jpg') center top no-repeat}
.main_image li .img_5{background:url('../images/img_main_5.jpg') center top no-repeat}
div.flicking_con{position:absolute;top:360px;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(../images/hover_left.png) no-repeat left top;left:100px;}
#btn_next{background:url(../images/hover_right.png) no-repeat right top;right:100px;}
// html 代码
<div class="main_visual">
  <div class="flicking_con">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
  </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 href="javascript:;" id="btn_prev"></a>
    <a href="javascript:;" id="btn_next"></a>
  </div>
</div>
// jQuery 代码
$(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手指滑动轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
Nov 18 Javascript
jQ处理xml文件和xml字符串的方法(详解)
Nov 22 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
Jan 17 Javascript
使用ionic播放轮询广告的实现方法(必看)
Apr 24 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
npm qs模块使用详解
Feb 07 Javascript
JS严格模式原理与用法实例分析
Apr 27 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
自动适应iframe右边的高度
Dec 22 #Javascript
微信小程序 自己制作小组件实例详解
Dec 22 #Javascript
JS正则子匹配实例分析
Dec 22 #Javascript
JS定时检测任务任务完成后执行下一步的解决办法
Dec 22 #Javascript
jQuery无缝轮播图代码
Dec 22 #Javascript
jQuery实现两列等高并自适应高度
Dec 22 #Javascript
JS常用加密编码与算法实例总结
Dec 22 #Javascript
You might like
第八节 访问方式 [8]
2006/10/09 PHP
PHP在获取指定目录下的目录,在获取的目录下面再创建文件,多平台
2011/08/03 PHP
PHP异步调用socket实现代码
2012/01/12 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
php生成验证码函数
2015/10/20 PHP
php可变长参数处理函数详解
2017/02/22 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
JavaScript 学习 - 提高篇
2007/02/02 Javascript
利用ASP发送和接收XML数据的处理方法与代码
2007/11/13 Javascript
jQuery学习之prop和attr的区别示例介绍
2013/11/15 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
2016/01/25 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
Python单链表的简单实现方法
2014/09/23 Python
python实现百度语音识别api
2018/04/10 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
西班牙英格列斯百货官网:El Corte Inglés
2016/09/25 全球购物
学生打架检讨书1000字
2014/01/16 职场文书
先进党支部申报材料
2014/12/24 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
python numpy中multiply与*及matul 的区别说明
2021/05/26 Python