[英]Moving through pictures by fading in HTML
我有一些图片,我想通过单击HTML中的按钮浏览它们。 我需要在用户单击时产生效果-我不想重新加载我的页面。 有没有可以帮助您的Javascript或CSS? 我的意思是通过按“下一步”按钮,下一幅图像可以轻柔地淡入屏幕。
如果您有这样的div
:
<div id="yourDivId" >
<img id="image_1_Id" class="" src="image_1.png" />
<img id="image_2_Id" class="transparent" src="image_2.png" />
</div>
将此代码插入您的css文件:
#yourDivId img.transparent
{
opacity:0;
}
#yourDivId img
{
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
并将此脚本添加到您的javascript文件或html头脚本中:
function btnClicked(){
document.getElementById("image_1_Id").className += "transparent";
document.getElementById("image_2_Id").className = "";
}
有关更多示例,请访问此网站http://css3.bradshawenterprises.com/cfimg/ !
尝试jQuery Cycle。 它具有许多可用的过渡,您可以使用外部上一个/下一个控件进行设置。
主插件页面: http : //jquery.malsup.com/cycle/
使用上一个/下一个链接的演示: http : //jquery.malsup.com/cycle/int2.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.