Javascript 为什么不是'；这个jquery脚本是否在HTML元素中循环？

我想在鼠标点击ie的条件下循环一系列HTML元素，事件顺序如下： 1.div内的显示元素 2.点击div 3.显示下一个元素 4.点击 5.显示下一个元素 等 6.从最后一个元素循环回第一个元素

我已经创建了以下代码，但是下一个元素eg id=“image”不会替换当前元素。为什么呢？请参见下面的HTML、CSS和JS

<div class="frame" id="title">CULTURAL</div>
<div class="frame" id="image">
    <img class="topLeft" src="images/zanzibar_market_1.jpg" alt="Zanzibar Cloth">
</div>
<div class="frame" id="text">A culture encompasses the ideas, customs, and social behaviour of a people or society.
    When we mix with other cultures we are enriched by the experience.  We know more of the world.</div>

.frame {
    margin: auto;
    width: 300px;
    height: 300px;
    border: 1px solid skyblue;
}
#title {
    font-size: 2em;
    opacity: 1.0;
}
#image {
    opacity: 0.0;
}
#text {
     opacity: 0.0;
 }

var frames = document.getElementsByClassName("frame");

for( var i=0; i<frames.length; i++ ){
    $("frames".eq(i)).click (function() {
        $("frames".eq(i)).animate({
            opacity: 0.0
        });
        var x = i + 1;
        $("frames".eq(x)).animate({
            opacity: 1.0
        });
    });
};

文化
文化包括一个民族或社会的思想、习俗和社会行为。
当我们与其他文化融合时，我们的经验丰富了我们。我们对世界了解得更多。
.框架{
保证金：自动；
宽度：300px；
高度：300px；
边框：1px纯色天蓝色；
}
#头衔{
字号：2em；
不透明度：1.0；
}
#形象{
不透明度：0.0；
}
#正文{
不透明度：0.0；
}
var frames=document.getElementsByClassName（“frame”）；
对于（var i=0；i而言，这些选择器是错误的：

$("frames".eq(i))...
$("frames".eq(x))...

应该是：

$(".frame").eq(i)...
$(".frame").eq(x)...

最后一个元素的逻辑丢失。您可以尝试以下操作：

var x = (i + 1) % frames.length;

实际上它是
.frame
，而不是
frames
。我现在有：var frames=document.getElementsByClassName（“frame”）；for（var I=0；iThanks Shomz.var x=（I+1）是什么%frames.length；mean？特别是在本上下文中的%符号。不客气。
%
是一个模运算符-计算除法运算的余数。请参见此处：我编写的代码确保
x
保持在0和帧数减1之间。