移动端banner 手写~~~简单明了
<!doctype html><!--声明当前文档为html文档-->
<html lang="en"><!--语言为英语-->
<head><!--头部-->
<meta charset="UTF-8"><!--字符编码：utf-8国际编码 gb2312中文编码-->
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述">
<meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no">
<title>Document</title>
<style>/css样式表的衣柜/
*{margin:0px;padding:0px;}
html,body{
width:100%;height:100%;overflow:hidden;
}
width:2560px;height:400px;position:relative;left:0px;
}
img{
float:left;
}
#icon{
width:200px;height:25px;margin:10px auto;
}
i{display:block;width:25px;height:25px;border-radius:50%;
border:1px solid red;float:left;margin-right:23px;}
.curr{background:red;}
</style>
</head>
<body><!--身体-->
<div id="div">
<a href="http://www.baidu.com"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg" width="640" height="400"></a>
<a href="http://www.baidu.com"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/2.jpg" width="640" height="400"></a>
<a href="http://www.baidu.com"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/3.jpg" width="640" height="400"></a>
<a href="http://www.baidu.com"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/4.jpg" width="640" height="400"></a>
</div>
<div id="icon">
<i class="curr"></i>
<i></i>
<i></i>
<i></i>
</div>
</body>
<script>
var div = document.getElementById("div");
var icons = document.getElementById("icon").children;
//var iS = icon.getElementsByTagName("i");
var x=0;
var startX = 0;//div的初始坐标
var scroll = 0;//拖动的距离
document.addEventListener("touchmove",function(e){
e.preventDefault();
});
document.addEventListener("touchstart",function(e){
x = e.changedTouches[0].pageX;
startX = scroll;
this.style.transition = "";
})
div.addEventListener("touchmove",function(e){
var xL = e.changedTouches[0].pageX - x;
scroll = startX + xL;
this.style.left = scroll +"px";
this.style.transition = "";
//console.log(scroll);
})
div.addEventListener("touchend",function(e){
var xL = e.changedTouches[0].pageX - x;
scroll = startX + xL;
var n = -scroll/640;
//n%1 1.3%1 = 0.5
n = n%1<0.3?Math.floor(n):Math.ceil(n);
if (n<0)
{
n = 0
}else if (n>3)
{
n = 3;
}
scroll = -n*640;
this.style.left = scroll+"px";
for (var i =0; i<icons.length ; i++)
{
if (i != n)
{
icons[i].className = "";
}else{
icons[i].className = "curr";
}
}
this.style.transition = "0.5s linear";
})
</script></html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦