手机版网页js图片滑动

Posted 2023-04-18

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手机版网页js图片滑动相关的知识，希望对你有一定的参考价值。

左右滑动切换图片，不规则图片也能显示完整，自适应手机屏幕大小。类似蘑菇街等网站里商品详细页里的图片滑动功能。

参考技术A <style>
* margin:0; padding:0; list-style:none;
#box width:534px; height:300px; position:relative; margin:50px auto; overflow:hidden;
#box ul position:absolute; left:0; top:0;
#box ul li float:left; width:534px; height:300px;
#box ul li img height:300px;
#box a transition:.2s all ease;
#box .prev,#box .nextposition:absolute; top:50%; z-index:2; height:80px; line-height:80px; background:rgba(0,0,0,0.6); color:#fff; width:80px; text-align:center; margin-top:-40px; display:-none;
#box .prev left:0;
#box .next right:0;
#box a:hover background:rgba(255,0,0,0.4);
#box ol position:absolute; width:120px; left:50%; margin-left:-60px; bottom:10px;
#box ol li width:20px; height:20px; background:#f60; float:left; margin:2px; text-align:center; text-indent:-9999px; border-radius:50%;
#box ol li.active background:#fff;
</style>
<script>
window.onload=function()
var oBox=document.getElementById('box');
var oPrev=document.getElementById('prev');
var oNext=document.getElementById('next');
var oUl=oBox.getElementsByTagName('ul')[0];
var aLi=oUl.children;
var oOl=oBox.getElementsByTagName('ol')[0];
var aBtn=oOl.children;
var timer = null;
var iNow=0;
var left=0;

//复制一份内容
oUl.innerhtml+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';

var W=oUl.offsetWidth/2;

//选项卡
for(var i=0; i<aBtn.length; i++)
(function(index)
aBtn[i].onclick=function()
if(iNow%aBtn.length==aBtn.length-1 && index==0)
iNow++;

if(iNow%aBtn.length==0 && index==aBtn.length-1)
iNow--;

iNow=Math.floor(iNow/aBtn.length)*aBtn.length+index;
tab();

)(i);

function tab()
for(var i=0; i<aBtn.length; i++)
aBtn[i].className='';

if(iNow<0)
aBtn[(iNow%aBtn.length+aBtn.length)%aBtn.length].className='active';
else
aBtn[iNow%aBtn.length].className='active';

//oUl.style.left=-iNow*aLi[i].offsetWidth+'px';
move(oUl,-iNow*aLi[i].offsetWidth);

//next
oNext.onclick=function()
iNow++;
tab();
//document.title=iNow;
;
oPrev.onclick=function()
iNow--;
tab();

//document.title=iNow;
;

oNext.onmouseleave = oPrev.onmouseleave = function()
timer = setInterval(function()
tab();
iNow++;
,2000);
;
oNext.onmouseenter = oPrev.onmouseenter = function()
clearInterval(timer);
;

oNext.onclick();
clearInterval(timer);
timer = setInterval(oNext.onclick,2000);

function move(obj,iTarget)
var count=Math.round(500/30);
var start=left;
var dis=iTarget-start;
var n=0;
clearInterval(obj.timer);

obj.timer=setInterval(function()
n++;

var a=1-n/count;
left=start+dis*(1-Math.pow(a,3));

if(left<0)
obj.style.left=left%W+'px';

else
obj.style.left=(left%W-W)%W+'px';

if(n==count)
clearInterval(obj.timer);

,30);

;
</script>
</head>
<body>
<div id="box">
<a href="javascript:;" class="prev" id="prev">prev</a>
<a href="javascript:;" class="next" id="next">next</a>
<ul>
<li><img src="img/0.jpg"></li>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
</ul>
<ol>
<li class="active">0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>本回答被提问者采纳

html5上下滑动“翻页”实现，是真正的翻页

1、不是那种一个网页代码里有10张图片，然后翻一页一张图片，再翻页又是另一张图片
2、我说的一页是有许多信息的那种，文字、图片、背景图片，而且是动态生成的
3、就像下面的网页一样

大概给我指点一下就好，如果能细说就更好了！谢谢

HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：

1、html5页面代码

<!DOCTYPE html>

<title>HTML5手机页面触屏滑动上下翻页特效</title>

</head>

</div>

</div>

</section>

</section>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</section>

</body></html>

2、css代码：

@charset "utf-8";

.ad_foot li margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;

.ad_foot li a display:block;

.ad_foot li .l width:75px; height:75px; float:left; overflow:hidden;

.ad_foot li .l img width:75px; width:75px;

.ad_foot li .r width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;

.ad_foot li .r p color:#999; font-size:1.2em;

.ad_foot li .r span font-size:0.8em;

.ad_foot li .r i font-style:normal;

.lazy-img, .lazy-finishbackground-color:#f0eded;

.page-listfont-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;

.ad_footpadding:15px 15px 0 15px;

/*声音播放按钮*/

#song_img width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;

/*底部推荐*/

.ad_listmargin-top:2em;.ad_list li width:46%; background:none; padding:0; float:left;margin-bottom: 1em;

.ad_list li.r float:right;.ad_list li a img width:100%; height:auto;

.ad_foot h3 width:100%; height:48px; line-height:48px; background:#F9F5EC;

.ad_foot h3 a display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;

.ad_foot h3 a.active color:#FFF; background:#FF9240;

.magazine_1 li

width:100%;

margin-bottom: 1em;

font-size: 1.8em;

padding: 15px;

background: #FFF;

.magazine_1 li a display:block;

.magazine_1 li .l width: 75px;

height: 75px;

float: left;

overflow: hidden;

.magazine_1 li .l img width:75px; height:75px;

.magazine_1 li .r width: 78%;

float: left;

margin-left: 30px;

color: #666;

overflow: hidden;

.magazine_1 li .r p

color: #999;

font-size: 1.2em;

.magazine_1 li .r span font-size:0.8em;

.ad_foot li .r i font-style:normal;

3、运行效果如下：

参考技术A HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：
1、html5页面代码
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5手机页面触屏滑动上下翻页特效</title>
<meta charset="utf-8">
<meta name="apple-touch-fullscreen" content="YES">
<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">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="pragram" content="no-cache">
<link rel="stylesheet" type="text/css" href="./hamer_files/main.css">
<link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css">
<script type="text/javascript" src="./hamer_files/offline.js"></script>
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
</head>
<body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none;">
<section class="u-alert">
<img style="display:none;" src="./hamer_files/loading_large.gif">
<div class="alert-loading z-move">
<div class="cycleWrap"> <span class="cycle cycle-1"></span>
<span class="cycle cycle-2"></span><span class="cycle cycle-3"></span><span class="cycle cycle-4"></span>
</div>
<div class="lineWrap"> <span class="line line-1"></span><span class="line line-2"></span><span class="line line-3"></span>
</div>
</div>
</section>
<section class="u-arrow">
<p class="css_sprite01"></p>
</section>
<section class="p-ct transformNode-2d transformNode-3d" style="height: 918px;">
<div class="translate-back" style="height: 918px;">
<div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px;">
<div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920px; background-image: url(hamer_files/1.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/2.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/3.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/4.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/5.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/6.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/7.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px;">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/8.jpg); background-size: cover; background-position: 50% 50%;"></div>
</div>
</div>
</section>
<section class="u-pageLoading">
<img src="./hamer_files/load.gif" alt="loading">
</section>
<script src="./hamer_files/init.mix.js" type="text/javascript" charset="utf-8"></script>
<script src="./hamer_files/coffee.js" type="text/javascript" charset="utf-8"></script>
<script src="./hamer_files/99_main.js" type="text/javascript" charset="utf-8"></script>
</body></html>
2、css代码：
@charset "utf-8";
.ad_foot li margin:0 auto 1em; font-size:1.8em; padding:15px; background:#FFF;
.ad_foot li a display:block;
.ad_foot li .l width:75px; height:75px; float:left; overflow:hidden;
.ad_foot li .l img width:75px; width:75px;
.ad_foot li .r width:78%; float:left; margin-left:30px; color:#666; overflow:hidden;
.ad_foot li .r p color:#999; font-size:1.2em;
.ad_foot li .r span font-size:0.8em;
.ad_foot li .r i font-style:normal;

.lazy-img, .lazy-finishbackground-color:#f0eded;
.page-listfont-size:20px;font-family: "Microsoft yahei";padding-left:17px;padding-top:30px;height:35px;border-bottom:1px solid #b5b5b5;display:none;
.ad_footpadding:15px 15px 0 15px;
/*声音播放按钮*/
#song_img width:293px; height:41px; display:block; position:absolute; right:4.1em; top:1.6em; font-size:1.7em; text-align:center; line-height:41px; color:#FFF; background:url(../img/music_c3.png) no-repeat 0 0;
/*底部推荐*/
.ad_listmargin-top:2em;.ad_list li width:46%; background:none; padding:0; float:left;margin-bottom: 1em;
.ad_list li.r float:right;.ad_list li a img width:100%; height:auto;
.ad_foot h3 width:100%; height:48px; line-height:48px; background:#F9F5EC;
.ad_foot h3 a display:inline-block; color:#444; width:50%; text-align:center; font-size:1.5em; height:48px; border-bottom:2px solid #FF9240;
.ad_foot h3 a.active color:#FFF; background:#FF9240;
.magazine_1 li
width:100%;
margin-bottom: 1em;
font-size: 1.8em;
padding: 15px;
background: #FFF;
.magazine_1 li a display:block;
.magazine_1 li .l width: 75px;
height: 75px;
float: left;
overflow: hidden;
.magazine_1 li .l img width:75px; height:75px;
.magazine_1 li .r width: 78%;
float: left;
margin-left: 30px;
color: #666;
overflow: hidden;
.magazine_1 li .r p
color: #999;
font-size: 1.2em;
.magazine_1 li .r span font-size:0.8em;
.ad_foot li .r i font-style:normal; 参考技术B 翻页其实就是整页切换效果，不局限于只能放一张图片，想加什么内容都是随意的。

至于动态生成，可以通过ajax简单实现，如果需要非常复杂的数据绑定可以使用一些现成的框架比如framework7。

图片中的效果显示来自易企秀，目前这种效果有个流行的叫法-H5动画，可以用swiper插件制作，swiper中文官网有很多类似的例子可以使用。参考技术C 请问你解决了吗？我也想知道怎么做

以上是关于手机版网页js图片滑动的主要内容，如果未能解决你的问题，请参考以下文章

页面实现滑动JS代码

dw怎么做手机网页

一打开带图片的网页，电脑就会自动下载后缀是“.js”的东东，求解答。。。。。。

手机怎么登录网页微信?

手机网页版知乎内容隐藏效果的实现

1加手机怎么关闭网页左右滑动