介绍 & lt; !doctype html>
& lt; html>
& lt; head>
& lt;元charset=癠TF-8"/比;
& lt;元名称=皏iewport"内容=翱矶?设备宽度,user-scalable=no"比;
& lt; title> Document
& lt;脚本类型=拔谋?javascript"比;//获取html
var html=document.documentElement;//设置html的字体大?可视区的宽度/15
html.style。字形大?html。clientWidth/15 + & # 39; px # 39;;//阻止pc和浏览器默认行为。
document.addEventListener (& # 39; touchstart& # 39;,函数(ev) {
ev.preventDefault ();
});
& lt;/script>
& lt; style>
身体{
保证金:0;
}
.wrap {
高度:4.68快速眼动;
位置:相对;
}
.list {
填充:0;
保证金:0;
宽度:400%;
位置:绝对的;
上图:0;
左:0;
list-style:没有;
}
李.list {
浮:左;
宽度:15眼动;
}
.list img {
宽度:15眼动;
显示:块;
}
nav {
宽度:15眼动;
高度:10 px;
位置:绝对的;
底部:5 px;
z - index: 1;
text-align:中心;
}
资产净值一个{
宽度:15 px;
高度:15 px;
显示:inline-block;
背景:红色;
这个特性:50%;
vertical-align:最高;
}
nav a.active {
背景:# fff;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; section>
& lt; ul>
& lt; li>
& lt; img src=癷mg/img.jpg"alt=?“/比;
& lt;/li>
& lt; li>
& lt; img src=癷mg/img2.jpg"alt=?“/比;
& lt;/li>
& lt; li>
& lt; img src=癷mg/img3.jpg"alt=?“/比;
& lt;/li>
& lt; li>
& lt; img src=癷mg/img4.jpg"alt=?“/比;
& lt;/li>
& lt;/ul>
& lt; nav>
& lt; a href=癹avascript:“祝辞& lt;/a>
& lt; a href=癹avascript:“祝辞& lt;/a>
& lt; a href=癹avascript:“祝辞& lt;/a>
& lt; a href=癹avascript:“祝辞& lt;/a>
& lt;/nav>
& lt;/section>
& lt;脚本类型=拔谋?javascript"比;
var包=document.getElementsByClassName (“wrap") [0],=document.getElementsByClassName列表(“list") [0],
disX=0,
listL=0,
n=0,
w=wrap.clientWidth,
s=0,
计时器=0;
一个=document.getElementsByTagName (“a");
list.addEventListener (“touchstart",开始);
list.addEventListener (“touchmove"、移动);
list.addEventListener (“touchend"、结束);
list.innerHTML +=list.innerHTML;
len=list.children.length;
console.log (len);
list.style.width=w * len +“px";
函数开始(ev) {
clearInterval(计时器);
var e=ev.changedTouches [0];
disX=e.pageX;
list.style.transition=皀one";
var num=Math.round (list.offsetLeft/w);
list.style.left=num * w +“px";
如果(num==0) {
num=a.length;
list.style.left=num * w +“px";
}
如果(num==len-1) {
num=a.length-1;
list.style.left=num * w +“px";
}
listL=this.offsetLeft;
}
函数移动(ev) {
var e=ev.changedTouches [0];
list.style.left=(e.pageX-disX) + listL +“px";
}
函数结束(){
var num=Math.round (list.offsetLeft/w);
console.log (num)
list.style.transition=?.5 s";
list.style.left=num * w +“px";
[n] .className=啊?
[(num) % a.length] .className=癮ctive";
n=(num) % a.length;
计时器=setInterval(函数(){
酒店();
},1000)
s=num;
}
计时器=setInterval(函数(){
酒店();
},1000)
函数客栈(){
s + +;
list.style.left=s * w +“px";
list.style.transition=?.5 s";
console.log(年代);
如果(s> len-1) {
s=a.length-1;
list.style.transition=皀one";
list.style.left=s * w +“px";
console.log (list.style.left);
setTimeout(函数(){
list.style.transition=?.5 s";
s + +;
list.style.left=s * w +“px";
[n] .className=啊?
[s % a.length] .className=癮ctive";
n=s % a.length;
},30)
}
[n] .className=啊?
[s % a.length] .className=癮ctive";
n=s % a.length;
}
& lt;/script>
& lt;/body>
& lt;/html>
这篇文章主要介绍CSS怎么实现移动端图片无缝滚动效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
以上是CSS怎么实现移动端图片无缝滚动效果的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注行业资讯频道!
