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 powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
图文详解JavaScript的原型对象及原型链
Aug 02 Javascript
vue组件实例解析
Jan 10 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
javascript中的event loop事件循环详解
Dec 14 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 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学习之简单计算器实现代码
2011/06/09 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
JavaScript中的Location地址对象
2008/01/16 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
RGB和YUV 多媒体编程基础详细介绍
2016/11/04 Javascript
详解nodejs的express如何自动生成项目框架
2017/07/12 NodeJs
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
vue全局使用axios的操作
2020/09/08 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python datetime时间格式化去掉前导0
2014/07/31 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
django实现用户注册实例讲解
2019/10/30 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
享受加州生活方式的时尚舒适:XCVI
2018/07/09 全球购物
英文版销售经理个人求职信
2013/11/20 职场文书
大学毕业感言
2014/01/10 职场文书
给老师的道歉信
2014/01/11 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
环保倡议书100字
2014/05/15 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
上班迟到检讨书
2014/09/15 职场文书
2014预防青少年违法犯罪工作总结
2014/12/10 职场文书
介绍信格式样本
2015/05/05 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书