 |
热门文章 |
|
|
|
|
| jquery实现翻页效果的图片切换 |
| 来源：源码爱好者 更新时间：2010/11/29 8:59:53 阅读次数： 我要投稿 |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>图片翻页展示效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
.div{width:320px;height:240px;z-index:0;position:absolute;left:10px;border:2px #3300FF solid;border:0px;color:#FFFFFF;margin-left:200px;}
</style>
<script type="text/javascript" src="/effects/UploadFiles_7074/201011/2010112909013000.js"></script>
<script type="text/javascript">
$(function(){
var z=-1;
$("div").click(function(){
$(this).animate({left:"160px"},1000,function(){$(this).css("zIndex",z--)}).animate({left:"10px"},1000);
})
});
</script>
</head>
<body>
<div class="div"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081122582652.jpg"></div>
<div class="div"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081122582644.jpg"></div>
<div class="div"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081122582622.jpg"></div>
<div class="div"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010081122582661.jpg"></div>
<p>若左下角提示js错误，则刷新页面可正常。</p>
</body>
</html> |
| 特效说明： |
基于jquery的图片的翻页效果，实现方法请细看代码吧。只能是仿的翻页，和真正的分页还是有差距的。图片大小和边框的修饰这个自己定义吧，在CSS里就可以修改了，代码部分不是太复杂，最重要的是要引入jquery。 |
|
| 上一篇文章： 带左右切换和数字焦点切换的图片幻灯切换效果下一篇文章： 点击图片某一区域放大图片 |
|
|
|
注册 登录
