您的位置：首页 > 其它

手机滑动图片切换实例

2015-01-19 16:03 351 查看 
纯js代码   适用于移动端
 <body><div class="m-slider"><ul class="cnt" id="slider"><li><img src="http://images.cnblogs.com/cnblogs_com/aiyuchen/437722/o_3068640196117481166.jpg" alt="" /><p>20140813镜面的世界，终究只是倒影。看得到你的身影，却触摸不到你的未来</p></li><li><img src="http://images.cnblogs.com/cnblogs_com/aiyuchen/437722/o_4798022453110310215.jpg" alt="" /><p>20140812锡林浩特前往东乌旗S101必经之处，一条极美的铁路。铁路下面是个小型的盐沼，淡淡的有了一丝天空之境的感觉。可惜在此玩了一个小时也没有看见一列火车经过，只好继续赶往东乌旗。</p></li><li><img src="http://images.cnblogs.com/cnblogs_com/aiyuchen/437722/o_6608946691259322175.jpg" alt="" /><p>20140811水的颜色为什么那么蓝，我也纳闷，反正自然饱和度和对比度拉完就是这个颜色的</p></li><li><img src="http://images.cnblogs.com/cnblogs_com/aiyuchen/437722/o_6619295294699949331.jpg" alt="" /><p>海洋星球3重庆天气热得我想卧轨自杀</p></li><li><img src="http://images.cnblogs.com/cnblogs_com/aiyuchen/437722/o_3068640196117481166.jpg" alt="" /><p>以上这些作品分别来自两位设计师作为观者，您能否通过设计风格进行区分</p></li></ul></div>
</body>
 var slider = {// 判断设备是否支持touch事件touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,slider: document.getElementById('slider'),// 事件events: {index: 0,                                       // 显示元素的索引slider: this.slider,                            // this为slider对象icons: document.getElementById('icons'),icon: this.icons.getElementsByTagName('span'),handleEvent: function(event) {// this指events对象var self = this;if (event.type == 'touchstart') {self.start(event);} else if(event.type == 'touchmove') {self.move(event);} else if(event.type == 'touchend') {self.end(event);}},// 滑动开始start: function(event) {event.preventDefault();                      // 阻止触摸事件的默认动作,即阻止滚屏var touch = event.touches[0];                // touches数组对象获得屏幕上所有的touch，取第一个touchstartPos = {                                 // 取第一个touch的坐标值x: touch.pageX,y: touch.pageY,time: +new Date};// 绑定事件this.slider.addEventListener('touchmove', this, false);this.slider.addEventListener('touchend', this, false);},// 移动move: function(event) {event.preventDefault();                      // 阻止触摸事件的默认行为，即阻止滚屏// 当屏幕有多个touch或者页面被缩放过，就不执行move操作if (event.touches.length > 1 || event.scale && event.scale !== 1) return;var touch = event.touches[0];endPos = {x: touch.pageX - startPos.x,y: touch.pageY - startPos.y};// 执行操作，使元素移动this.slider.className = 'cnt';this.slider.style.left = -this.index * 600 + endPos.x + 'px';},// 滑动释放end: function(event) {var duration = +new Date - startPos.time;    // 滑动的持续时间this.icon[this.index].className = '';if (Number(duration) > 100) {// 判断是左移还是右移，当偏移量大于50时执行if (endPos.x > 50) {if(this.index !== 0) this.index -= 1;} else if(endPos.x < -50) {if (this.index !== 4) this.index += 1;}}this.slider.className = 'cnt f-anim';this.slider.style.left = -this.index*600 + 'px';this.icon[this.index].className = 'curr';// 解绑事件this.slider.removeEventListener('touchmove', this, false);this.slider.removeEventListener('touchend', this, false);}},// 初始化init: function() {// this指slider对象var self = this;// addEventListener第二个参数可以传一个对象，会调用该对象的handleEvent属性if(!!self.touch) self.slider.addEventListener('touchstart', self.events, false);}};slider.init();
 *{margin:0;padding:0;}li{list-style:none;}.m-slider{width:600px;margin:50px 20px;overflow:hidden;}.m-slider .cnt{position:relative;left:0;width:3000px;}.m-slider .cnt li{float:left;width:600px;}.m-slider .cnt img{display:block;width:100%;height:450px;}.m-slider .cnt p{margin:20px 0;}.m-slider .icons{text-align:center;color:#000;}.m-slider .icons span{margin:0 5px;}.m-slider .icons .curr{color:red;}.f-anim{-webkit-transition:left .2s linear;}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航