39,118
社区成员
发帖
与我相关
我的任务
分享HTML5手机端滑动banner问题
求大神指点一下最好给出一个demo让我领悟领悟，我做了一个，但是手滑动的时候banner没有滑动，想了很久还是想不出来。不想调用插件，插件调用我会，但是老调用插件是不会进步的，我想知道实现原理及步骤过程。望大神指点迷津啊，下面是我写的代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
height:400px;
width:600px;
overflow: hidden;
}
.movebox{
height:400px;
width:2400px;
padding:0;
position:relative;
left:0;
}
.movebox li{
height:400px;
width:600px;
float:left;
list-style:none;
font-size:130px;
font-weight: 700;
}
</style>
<script>
window.onload = function(){
var startX, startY, moveX, moveY, endX, endY, cout = 0;
var movebox = document.querySelector(".movebox");
function boxTouchStart(e){
var touch = e.touches[0];
startX = touch.pageX;
startY = touch.pageY;
endX = parseInt(movebox.style.webkitTransform.replace("translateX(", ""));
console.log(endX);
}
function boxTouchMove(e){
var touch = e.touches[0];
moveX = touch.pageX - startX; //水平方向移动的距离
moveY = touch.pageY - startY;
}
function boxTouchEnd(e){
left = moveX < 0 ? true : false;
if(left){
if(cout<3){
movebox.style.webkitTransform = "translateX(" + (endX-600) + "px)";
cout++;
}
}else{
if(cout>0){
movebox.style.webkitTransform = "translateX(" + (endX+600) + "px)";
cout--;
}
}
}
document.addEventListener("touchstart", boxTouchStart, false);
document.addEventListener("touchmove", boxTouchMove, false);
document.addEventListener("touchend", boxTouchEnd, false);
}
</script>
</head>
<body>
<div class="box">
<ul class="movebox" style="transition-duration:0.2s;transform: translateX(-0px);">
<li style="background:red;">1</li>
<li style="background:yellow">2</li>
<li style="background:blue">3</li>
<li style="background:green">4</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
height:400px;
width:600px;
overflow: hidden;
}
.movebox{
height:400px;
width:2400px;
padding:0;
position:relative;
left:0;
}
.movebox li{
height:400px;
width:600px;
float:left;
list-style:none;
font-size:130px;
font-weight: 700;
}
</style>
<script>
window.onload = function(){
var startX, startY, moveX, moveY, endX, endY, cout = 0;
var movebox = document.querySelector(".movebox");
function boxTouchStart(e){
var touch = e.touches[0];
startX = touch.pageX;
startY = touch.pageY;
endX = parseInt(movebox.style.webkitTransform.replace("translateX(", ""));
console.log(endX);
}
function boxTouchMove(e){
var touch = e.touches[0];
moveX = touch.pageX - startX; //水平方向移动的距离
moveY = touch.pageY - startY;
}
function boxTouchEnd(e){
left = moveX < 0 ? true : false;
if(left){
if(cout<3){
movebox.style.webkitTransform = "translateX(" + (endX-600) + "px)";
cout++;
}
}else{
if(cout>0){
movebox.style.webkitTransform = "translateX(" + (endX+600) + "px)";
cout--;
}
}
}
document.addEventListener("touchstart", boxTouchStart, false);
document.addEventListener("touchmove", boxTouchMove, false);
document.addEventListener("touchend", boxTouchEnd, false);
}
</script>
</head>
<body>
<div class="box">
<ul class="movebox" style="transition-duration:0.2s;transform: translateX(-0px);">
<li style="background:red;">1</li>
<li style="background:yellow">2</li>
<li style="background:blue">3</li>
<li style="background:green">4</li>
</ul>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
业余草 2017-03-12
- 打赏
- 举报
#麻辣小龙虾# 2017-03-09
- 打赏
- 举报
已经实现，果然还是得靠自己，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="telephone=yes" name="format-detection" />
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="x5-fullscreen" content="true">
<meta name="apple-touch-fullscreen" content="yes">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.box{
height:200px;
width:100%;
overflow: hidden;
}
.movebox{
height:200px;
width:9000px;
padding:0;
position:relative;
left:0;
}
.movebox li{
height:200px;
float:left;
list-style:none;
font-size:30px;
color:#fff;
}
</style>
<script>
window.onload = function(){
var moveX, //手指滑动距离
endX, //手指停止滑动时X轴坐标
cout = 0, //滑动计数器
moveDir; //滑动方向
var movebox = document.querySelector(".movebox"); //滑动对象
var Li = movebox.querySelectorAll("li"); //滑动对象item
var width = parseInt(window.getComputedStyle(movebox.parentNode).width); //滑动对象item的宽度
movebox.style.width = (width*4) + "px"; //设置滑动盒子width
for(var i = 0; i < Li.length; i++){
Li[i].style.width = width + "px"; //设置滑动item的width，适应屏幕宽度
}
//触摸开始
function boxTouchStart(e){
var touch = e.touches[0]; //获取触摸对象
startX = touch.pageX; //获取触摸坐标
endX = parseInt(movebox.style.webkitTransform.replace("translateX(", "")); //获取每次触摸时滑动对象X轴的偏移值
}
function boxTouchMove(e){
var touch = e.touches[0];
moveX = touch.pageX - startX; //手指水平方向移动的距离
if(cout == 0 && moveX > 0){ //刚开始第一次向左滑动时
return false;
}
if(cout == 3 && moveX < 0){ //滑动到最后继续向右滑动时
return false;
}
movebox.style.webkitTransform = "translateX(" + (endX + moveX) + "px)"; //手指滑动时滑动对象随之滑动
}
function boxTouchEnd(e){
moveDir = moveX < 0 ? true : false; //滑动方向大于0表示向左滑动，小于0表示向右滑动
//手指向左滑动
if(moveDir){
if(cout<3){
movebox.style.webkitTransform = "translateX(" + (endX-width) + "px)";
cout++;
}
//手指向右滑动
}else{
//滑动到初始状态时返回false
if(cout == 0){
return false;
}else{
movebox.style.webkitTransform = "translateX(" + (endX+width) + "px)";
cout--;
}
}
}
//滑动对象事件绑定
movebox.addEventListener("touchstart", boxTouchStart, false);
movebox.addEventListener("touchmove", boxTouchMove, false);
movebox.addEventListener("touchend", boxTouchEnd, false);
}
</script>
</head>
<body style="position:absolute;width:100%;overflow:hidden;">
<div class="box">
<ul class="movebox" style="transition-duration:0.2s;transform: translateX(-0px);">
<li style="background:red;">1</li>
<li style="background:yellow">2</li>
<li style="background:blue">3</li>
<li style="background:green">4</li>
</ul>
</div>
</body>
</html>#麻辣小龙虾# 2017-03-06
- 打赏
- 举报
抱歉这个分不能给你，答非所问，请注意看下问题是什么。
业余草 2017-03-06
- 打赏
- 举报
<!DOCTYPE html><html><head><meta charset="utf-8"><title>banner切换实现</title><style type="text/css">/** @description: banner切换样式* @author: lanfeng(beryl)* @time:2013-02-26*//* reset*/*{ margin: 0; padding: 0;}body{font:12px/1.5 Tahoma,'/5B8B/4F53',arial,Tahoma,helvetica,sans-serif; color:#333333;background-color:#ffffff;position:relative; }h1,h2,h3,h4,h5,h6{font-size:100%}address,em{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}ul,ol{list-style:none outside none;}fieldset,img{border:0;}img{vertical-align:middle}table{border-collapse:collapse;border-spacing:0;font-size:inherit;*font-size:100%;}input,button,textarea,select{vertical-align:middle;font:100% Helvetica,Arial,sans-serif; color:inherit}.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden;}.clearfix{*zoom:1;}.clear{font-size:0;line-height:0;height:0;clear:both;visibility:hidden;overflow:hidden;}.d-ftab{ width:510px; height: 180px;position: relative; margin: 100px auto;}.d-fShow ul li{ float: left; width: 510px; height: 180px;}.d-fShow{ width: 510px; height: 180px; overflow: hidden;}.d-fShow img{ width: 510px; height: 180px; float: left;}.d-fs-control{ position: absolute; width:510px; position: absolute; left: 0; bottom: 0; height: 25px; line-height: 25px;background: rgba(0,0,0,0.4);filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000',EndColorStr='#66000000') ; }:root .d-fs-control{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000',EndColorStr='#66000000')/9 ;}.d-fs-control ul{ position: absolute; bottom:3px; right: 5px; height: 16px;}.d-fs-control ul li{width:16px;height:16px; background:#777675;border-radius: 2px 2px 2px 2px; float:left;margin-left:5px;color:#dcdcdc;text-align:center;font-weight:700;cursor:pointer;line-height:16px;filter: alpha(opacity=70); opacity: 0.7;}.d-fs-control ul li:hover,.d-fs-control ul li.select{background:#ffffff;color:#ff6700;}</style><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript">$(function(){var wrap =$('.d-ftab');var imgs = wrap.find('.d-fShow ul >li');var len=imgs.length ;var tabTime=100;var outTime=4000;var select='select';var num =0 ;var interval;var type = 'click';var btns=wrap.find('.d-fs-control ul>li');btns.bind(type,function(){var _this=$(this);_this.addClass('select').siblings ().removeClass('select');num=_this.prevAll().length;imgs.stop().eq(num).fadeTo(tabTime,1) ;imgs.not(':eq('+num+')').filter(':visible').fadeOut(tabTime) ;return false;}).eq(num).trigger(type);var interFunc=function(){num=(num+1)%len;btns.eq(num).triggerHandler(type);}wrap.bind('mouseover',function(){clearInterval(interval);}).bind('mouseout',function(){interval=setInterval(interFunc,outTime)})})</script></head><body><div class="d-ftab"><div class="d-fShow"><ul><li><a href="#"><img alt="" src=" images/1.jpg"/></a></li><li ><a href="#"><img alt="" src="images/2.png"></a></li><li><a href="#"><img alt="" src="images/3.jpg"></a></li><li><a href=""><img alt="" src="images/4.jpg"></a></li><li><a href="#"><img alt="" src="images/5.jpg"></a></li></ul></div><div class="d-fs-control"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li class="select">5</li></ul></div></div></body></html>#麻辣小龙虾# 2017-03-03
- 打赏
- 举报
手滑动的时候确实切换了下一张，但是我是想实现手按下去滑动，图片跟着滑动，如果手滑动的距离不够那么图片不会切换到下一张，而是回退回来，就类似APP常见那个banner的切换方式。
#麻辣小龙虾# 2017-03-01
- 打赏
- 举报
就是想不出来啊，调试收滑动的时候bannner动了，但是得不到想要的结果。望大神指点我这个迷失的小羔羊。小弟不盛感激
一个小小鸟 2017-03-01
- 打赏
- 举报
调试了下。移动端没有你说的-手滑动的时候banner没有滑动，PC端浏览器上的手机模拟器也是OK的
