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 相关文章推荐
网站页面自动跳转实现方法PHP、JSP(下)
Aug 01 Javascript
ASP.NET jQuery 实例12 通过使用jQuery validation插件简单实现用户注册页面验证功能
Feb 03 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
Javascript类型系统之undefined和null浅析
Jul 13 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
JS轮播图实现简单代码
Feb 19 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
js实现文件上传功能 后台使用MultipartFile
Sep 08 Javascript
JavaScript偏函数与柯里化实例详解
Mar 27 Javascript
vuex(vue状态管理)的特殊应用案例分享
Mar 03 Javascript
如何用JavaScript实现一个数组惰性求值库
May 05 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
星际实力自我测试
2020/03/04 星际争霸
浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法
2013/01/11 PHP
对联广告js flash激活
2006/10/19 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
Javascript实现重力弹跳拖拽运动效果示例
2013/06/28 Javascript
document.write()及其输出内容的样式、位置控制
2013/08/12 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
jquery选择器使用详解
2014/04/08 Javascript
node.js中的fs.lchmod方法使用说明
2014/12/16 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
element ui 表格动态列显示空白bug 修复方法
2018/09/04 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
Python中针对函数处理的特殊方法
2014/03/06 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
python 显示数组全部元素的方法
2018/04/19 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
python如何爬取网站数据并进行数据可视化
2019/07/08 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
关于Python Tkinter Button控件command传参问题的解决方式
2020/03/04 Python
别名指示符是什么
2012/10/08 面试题
简历中自我评价范文3则
2013/12/14 职场文书
联谊活动策划书
2014/01/26 职场文书
教师个人自我鉴定
2014/02/08 职场文书
中职毕业生自我鉴定范文(3篇)
2014/09/28 职场文书
美容院合作经营协议书
2014/10/10 职场文书
青年人初次创业的“五不要”
2019/08/23 职场文书