jQuery手指滑动轮播效果

备注 : 需要引入对应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手指滑动轮播效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果

    Flexslider是一款基于的jQuery内容滚动插件.它能让你轻松的创建内容滚动的效果,具有非常高的可定制性.开发者可以使用Flexslider轻松创建各种图片轮播效果.焦点图效果.图文混排滚动效果. 下载源码 Flexslider具有以下特性: 支持滑动和淡入淡出效果. 支持水平.垂直方向滑动. 支持键盘方向键控制. 支持触控滑动. 支持图文混排,支持各种html元素. 自适应屏幕尺寸. 可控制滑动单元个数. 更多选项设置和回调函数. HTML 首先在页面head部位载入jquery库文件

  • jQuery手指滑动轮播效果

    备注 : 需要引入对应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> <s

  • js原生实现移动端手指滑动轮播图效果的示例

    如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0

  • 非常棒的jQuery图片轮播效果

    本文实例为大家分享了jQuery图片轮播效果,很个性,具体内容如下 购物产品展示:图片轮播器,效果如下所示: 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果 两个区域:    最外层容器区域,如上图红色线框矩形    选项卡区域 两个事件:     鼠标悬浮或鼠标划入mouseover     鼠标离开mouseleave /**大屏广告滚动样式**/ <!DOCTYPE html> <html lang="en"> <head> &l

  • js实现滑动轮播效果

    本文实例为大家分享了js实现滑动轮播效果的具体代码,供大家参考,具体内容如下 1.构建html样式,代码如下 <div class="banner"> <ul> <li> <a href="#" > <img src="images/1.jpeg"> </a> </li> <li> <a href="#" > <i

  • jQuery幻灯片带缩略图轮播效果代码分享

    这是一款基于jquery实现的底部带缩略图的幻灯片切换特效代码,幻灯片可以点击下方的缩略图切换,用户还可以自定义对应幻灯片的标题与文字说明,是一款非常实用的幻灯片特效源码. 为大家分享的jQuery幻灯片带缩略图轮播代码如下 <html> <head> <title>带缩略图的jQuery幻灯片轮播效果</title> <link href="css/css.css" rel="stylesheet" type=

  • jQuery实现轮播图效果demo

    本文实例为大家分享了jQuery实现轮播图效果的具体代码,供大家参考,具体内容如下 效果展示: 编程思路: 1. 首先是基础的布局,使用"子绝父相"等页面布局方法,将图片.左右按钮以及每张图片下方对应的标识小按钮安排的明明白白. 2. JS中在通过点击左右按钮来切换图片时,使用三个变量分别来表示当前显示的图片序号.点击上一张按钮时候显示的图片序号.点击下一张按钮时候显示的图片序号. 3. 在自动轮播的时候,通过使用定时器来改变当前显示的图片序号来控制轮播 具体代码: HTML代码: &

  • 原生JS无缝滑动轮播图

    本文实例为大家分享了原生JS无缝滑动轮播图的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul,div,img{ margin: 0; padding

  • 原生js滑动轮播封装

    本文实例为大家分享了原生js滑动轮播的具体代码,供大家参考,具体内容如下 封装滑动轮播 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met

  • 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件能够帮助到你. Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如下特色: ✓  16个独特的过渡效果

  • 使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果

    旋转叠加 平移 前段时间做Hybrid App,UI设计湿要求某一个页面的展示要实现滑动轮播效果,选中的内容卡片居中显示,上一个内容卡片和下一个内容以小一倍的大小显示在选中的卡片后头,而且要高斯模糊等等..最骚的是滑动特效要是一个个旋转叠加.(摔! 当时用的是vue-cli-3 + ant-design-vue实现的页面,发现ant-design-vue里头有现成的Carousel组件可用,由于排期比较急,先暂时用这个实现了第一版,没有特效没有其他花里胡哨的展示.验收完第一版后,发现ant-de

随机推荐