1、使用jQuery(annimate)制作
<div id="img2"><input type ="button" value="上一页" id="a" ></input><input type ="button" value="下一页" id="b" ></input><div id="img1" class="imgJ"><img src="image/1.jpg" class="ig1"/>..................<img src="image/10.jpg" class="ig10"/></div>
</div>
b、然后要用javascript做翻页功能,我们要做一些引用
<script language="javascript" type="text/javascript" src="jQuery/function.js"></script>
<script language="javascript" type="text/javascript" src="jQuery/jquery-latest.js"></script>//必须引用的jQuery
<link rel="stylesheet" href="css/img.css" type="text/css">//简单的页面布局
c、自己编写页面调用规则
//function.js
$("#b").click(function(){if(xs<0){$(".imgJ").animate({"left": "+=1024px"},"5000");//每次向左移动1024像素,移动时间5000ms}
});
运行效果图:(其中图片之间的移动为平滑移动,两个图片在变换之间是首尾相连慢慢变化的的)
2、使用html5的元素transform、transition来布局
<script language="javascript" type="text/javascript" src="jQuery/jquery-1.7.min.js"></script>
前面的页面布局和1的布局基本一样,就是在按钮的后面要加click事件
<input type ="button" value="上一页" id="a" οnclick="jump(a)">
<input type ="button" value="下一页" id="b" οnclick="jump(b)">
function.js里面的函数编写(部分):
$("#img1").css({'-webkit-transform': "translate3d("+xs+"px, 0px,0)",//控制div需要移动到的像素点,其中xs为变量可以设为自己需要的数字'-webkit-transition': 'all .5s ease 0s'}
);
详细代码见:https://github.com/marujun/imageJump