整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
机端左右滑动导航，html正常写，css超出不换行，隐藏滚动条
lt;marquee></marquee>文字滑动
<marquee behavior="slide"></marquee>滑动
<marquee behavior="scroll"></marquee>预设卷动
<marquee behavior="alternate"></marquee>来回卷动
<marquee direction="down"></marquee>向下卷动
<marquee direction="up"</marquee>向上卷动
<marquee direction="right"></marquee>向右卷动
<marquee direction="left"></marquee>向左卷动
<marquee loop="2"></marquee>循环次数, 默认值为：-1, 表示一直滚动下去。
<marquee width="180"></marquee>设定宽度
<marquee height="30"></marquee>设定高度
<marquee bgcolor="#FF0000"></marquee>设定背景颜色
<marquee scrollamount="30"></marquee>设定卷动距离(px)
<marquee scrolldelay="300"></marquee>设定卷动时间(毫秒)
<marquee hspace="100"></marquee> hspace 水平页边距
<marquee vspace="80"></marquee> vspace 垂直页边距
<marquee direction="left" behavior="scroll" width="300" height="400" bgcolor="#ff0" scrollAmount="50" scrollDelay="1000">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>JQ</li>
<li>BOOTSTRAP</li>
</ul>
</marquee>以上整数涉及的单位是像素px
<marquee>
<img src="images/03.jpg" />
<img src="images/04.jpg" />
<img src="images/05.jpg" />
<img src="images/06.jpg" />
<img src="images/07.jpg" />
<img src="images/08.jpg" />
<img src="images/09.jpg" />
</marquee>marquee常用到的两个事件：
onmouseout="this.start()" 当鼠标移出该区域时
onbmouseover="this.stop()" 当鼠标移入该区域时
上看过很多图片左右切换滑动的效果，不过大都是使用插件实现。插件虽方便，但是对于新手的学习并不是最好的。本文使用jquery这个由原生的JavaScript封装的库，用最简短的代码实现此功能
效果预览如下图：
代码如一下部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>超简单的图片左右切换滑动</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script>
var cot=0;//设置一个计数器，初始值为0；作用是用来监听点击切换的时候哪一个图片应该隐藏或者显示
function nex(){
if(cot<=2){
$('.imgs img').eq(cot).animate({'margin-left':'-305px'},500);
cot++;
}
}
function pre(){
if(cot>0){
cot--;
$('.imgs img').eq(cot).animate({'margin-left':'0'},500);
}
}
</script>
</head>
<body>
<div style="width:900px;margin:auto;overflow:hidden"> <!-- 这个最外围的容器div宽度为900px，每张图宽为300px，所以只显示3张，剩下的图超出容器隐藏起来 -->
<div class="imgs" style="width:50000px;"><!--这个div的作用是让所有的图片都排在同一水平上，这样子切换的时候效果会更好-->
<img src="1.jpg" /><!--这里的图片换上到时候自己对应的图片-->
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
<img src="5.jpg" />
<img src="6.jpg" />
</div>
<div>
<div onclick="pre()" style="float:left;cursor:pointer">上一页</div>
<div onclick="nex()" style="float:right;cursor:pointer">下一页</div>
</div>
</div>
</body>
</html>
如果你想要在短时间内掌握HTML5专业技术，不妨就选择千锋重庆HTML5技术开发培训。千锋重庆HTML5技术开发培训课程采用100%全程面授教学，拒绝视频同步授课，拒绝双元视频班教学，拒绝直播授课，教师一对一指导学员做项目，全新打造“主流技术+前沿技术+企业级联动”教学课程，重新优化和定义编程语言，采用最新版本技术开展教学，致力于为学员打造最牛的、最新的技术，助力学员拿下BAT级企业Offer。
千锋重庆HTML5技术开发培训，让你在同样的起跑线，跑出不一样的高度。
*请认真填写需求信息，我们会在24小时内与您取得联系。
