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 插件 任意位置浮动固定层
Dec 25 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
JavaScript中的anchor()方法使用详解
Jun 08 Javascript
javascript正则表达式总结
Feb 29 Javascript
基于jquery实现图片放大功能
May 07 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 Javascript
vue-cli中的babel配置文件.babelrc实例详解
Feb 22 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
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递归调用与静态变量使用
2012/12/16 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
PHP URL路由类实例
2013/11/12 PHP
php Imagick获取图片RGB颜色值
2014/07/28 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
php session的应用详细介绍
2017/03/22 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
QQ登录简单实现代码
2021/03/09 Javascript
DOM 基本方法
2009/07/18 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
NodeJS http模块用法示例【创建web服务器/客户端】
2019/11/05 NodeJs
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
[02:51]DOTA2战队出征照拍摄花絮 TI3明星化身时尚男模
2013/07/22 DOTA
python实现合并两个数组的方法
2015/05/16 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
利用Hyperic调用Python实现进程守护
2018/01/02 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
Opencv-Python图像透视变换cv2.warpPerspective的示例
2019/04/11 Python
Python requests模块cookie实例解析
2020/04/14 Python
python实现扫雷小游戏
2020/04/24 Python
人力资源部经理岗位职责规定
2014/02/23 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
邀请函样本
2015/02/02 职场文书
给病人的慰问信
2015/03/23 职场文书
公司员工辞职信范文
2015/05/12 职场文书
民间借贷被告代理词
2015/05/23 职场文书
2016年春节问候语
2015/11/11 职场文书
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android
JS高级程序设计之class继承重点详解
2022/07/07 Javascript