通过在HTML中淡入淡出在图片中移动

Moving through pictures by fading in HTML

本文关键字：移动 淡出 淡入 HTML      更新时间：2023-11-02

我有一些图片，我想通过单击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

相关文章：