移动端slider滑动插件

Html

Css


    

请在移动端查看效果，pc端无法拖动

* {
	margin:0;
	padding:0;
}

var toggle = {
     startScroll: 0, //手指触屏时的坐标
     endScroll: 0, //手指离开时坐标
     isScroll: 0, //已经移动的距离
     moveCurrency: 0, //移动中的高亮下标
     step: 0, //每次移动距离
     data: {
         list: ['凌晨', '空腹', '早餐后', '午餐前', '午餐后', '晚餐前', '晚餐后', '睡前'],
         isScrollNum: -2, //当前移动数量  [注意：值小于等于０]
         showNum: 5, //显示个数
         divHeight: 50 //div的高度
     },
     toggle: '',
     slip: '',
     li: '',
     init: function() {
         this.toggle = document.getElementsByClassName('toggle')[0];
         this.slip = this.toggle.getElementsByClassName('slip')[0];
         this.step = this.view().width / this.data.showNum;
         this.isScroll = this.step * ((this.data.showNum - 1) / 2 + this.data.isScrollNum);
         this.toggleStyle();
         this.slipStyle();
         this.addData();
         this.liStyle();
         this.scroll(this.isScroll);
         this.lightStyle(-this.data.isScrollNum);
         this.slip.addEventListener('touchstart', this.startMove.bind(this));
         this.slip.addEventListener('touchmove', this.nowMove.bind(this));
         this.slip.addEventListener('touchend', this.endMove.bind(this));

},
     toggleStyle: function() {
         this.toggle.style.backgroundColor = '#2cc0cf';
         this.toggle.style.height = this.data.divHeight + 'px';
         this.toggle.style.lineHeight = this.data.divHeight + 'px';
         this.toggle.style.overflow = 'hidden';
     },
     slipStyle: function() {
         this.slip.style.width = this.step * (this.data.list.length) + 'px';
     },
     liStyle: function() {
         this.li = this.slip.getElementsByTagName('li');
         for (var i = 0; i < this.li.length; i++) {
             this.li[i].style.color = '#fff';
             this.li[i].style.listStyle = 'none';
             this.li[i].style.display = 'inline-block';
             this.li[i].style.textAlign = 'center';
             this.li[i].style.fontWeight = 600;
             this.li[i].style.transition = 'all 150ms';
             this.li[i].style.webkitTransition = 'all 150ms';
         }
     },
     view: function() {
         return {
             width: document.documentElement.clientWidth || document.body.clientWidth,
             height: document.documentElement.clientHeight || document.body.clientHeight
         }
     },
     addData: function() {
         for (var i = 0; i < this.data.list.length; i++) {
             var li = document.createElement('li');
             li.innerHTML = this.data.list[i];
             li.style.width = this.step + 'px';
             this.slip.appendChild(li);
         }
     },
     lightStyle: function(curr) {
         for (var i = 0; i < this.li.length; i++) {
             this.li[i].style.opacity = 0.8;
             this.li[i].style.fontSize = '14px';
         }
         this.li[curr].style.opacity = 1;
         this.li[curr].style.fontSize = '18px';
     },
     startMove: function() {
         var e = window.event || arguments[0];
         this.startScroll = e.changedTouches[0].pageX;
     },
     nowMove: function() {
         var e = window.event || arguments[0];
         var figureScroll = e.changedTouches[0].pageX - this.startScroll;
         var nowScroll = figureScroll + this.isScroll;
         var isLight = figureScroll / this.step;
         this.scroll(nowScroll);
         //判断移动过程中是否高亮？
         if (isLight > 0.5) {
             this.moveCurrency = -this.data.isScrollNum - 1;
         } else if (isLight < 0 && Math.abs(isLight) > 0.5) {
             this.moveCurrency = -this.data.isScrollNum + 1;
         }
         if (this.moveCurrency < 0) {
             this.moveCurrency = 0;
         } else if (this.moveCurrency > this.li.length - 1) {
             this.moveCurrency = this.li.length - 1;
         }
         this.lightStyle(this.moveCurrency);
     },
     endMove: function() {
         var e = window.event || arguments[0];
         this.endScroll = e.changedTouches[0].pageX - this.startScroll;
         this.isScroll = this.endScroll / this.step;
         if (this.isScroll > 0.5) {
             this.data.isScrollNum++;
         } else if (this.isScroll < 0 && Math.abs(this.isScroll) > 0.5) {
             this.data.isScrollNum--;
         }
         if (this.data.isScrollNum < -this.li.length + 1) {
             this.data.isScrollNum = -this.li.length + 1;
         } else if (this.data.isScrollNum > 0) {
             this.data.isScrollNum = 0;
         }
         this.isScroll = (this.data.isScrollNum + (this.data.showNum - 1) / 2) * this.step;
         this.scroll(this.isScroll);
         this.lightStyle(-this.data.isScrollNum);
     },
     scroll: function(scroll) {
         this.slip.style.transform = 'translateX(' + scroll + 'px)';
         this.slip.style.webkitTransform = 'translateX(' + scroll + 'px)';
     }
 }
 toggle.init();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

移动端slider滑动插件



代码描述：slider滑动插件，原生js

1

最新

发表评论全部评论

暂时没有评论！

■冰翼■0

2019/4/12 17:18:52

this.isscroll = this.step * ((this.data.shownum - 1) / 2 + this.data.isscrollnum);有人知道这公式表示什么意思吗？回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

狂奔的蚂蚁

相关代码

移动端slider滑动插件

最新