Team:LZU-China/tempfortest
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | <!DOCTYPE html PUBLIC "-//W3C//DTD | + | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
- | <html | + | <html xmlns="http://www.w3.org/1999/xhtml"> |
<head> | <head> | ||
- | + | <title>jQuery炫酷翻页图片相册</title> | |
- | <title> | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
<style> | <style> | ||
- | + | body{ overflow:hidden;} | |
- | . | + | a{ text-decoration:none; color:#FFF;} |
- | + | a img{ border:none;} | |
- | . | + | .img-box,.img-box div,.img-box div img{ width:800px; height:450px; } |
- | . | + | .img-box{ margin:auto;position:relative; } |
- | + | .img-box span{ position:absolute;bottom:0;left:295px; width:201px;font-size:12px; line-height:25px;color:#FFF; z-index:100; background:#555; text-align:center;} | |
+ | .img-box div{ position: absolute;cursor: all-scroll } | ||
+ | .btn-box{ width:800px; height:40px;margin: auto; cursor:pointer; background:#222; } | ||
+ | .btn-margin{ width:210px; height:40px; margin: auto;} | ||
+ | .btn{ width:100px; height:38px; line-height:38px; margin:1px 1px 0 0; text-align:center; float:left;color:#FFF; background:#555; } | ||
</style> | </style> | ||
+ | <script src="/ajaxjs/jquery-1.9.1.min.js"></script> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(e) { | ||
+ | var ImgBox = $(".img-box"), | ||
+ | ImgSpan =ImgBox.find("span"), | ||
+ | ImgDiv = $(".img-box div"), | ||
+ | BtnNext = $("#btn-next"), | ||
+ | BtnPrve = $("#btn-prev"), | ||
+ | Btn = $(".btn"), | ||
+ | speed = 600,//设置动画的运动时间 | ||
+ | Tick = 4000+speed,//设置定时器的间隔时间 | ||
+ | n=1,//设置张数计数器 | ||
+ | whichCl ,//设置判断点击了哪一个按钮 | ||
+ | z=0;//设置当前动画计数器 | ||
+ | ImgSpan.html("第 "+n+" 张/共 "+ImgDiv.length+" 张"); | ||
+ | function Slider(){//动画函数 | ||
+ | if(whichCl=="nextCl"){ | ||
+ | n++; if(n>ImgDiv.length){n=1;} | ||
+ | z--; if(z<0){z=ImgDiv.length-1;} | ||
+ | } | ||
+ | if(whichCl=="prevCl"){ n--; if(n<1){n=ImgDiv.length;}} | ||
+ | ImgSpan.html("第 "+n+" 张/共 "+ImgDiv.length+" 张"); | ||
+ | ImgDiv.eq(z).stop().animate( | ||
+ | {right:-(1.1*ImgDiv.width())}, speed, | ||
+ | function(){ | ||
+ | if(whichCl=="nextCl"){ImgSpan.after($(this));} | ||
+ | if(whichCl=="prevCl"){ImgBox.append($(this));} | ||
+ | $(this).stop().animate({right:0}, speed); | ||
+ | }) | ||
+ | if(whichCl=="prevCl"){ z++; if(z>ImgDiv.length-1){z=0;}} | ||
+ | ImgBox.stop().animate({right:100},speed,function(){$(this).stop().animate({right:0}, speed)}) | ||
+ | ImgSpan.stop().animate({left:395},speed,function(){$(this).stop().animate({left:295},speed)}) | ||
+ | } | ||
+ | BtnNext.click(next_cl = function(){whichCl="nextCl";Slider();});//向右点击事件启动动画函数 | ||
+ | BtnPrve.click(prev_cl = function(){whichCl="prevCl";Slider();});//向左点击事件启动动画函数 | ||
+ | Btn.hover(function(){clearTimeout(autoTime)},function(){autoTime = setInterval(next_cl,Tick);})//当鼠标进入点击按钮时对定时器进行控制 | ||
+ | autoTime = setInterval(next_cl,Tick); //模拟向右点击事件定时启动动画函数,也可以使用 prev_cl向左启动动画函数 | ||
+ | }); | ||
+ | </script> | ||
</head> | </head> | ||
<body> | <body> | ||
- | <div class=" | + | <div class="img-box"> |
- | <div | + | <span></span> |
- | <img src="/jscss/demoimg/ | + | <div><a href="/"><img src="/jscss/demoimg/wall1.jpg" /></a></div> |
- | <div class=" | + | <div><a href="/"><img src="/jscss/demoimg/wall2.jpg" /></a></div> |
+ | <div><a href="/"><img src="/jscss/demoimg/wall3.jpg" /></a></div> | ||
+ | <div><a href="/"><img src="/jscss/demoimg/wall4.jpg" /></a></div> | ||
+ | </div> | ||
+ | <div class="btn-box"> | ||
+ | <div class="btn-margin"> | ||
+ | <div class="btn" id="btn-prev">上一张</div> | ||
+ | <div class="btn" id="btn-next">下一张</div> | ||
+ | </div> | ||
</div> | </div> | ||
<div style="text-align:center;clear:both"> | <div style="text-align:center;clear:both"> | ||
+ | <p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 08:16, 6 September 2014
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
上一张
下一张
适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.