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 相关文章推荐
jquery validate poshytip 自定义样式
Nov 26 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
使用jquery操作session方法分享
Jan 22 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
js实现添加删除表格(两种方法)
Apr 27 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
Aug 16 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
Jan 23 Javascript
微信小程序官方动态自定义底部tabBar的例子
Sep 04 Javascript
js实现电灯开关效果
Jan 19 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
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
Yii使用migrate命令执行sql语句的方法
2016/03/15 PHP
PHP线程的内存回收问题
2016/07/08 PHP
Python中使用django form表单验证的方法
2017/01/16 PHP
PHP定义字符串的四种方式详解
2018/02/06 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
超清晰的document对象详解
2007/02/27 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
浅谈Vue.js组件(二)
2019/04/09 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
js实现简单五子棋游戏
2020/05/28 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python自动翻译实现方法
2016/05/28 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
Django Model中字段(field)的各种选项说明
2020/05/19 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
大学毕业感言
2014/01/10 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
老师的检讨书
2014/02/23 职场文书
怎样填写就业意向
2014/04/02 职场文书
单位绩效考核方案
2014/05/11 职场文书
专项法律服务方案
2014/06/11 职场文书
2015入党自传书范文
2015/06/26 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
python编程实现清理微信重复缓存文件
2021/11/01 Python
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技