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 Ajax 跨域访问的解决方案
Mar 12 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
js制作网站首页图片轮播特效代码
Aug 30 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
vue组件实现可搜索下拉框扩展
Oct 23 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 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 csv操作类代码
2009/12/14 PHP
探讨PHP使用eAccelerator的API开发详解
2013/06/09 PHP
深入理解PHP中的global
2014/08/19 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
javascript Deferred和递归次数限制实例
2014/10/21 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
python3.0 字典key排序
2008/12/24 Python
python抽象基类用法实例分析
2015/06/04 Python
Python内存管理方式和垃圾回收算法解析
2017/11/11 Python
Python实现的栈(Stack)
2018/01/26 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
利用python提取wav文件的mfcc方法
2019/01/09 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
python实现代码统计器
2019/09/19 Python
三个python爬虫项目实例代码
2019/12/28 Python
pytorch+lstm实现的pos示例
2020/01/14 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
python进行参数传递的方法
2020/05/12 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
2014年乡镇植树节活动方案
2014/02/28 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
群众路线教育实践活动自我剖析思想汇报
2014/10/04 职场文书
停电通知范文
2015/04/16 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python