代码如下：
<h1>CSS3滑入/滑出效果</h1>
<div id="volet_clos">
<div id="volet">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit Minima quisquam tempora quaerat dolores molestias reiciendis </p>
<p>vero labore voluptates necessitatibus ut Et</p>
<p>vero labore voluptates necessitatibus ut Et</p>
<p>vero labore voluptates necessitatibus ut Et</p>
<p>vero labore voluptates necessitatibus ut Et</p>
<a href="#volet" aria-hidden="true" class="ouvrir">滑出</a>
<a href="#volet_clos" aria-hidden="true" class="fermer">滑入</a>
</div>
</div>
扩展资料
web网页设计的重要注意事项：
1、网页版面设计合理性
网页设计过程中，一定要留意网页版式的合理性，通过合理的网页布局让用户浏览起来比较顺畅舒适，注意网页版式的设计，不要块块之间过于冗繁，显示拥挤，要有主次分明，注意简练大方。
2、运用舒缓的色彩设计
在网页色彩搭配上，采用淡色系进行页面设计，特别要注意颜色的分配，总体颜色不宜超过三种颜色，可以确定一个主颜色再加上辅助颜色进行点缀搭配，这样整体设计展现出来比较调和、舒缓，用户浏览页面也不会导致眼花缭乱，眼睛疲劳。
3、丰富的页面内容
丰富的内容赋予网页生命力，用户都是喜欢有新鲜、丰富内容的网页，一个受欢迎的网页设计一定是有丰富多彩的内容吸引用户的。
丰富内容的网页对于搜索引擎也是受欢迎的，当搜索引擎每次来到我们网站进行抓取内容的时候，如果我们的网页内容保持新鲜、原创，将会很快进行收录，这对于网站整体优化排名都是有好处的。
<script language="javascript" type="text/javascript">//滚动展示 Start
var counts = 4;
//大图//
img1 = new Image();
img1src = 'images/1jpg';
img2 = new Image();
img2src = 'images/2jpg';
img3 = new Image();
img3src = 'images/3jpg';
img4 = new Image();
img4src = 'images/4jpg';
var smallImg = new Array();
//小图
smallImg[0] = 'images/index_adb1gif';
smallImg[1] = 'images/index_adb2gif';
smallImg[2] = 'images/index_adb3gif';
smallImg[3] = 'images/index_adb4gif';
//链接地址
url1 = new Image();
url1src = ' >
最近正好写了个代码好像就是你要的效果 这种效果较轮播吧好像是
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="1css">
<script src="jquery-214js"></script>
</head>
<body>
<button id="prev">前一张</button>
<button id="next">后一张</button>
<div class="imgList">
<div class="imgList-style">
<div class="imgList1">
<img class="img" src="1jpg">
<img class="img" src="1jpg">
<img class="img" src="1jpg">
<img class="img" src="1jpg">
<img class="img" src="1jpg">
</div>
<div class="imgList2">
<img class="img" src="2jpg">
<img class="img" src="2jpg">
<img class="img" src="2jpg">
<img class="img" src="2jpg">
<img class="img" src="2jpg">
</div>
<div class="imgList3">
<img class="img" src="3jpg">
<img class="img" src="3jpg">
<img class="img" src="3jpg">
<img class="img" src="3jpg">
<img class="img" src="3jpg">
</div>
<div class="imgList4">
<img class="img" src="4jpg">
<img class="img" src="4jpg">
<img class="img" src="4jpg">
<img class="img" src="4jpg">
<img class="img" src="4jpg">
</div>
</div>
</div>
</body>
<script src="1js"></script>
</html>$(document)ready(function(){
var marginpx = 0,
imgList = $('imgList')width(),
num = $('imgList-style div')length-1;
$("#prev")click(function(){
if(marginpx !=0){
marginpx += imgList;
$("imgList-style")css("margin-left",marginpx+"px");
}else{
marginpx = numimgList-1;
$("imgList-style")css("margin-left",marginpx+"px");
}
});
$("#next")click(function(){
if(marginpx != (numimgList-1)){
marginpx -= imgList;
$("imgList-style")css("margin-left",marginpx+"px");
}else{
marginpx = 0;
$("imgList-style")css("margin-left",marginpx+"px");
}
});
});img{
width:150px;
height:100px;
}
imgList{
width:782px;
height:auto;
overflow-x:hidden;
}
imgList-style{
transition: margin-left 1s;
-moz-transition: margin-left 1s; / Firefox 4 /
-webkit-transition: margin-left 1s; / Safari 和 Chrome /
-o-transition: margin-left 1s; / Opera /
width:3128px;
height:103px;
}
imgList1,imgList2,imgList3,imgList4{
float:left;
}
第一个是HTML 第二个是JS第三个是CSS
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）