上下箭头 实现div中的图片切换滚动

滑头小鬼 2017-04-11 02:43:12
类似于这个上下页效果 div不动,里边的内容滚动 http://h5.eqxiu.com/s/ayqWAl
...全文
520 2 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhangsheng_1992 2017-04-11
  • 打赏
  • 举报
回复
代码如下 请笑纳 只实现页面切换 不管内容 没找到图片 所有就被景色代替了 代码比较烂 jquery请自己引入 当然写源生也可以

<meta charset="utf-8" />
<style>
.box{
width:200px;
height: 300px;
overflow: hidden;
}
.frist{
width:200px;
height: 300px;
background: green;
}

.second{
width:200px;
height: 300px;
background: yellow;
}

.thrid{
width:200px;
height: 300px;
background: skyblue;
}

/*缩小 下一页*/
@keyframes less{
0%{
height:300px;
}

100%{
height:0px;
}
}

/*放大 上一页*/
@keyframes big{
0%{
height:0px;
}

100%{
height:300px;
}
}

.less{
animation-name: less;
animation-delay: 0s;
animation-timing-function: ease;
animation-duration: 0.8s;
animation-iteration-count: 1;
animation-direction: normal;
height: 0px;
}

.big{
animation-name: big;
animation-delay: 0s;
animation-timing-function: ease;
animation-duration: 0.8s;
animation-iteration-count: 1;
animation-direction: normal;
height: 300px;
}

</style>
<div class="box">
<div class="frist" id="page1">
<!-- 我是第一页-->
</div>

<div class="second" id="page2">
<!--我是第二页-->
</div>

<div class="thrid" id="page3">
<!--我是第三页-->
</div>
</div>
<button type="button" onclick="prePage()">上一页</button>
<button type="button" onclick="nextPage()">下一页</button>
<script src="jquery.min.js"></script>
<script>
var page = 1;//定义当前页
function nextPage(){
//边界控制
if(page >= 3){
return false;
}
$('#page'+page).removeClass('big');
$('#page'+page).addClass('less');
page++;
}

function prePage(){
//边界控制
if(page <= 1){
return false;
}
$('#page'+(page-1)).removeClass('less');
$('#page'+(page-1)).addClass('big');
page--;
}
</script>



效果图
天际的海浪 2017-04-11
  • 打赏
  • 举报
回复

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
#box {
	position: relative;
	width: 200px;
	height: 300px;
	border: 1px solid #999;
	overflow: hidden;
}
#box div {
	width: 200px;
	height: 300px;
}
#box div:first-child {
	margin-top: 0px;
	-webkit-transition: margin-top 400ms;
	transition: margin-top 400ms;
}
</style>
</head>
<body>
<div id="box">
	<div style="background-color: #f00;"></div>
	<div style="background-color: #0f0;"></div>
	<div style="background-color: #00f;"></div>
	<div style="background-color: #f0f;"></div>
</div>

<input type="button" value="上一页" onclick="prev();" />
<input type="button" value="下一页" onclick="next();" />
<script type="text/javascript">
var box = document.getElementById("box");
var len = box.getElementsByTagName("div").length;
var div0 = box.getElementsByTagName("div")[0];
var page = 0;
function prev() {
	if (page<=0) return;
	page--;
	div0.style.marginTop = -div0.offsetHeight*page+"px";
}
function next() {
	if (page>=len-1) return;
	page++;
	div0.style.marginTop = -div0.offsetHeight*page+"px";
}
</script>
</body>
</html>

39,118

社区成员

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准,是构建以及呈现互联网内容的一种语言方式.被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧