JS实现点击拉拽轮播图pc端移动端适配


Posted in Javascript onSeptember 05, 2018
<div class="content">
      <button class="left">left</button>
      <button class="right">right</button>
      <div class="index"></div>
      <div class="lists">
        <!--<!–width: item的数量÷3乘以100%–>-->
        <div class="box">
          <!--width: 1÷item的数量乘以100%-->
          <div class="item">
            <img src="a.png" alt="a">
            <p>aaa</p>
          </div>
          <div class="item active">
            <img src="b.png" alt="b">
            <p>bbb</p>
          </div>
          <div class="item">
            <img src="c.png" alt="c">
            <p>ccc</p>
          </div>
          <div class="item">
            <img src="d.png" alt="d">
            <p>ddd</p>
          </div>
          <div class="item">
            <img src="e.png" alt="e">
            <p>eee</p>
          </div>
          <div class="item">
            <img src="f.png" alt="f">
            <p>ffff</p>
          </div>
        </div>
      </div>
    </div>
<script>
      $(function(){
//        循环数据 假设有个数组,有10条数据
//         var arr = [1,2,3,4,5,6,7,8,9,10];
//         var arr_len = arr.length;
//         var box = '<div class="box" style="width: '+arr_len/3*100+'%;"></div>';
//         $('.lists').append(box);
//         for (var i = 0; i < arr_len;i++){
//           var newDiv = document.createElement('div');
//           newDiv.innerHTML = '<img src="static/images/search-icon.png"/>'+
//             '<p>' +
//             (i+1)+
//             '</p>';
//           newDiv.className = 'item '+(i==1?'active':'');
//           newDiv.style = 'width: '+1/arr_len*100+'%;';
//           newDiv.onclick = (function(ind) {
//             return function () {
//               index = ind-1;
//               console.log(ind)
//               $(".box").animate({left: -index*100/3+"%"})
//               $(".item").removeClass('active')
//               $($(".item")[index+1]).addClass('active');
//               $('.index').text(index+2)
//             }
//           })(i) ;
//           $('.box').append(newDiv);
//         }
        var arr_len = $('.item').length;
        $('.box').css({width: arr_len/3*100+'%'})
        $('.item').css({width: 1/arr_len*100+'%'})
        $('.item').on('click',function (e) {
          var _this = $(e.target);
          if (!_this.hasClass('item')){
            _this = _this.parents('.item');
          }
          index = _this.index('.item')-1;
          $(".box").animate({left: -index*100/3+"%"})
          $(".item").removeClass('active')
          $($(".item")[index+1]).addClass('active');
          $('.index').text(index+2)
        })
        var index = 0;
        var len = arr_len;
        var temp = true;
        var pageX,pageY;
        $('.content').on('touchstart',function (e) {
          var touches = e.originalEvent.targetTouches[0];
          pageX = touches.pageX;
          pageY = touches.pageY;
        }).on('touchmove',function (e) {
          var touches = e.originalEvent.targetTouches[0];
          if (pageX>touches.pageX+20){
            left()
          }else if (pageX<touches.pageX-20){
            right()
          }
        })
        $(".left").on('click',left)
        $(".right").on('click',right)
        function left() {
          console.log(index,temp,'left')
          if (index < len-2&&temp){
            index++;
            move(index)
          }
        }
        function right() {
          if (index > 0&&temp){
            index--;
            move(index)
          }
        }
        function move(index) {
          if (temp){
            temp = false;
            var left = $(".box").offset().left;
            $(".box").animate({left: -index*100/3+"%"},function () {
              temp = true;
            })
            $(".item").removeClass('active')
            $($(".item")[index+1]).addClass('active');
            $('.index').text(index+2)
          }
        }
      })
.lists {
        position: relative;
        height: 100px;
        overflow: hidden;
      }
      .box {
        position: absolute;
      }
      .item {
        float: left;
        background: #008000;
        height: 100px;
      }
      .item img {
        width: 20px;
        display: block;
        margin: 0 auto;
      }
      .item p {
        text-align: center;
      }
      .item.active {
        background: #0000FF;
        font-size: 30px;
      }
      .item.active img {
        width: 40px;
      }
      .item.active p {
        font-size: 30px;
      }

总结

以上所述是小编给大家介绍的JS实现点击拉拽轮播图pc端移动端适配,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jquery的商品展示放大镜
Aug 07 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
前端js文件合并的三种方式推荐
May 19 Javascript
js实现常见的工具条效果
Mar 02 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
vue基于mint-ui实现城市选择三级联动
Jun 30 Javascript
微信小程序实现简单跑马灯效果
May 26 Javascript
在vue中使用G2图表的示例代码
Mar 19 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 #Javascript
解决vue点击控制单个样式的问题
Sep 05 #Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 #Javascript
vuejs点击class变化的实例
Sep 05 #Javascript
jQuery滑动效果实现方法分析
Sep 05 #jQuery
vue+springboot实现项目的CORS跨域请求
Sep 05 #Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
You might like
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
解决php接收shell返回的结果中文乱码问题
2014/01/23 PHP
php封装的验证码类分享
2017/02/26 PHP
PHP使用finfo_file()函数检测上传图片类型的实现方法
2017/04/18 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
js根据给定的日期计算当月有多少天实现思路及代码
2013/02/25 Javascript
转义字符(\)对JavaScript中JSON.parse的影响概述
2013/07/17 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
2015/09/11 Javascript
详解Angular 4.x 动态创建组件
2017/04/25 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
vue实现中部导航栏布局功能
2019/07/30 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
跟老齐学Python之眼花缭乱的运算符
2014/09/14 Python
对pandas中apply函数的用法详解
2018/04/10 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
不归路系列:Python入门之旅-一定要注意缩进!!!(推荐)
2019/04/16 Python
pytorch方法测试——激活函数(ReLU)详解
2020/01/15 Python
CSS3 实现童年的纸飞机
2019/05/05 HTML / CSS
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
天巡全球:Skyscanner Global
2017/06/20 全球购物
英国厨房与餐具用品为主的设计品牌:Joseph Joseph
2018/04/26 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
机械机修工岗位职责
2014/08/03 职场文书
批评与自我批评发言稿
2014/10/15 职场文书
2014年应急工作总结
2014/12/11 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技
Win2008系统搭建DHCP服务器
2022/06/25 Servers