单击时交叉淡入淡出背景图像

cross fade background image on click

本文关键字：淡出 背景 图像 淡入 单击      更新时间：2023-09-26

这里的java脚本代码是自动幻灯片图像，但当我单击.box1 classes时，我需要将其转换为onclick代码。

当我点击box1类时，crossfade只需要对id＝#main中的背景图像产生影响。交叉淡入度不能影响框1，并且它必须在背景图像交叉淡入时连续出现。

对于背景图像的交叉渐变，图像必须直接连接到图像文件夹为此，我需要连接#main中的图像文件夹和背景图像。

一些身体能帮上忙吗。

我的代码在这里

var timer = setInterval(nextImage, 4000);
var curImage = 0;
var numImages = 5;
function nextImage() {
    var e;
    // remove showMe class from current image
    e = document.getElementById("slideimg" + curImage);
    removeClass(e, "showMe");
    // compute next image
    curImage++;
    if (curImage > numImages - 1) {
        curImage = 0;
    }
    // add showMe class to next image
    e = document.getElementById("slideimg" + curImage);
    addClass(e, "showMe");
}
function addClass(elem, name) {
    var c = elem.className;
    if (c) c += " ";  // if not blank, add a space separator
    c += name;
    elem.className = c;
}
function removeClass(elem, name) {
    var c = elem.className;
    elem.className = c.replace(name, "").replace(/'s+/g, " ").replace(/^'s+|'s+$/g, "");  // remove name and extra blanks
}

检查以下JSfiddle以更改clcik 上的图像

http://jsfiddle.net/arunberti/cwP5Q/99/

将函数写入以下代码中

$('#container').click(function() {
});
相关文章：