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 相关文章推荐
用javascript实现的仿Flash广告图片轮换效果
Apr 24 Javascript
海量经典的jQuery插件集合
Jan 12 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
JS日期格式化之javascript Date format
Oct 01 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
JS实现京东商品分类侧边栏
Dec 11 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版本号
2006/10/09 PHP
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
php 删除记录同时删除图片文件的实现代码
2010/05/12 PHP
让PHP显示Facebook的粉丝数量方法
2014/01/08 PHP
php编程每天必学之验证码
2016/03/03 PHP
php利用嵌套数组拼接与解析json的方法
2017/02/07 PHP
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
2016/12/08 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
看看“疫苗查询”小程序有温度的代码
2018/07/31 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
基于vue实现探探滑动组件功能
2020/05/29 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
利用python程序帮大家清理windows垃圾
2017/01/15 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
python生成带有表格的图片实例
2019/02/03 Python
python脚本开机自启的实现方法
2019/06/28 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
加拿大租车网站:Enterprise Rent-A-Car
2018/07/26 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
关联、聚合(Aggregation)以及组合(Composition)的区别
2012/02/29 面试题
灵泰克Java笔试题
2016/01/09 面试题
工厂标语大全
2014/10/06 职场文书
房屋财产继承协议书范本
2014/11/03 职场文书
队名及霸气口号大全
2015/12/25 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技