手机端+PC端无缝滚动
2016-01-06 00:00
417 查看
<!--
一、由于touchend,touchcancel在安卓浏览器上是有bug,所以采用了百度的touch.js事件
二、左右箭头部分在手机端自动隐藏
三、PC上使用左右箭头切换+自动轮播
四、无线端使用向左向右拖拽，类似京东等手机端轮播效果
手机端事件：
- 不支持dbclick
- touch相关
+ touchstart 按上去的时候触发
+ touchmove 滑动的时候
+ touchend 手指从屏幕离开的时候触发，在安卓手机浏览器上有bug，失效
+ touchcancel 同上
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>墨鱼教育</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
html,body{
width: 100%;
}
#wrapper{
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
#wrapper .mainList{
position: absolute;
height: 200px;
}
#wrapper .mainList{
width: 100%;
}
#wrapper .mainList li{
width: 100%;
height: 200px;
float:left;
}
.sc_prev,
.sc_next{
position: absolute;
width: 10px;
height: 20px;
background-color: #000;
color:#000;
top:50%;
margin-top:-10px;
}
.sc_prev{
left:0;
}
.sc_next{
right:0;
}
@media screen and (max-width: 800px){
.sc_prev,
.sc_next{
display: none;
}
}
.dottArea{
position: absolute;
width: 100%;
height: 15px;
bottom:20px;
left:0;
}
.dotList li{
width: 15px;
height: 15px;
border-radius: 100%;
background-color: #fff;
margin-right:10px;
display: inline-block;
}
.dotList li:nth-last-child(1){
margin:0;
}
.dotList{
margin:0 auto;
height: 15px;
text-align: center;
}
.dotList li.active{
background-color: purple;
}
</style>
<script>
var view_timer = null;
function viewPort(userAgent, pageWidth) {
var oView = document.getElementById('viewport');
//判断viewport是否存在，存在就移除掉（为onresize准备）
if (oView) {
document.head.removeChild(oView);
}
//设计尺寸的宽度，如果不给 默认为640
if (!pageWidth) {
pageWidth = 640;
}
var screen_w = parseInt(window.screen.width),
scale = screen_w / pageWidth;
if (/Android (\d+\.\d+)/.test(userAgent)) {
var creat_meta = document.createElement('meta');
creat_meta.name = 'viewport';
creat_meta.id = 'viewport';
var version = parseFloat(RegExp.$1);
if (version > 2.3) {
creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ',user-scalable=1, minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', target-densitydpi=device-dpi';
} else {
creat_meta.content = '"width=' + pageWidth + ', target-densitydpi=device-dpi';
}
document.head.appendChild(creat_meta);
} else {
var creat_meta = document.createElement('meta');
creat_meta.name = 'viewport';
creat_meta.id = 'viewport';
//检测横屏
if (window.orientation == '-90' || window.orientation == '90') {
scale = window.screen.height / pageWidth;
creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi';
} else {
creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi';
}
document.head.appendChild(creat_meta);
}
}
viewPort(navigator.userAgent);
window.onresize = function () {
clearTimeout(view_timer);
view_timer = setTimeout(function(){
viewPort(navigator.userAgent);
}, 500)
}
</script>
</head>
<body>
<div id="wrapper">
<ul class="mainList">
<!--轮播的主体，你可以把你的图片等各种东西放在这里面 开始-->
<li style="background-color:green;"></li>
<li style="background-color:red;"></li>
<li style="background-color:yellow;"></li>
<!--轮播的主体，你可以把你的图片等各种东西放在这里面 结束-->
</ul>
<div class="dottArea">
<!--轮播圆点 开始-->
<ul class="dotList">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<!--轮播圆点 结束-->
</div>
<!--左右箭头切换 开始-->
<a href="javascript:void(0);" class="sc_prev"></a>
<a href="javascript:void(0);" class="sc_next"></a>
<!--左右箭头切换 结束-->
</div>
<!--百度touch.js手势库-->
<script src="touch-0.2.14.min.js"></script>
<script>
/*
思路：
一、ul和li的宽度用JS算出来的(li的宽度指定为100%，在手机上有问题，手动设置成px)
二、把第一个li复制一份放最后面，把最后一份li复制到第一个前面
三、左右箭头 a标签的优势是有hover
四、有圆点 不支持hover切换，只能看出当前的激活状态
五、自动轮播
*/
var oWrapper = document.getElementById("wrapper");
var oUl = oWrapper.getElementsByClassName("mainList")[0];
var oDotList = oWrapper.getElementsByClassName("dotList")[0];
var oNext = oWrapper.getElementsByClassName("sc_next")[0];
var oPrev = oWrapper.getElementsByClassName("sc_prev")[0];
var aLi = oUl.getElementsByTagName("li");
var aDottedList = oWrapper.getElementsByClassName("dotList")[0].getElementsByTagName("li");
var timer = null;
var flag = true;//防止连续快速点击
var isAinmate = false;//动画状态中，不支持手动切换
//把第一个li复制一份到最后一份后面
var tempLi = aLi[0].cloneNode(true);
var tempLi1 = aLi[aLi.length - 1].cloneNode(true);
oUl.appendChild(tempLi);
oUl.insertBefore(tempLi1,aLi[0]);
var perWidth = aLi[0].offsetWidth;
//设置ul的宽度
oUl.style.width = perWidth * aLi.length + "px";
//设置li的宽度为具体的象素值
for(var i=0;i<aLi.length;i++){
aLi[i].style.width = perWidth + "px";
}
//设置ul的left初始值
var initLeft = - perWidth;
oUl.style.left = initLeft + "px";
oPrev.addEventListener("click",function(){
if(isAinmate==true)return;
//当前的left值+一个li的宽度
clearInterval(timer);
qiehuan(oUl,perWidth,1,initLeft,function(){
flag = true;
zidong();
});
},true);
oNext.addEventListener("click",function(){
if(isAinmate==true)return;
//当前的left值+一个li的宽度
clearInterval(timer);
flag = false;
qiehuan(oUl,perWidth,-1,initLeft,function(){
flag = true;
zidong();
});
},true);
touch.on(oUl, 'swipeleft', function(ev){
if(isAinmate==true)return;
//当前的left值+一个li的宽度
clearInterval(timer);
flag = false;
qiehuan(oUl,perWidth,-1,initLeft,function(){
flag = true;
zidong();
});
});
touch.on(oUl, 'swiperight', function(ev){
if(isAinmate==true)return;
//当前的left值+一个li的宽度
clearInterval(timer);
qiehuan(oUl,perWidth,1,initLeft,function(){
flag = true;
zidong();
});
});
//定时器自动轮播,自动向左走
function zidong(){
if(flag == true){
timer = setInterval(function(){
flag = false;
qiehuan(oUl,perWidth,-1,initLeft,function(){
flag = true;
});
},3000);
}
}
//1代表向右走 -1代表往左走
function qiehuan(ele,width,direction,initLeft,cb){
isAinmate = true;
var totalWidth = ele.offsetWidth;//oUl的总宽度
var myWidth = ele.offsetLeft + direction*width;
// ele.style.left = myWidth + "px";
animate(ele,myWidth,1000,direction,function(){
if(totalWidth + myWidth <= width){
ele.style.left = initLeft + "px";
}
if(myWidth == 0){
ele.style.left = -(totalWidth - 2*width) + "px";
}
//切换小圆点
for(var i=0;i<aDottedList.length;i++){
if(aDottedList[i].className == "active"){
aDottedList[i].className = "";
if(direction == -1){
if(aDottedList[i+1]){
aDottedList[i+1].className = "active";
}else{
aDottedList[0].className = "active";
}
}else{
if(aDottedList[i-1]){
aDottedList[i-1].className = "active";
}else{
aDottedList[aDottedList.length - 1].className = "active";
}
}
break;
}
}
isAinmate = false;
cb();
});
}
function animate(ele,left,time,direction,cb){
var now = Date.now();
var initLeft = ele.offsetLeft;
var durationWidth = left - initLeft;
var timer = setInterval(function(){
var bili = (Date.now() - now)/time;
ele.style.left = initLeft + durationWidth*bili + "px";
if(bili>=1){
ele.style.left = left + "px";
clearInterval(timer);
cb();
}
},30);
}
//初始化
function main(){
zidong();
}
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 怎样实现MindMapper中数学公式的插入
- android点击事件
- 蜂窝教育iOS培训 助我实现梦想
- IOS UIApplication的核心作用
- Error: An App ID with identifier "*****" is not av
- IOS集成微信支付或者支付宝支付功能小结
- Android5.1.1源码 - host编译和设备编译
- iOS 通知
- Ubuntu快捷方式的描述
- 百度告警-Nagios接入，全方位告警接入，电话/短信/微信
- Top resources to learn Android
- Android中程序与Service交互(简单)
- Growth: 一个关于如何成为优秀Web Developer 的 App
- Android中程序与Service的交互
- Android 中 AIDL 的理解与使用
- Android studio中常用插件
- android中LayoutParams设置参数的理解
- Android拨打电话与发送信息
- Android自动化-双击操作
- Android中绑定模式Service的使用