您的位置：首页 > 其它
手机网页轮播切换，简易版

2014-11-18 00:52 225 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="format-detection"content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>手机轮播</title>
</head>

<style>
*{
padding:0;
margin:0;
}
ul,li{
list-style:none;
}
body{
width:100%;
overflow: hidden;
}
.mt10{margin-top:10px;}
.mt20{margin-top:20px;}
.nav{
width:100%;
height:40px;
line-height:40px;
display:-webkit-box;
-webkit-box-orient:horizontal;
background:orange;
}
.nav li{
width:20%;
text-align: center;
}
.nav li a{
color:#fff;
text-decoration:none;
font-weight:bold;
display: block;
transition:all .2s ease-in;
}
.nav li a:hover{
background:rgba(225,225,225,.5);
}
#box{
background:#f0f0f0;
height:250px;
overflow:hidden;
}
.img-list{
display:-webkit-box;
-webkit-box-orient:horizontal;
transition:all .2s ease-in;
}
.img-list li{
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-transform:translate3d(0,0,0);
}
</style>

<body>

<header>
<nav>
<ul class="nav">
<li><a href="#">首页</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系</a></li>
<li><a href="#">地址</a></li>
</ul>
</nav>
</header>

<section class="mt10" id="box">
<ul class="img-list">
<li><a href="#"><img src="http://pic.jxnews.com.cn/0/02/40/67/2406711_955318.jpg" alt=""></a></li>
<li><a href="#"><img src="http://www.xingbar.com.cn/pmap/16beac34dae343313080d02ea07c0ddd.bmp" alt=""></a></li>
<li><a href="#"><img src="http://www.bdall.com/attachments/2014/01/1880_201401141612351qo4J.thumb.jpg" alt=""></a></li>
<li><a href="#"><img src="http://www.easyhomehouseware.com/img/aHR0cDovL25jYXIuY2MvYXR0YWNobWVudHMvMjAxMS8wNC8xXzIwMTEwNDIwMTcwMzI0MVdlZTIudGh1bWIuanBn.jpg" alt=""></a></li>
<li><a href="#"><img src="http://www.bdall.com/attachments/2012/01/156142_2012013110372932hh7.thumb.jpg" alt=""></a></li>
</ul>
</section>

<script>

function Slider(options)
{
this.box = options.box;
//获取dom元素方法
this.getDom();
this.goSlider();
}

Slider.prototype.getDom = function()
{
//获取窗口宽度
this.windowWidth = window.innerWidth;
//获取dom元素
var box = this.box;
this.ul = box.getElementsByTagName('ul')[0];
var ul = this.ul;
this.li = ul.getElementsByTagName('li');
var li = this.li;

box.style.width = this.windowWidth +'px';

for(var i = 0 , len = li.length ; i < len ; i++ )
{
li[i].style.width = this.windowWidth +'px';
}

ul.style.width = this.windowWidth * (li.length) +'px';
}

//go
Slider.prototype.goSlider = function()
{
var num = 0;
var self = this;
var ul = this.ul;
var li = this.li;
var wWidth = this.windowWidth;
//开始
var sliderStart = function(event)
{
//最开始的位置
self.startX = event.touches[0].pageX;
}
//移动
var sliderMove = function(event)
{
//如果是单个手指的话才执行
if (event.targetTouches.length == 1)
{
//阻止事件默认行为
event.preventDefault();
self.offsetX = event.targetTouches[0].pageX - self.startX;
}
}
//结束
var sliderEnd = function()
{
// event.preventDefault();
var windowWidth = window.innerWidth;
//切换判断
if ( self.offsetX < 0 )
{
if (num < li.length -1 ){
num++;
}else{
num = li.length-1;
}
ul.style.webkitTransform = 'translate3d(-'+ wWidth * num +'px,0,0)';
}else{

if ( num > 0 ){
num--;
}else{
num = 0;
}
ul.style.webkitTransform = 'translate3d(-'+ wWidth * num +'px,0,0)';
}

}
//监听touchstart,touchmove,touchend
box.addEventListener('touchstart',sliderStart);
box.addEventListener('touchmove',sliderMove);
box.addEventListener('touchend',sliderEnd);
}

new Slider({
box:document.getElementById('box')
});

</script>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航