最新赞助活动温馨提示:自愿赞助服务器费用,学生和没有工作的整站资源免费下载!
头像

html5支持左右键切换页面

来源:http://www.erdangjiade.com/ 沐浴春风 2016-02-05 20:53浏览(1621)

本文演示了3个不同的页面轮播切换,代码小编是看不懂。

0、请不要问“在不在”之类的问题,有问题直接问!1、学生或暂时没有工作的童鞋,整站资源免费下载!2、¥9.9充值终身VIP会员,加我微信,826096331 拉你进VIP群学习!3、程序员加油,技术改变世界。在线 充值

html5支持左右键切换页面
分类:3D > 页面滚动 难易:高级
查看演示 下载资源 下载积分: 30 积分

切换页面html代码

<article class="kontext">  
    <div class="layer one show">  
        <h2>erdangjiade</h2>  
        <p>洗牌式页面切换动画效果。使用下面的圆点按钮或键盘方向键切换页面。</p>  
    </div>  
    <div class="layer two">  
        <h2>第二页</h2>  
    </div>  
    <div class="layer three">  
        <h2>第三页</h2>  
    </div>  
</article>
// Create a new instance of kontext 
var k = kontext(document.querySelector('.kontext')); 
// API METHODS: 
 
// k.prev(); // Show prev layer 
// k.next(); // Show next layer 
// k.show( 3 ); // Show specific layer 
// k.getIndex(); // Index of current layer 
// k.getTotal(); // Total number of layers 
// DEMO-SPECIFIC: 
 
var bulletsContainer = document.body.querySelector('.bullets'); 
 
// Create one bullet per layer 
for (var i = 0, len = k.getTotal(); i < len; i++) { 
    var bullet = document.createElement('li'); 
    bullet.className = i === 0 ? 'active' : ''
    bullet.setAttribute('index', i); 
    bullet.onclick = function(event) { 
        k.show(event.target.getAttribute('index')) 
    }
    bullet.ontouchstart = function(event) { 
        k.show(event.target.getAttribute('index')) 
    }
    bulletsContainer.appendChild(bullet); 
} 
 
// Update the bullets when the layer changes 
k.changed.add(function(layer, index) { 
    var bullets = document.body.querySelectorAll('.bullets li'); 
    for (var i = 0, len = bullets.length; i < len; i++) { 
        bullets[i].className = i === index ? 'active' : ''
    } 
}); 
 
document.addEventListener('keyup'function(event) { 
    if (event.keyCode === 37
        k.prev(); 
    if (event.keyCode === 39
        k.next(); 
}, false); 
 
var touchX = 0
var touchConsumed = false; 
 
document.addEventListener('touchstart'function(event) { 
    touchConsumed = false; 
    lastX = event.touches[0].clientX; 
}, false); 
 
document.addEventListener('touchmove'function(event) { 
    event.preventDefault(); 
 
    if (!touchConsumed) { 
        if (event.touches[0].clientX > lastX + 10{ 
            k.prev(); 
            touchConsumed = true; 
        } 
        else if (event.touches[0].clientX < lastX - 10{ 
            k.next(); 
            touchConsumed = true; 
        } 
    } 
}, false);
标签: 页面切换洗牌
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/741.html
评论2
头像

友情提示:垃圾评论一律封号 加我微信:826096331拉你进VIP群学习群

  • 头像 椅子
    11-02 14:48
    dw971109
    这个效果看起来不错<br />
  • 头像 沙发
    03-14 08:30
    ngu137
    不错的轮播效果,好看。。。
1 2