移動(dòng)端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 ><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg" width="640" height="400"></a>
<a ><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/2.jpg" width="640" height="400"></a>
<a ><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/3.jpg" width="640" height="400"></a>
<a ><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>
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評論
評論
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦