我有松鼠的3张图片：onclick三个图像之间切换？
<img src="images/SquirrelFull.jpeg" class="squirrel">
<img src="images/SquirrelName.jpeg" class="squirrel">
<img src="images/SquirrelEmpty.jpeg" class="squirrel">
我希望把他们在彼此的顶部，“切换”，通过他们点击。谁能帮我？
如果你不喜欢使用插件幻灯片，这里是你如何能够通过你的松鼠切换的例子：
基本上我把松鼠在父容器，并隐藏他们全部，除了一个带班default。然后你在松鼠上绑定一个点击事件，它执行以下操作：
隐藏单击的一个，这是唯一一个可见的 检查是否存在下一个元素，如果没有，选择第一个元素并显示那，否则显示下一个。
这种方式一遍又一遍地循环。
您可以使用JQueryCycle插件。简单易学和强大的......你会发现你在他们的网页
这里需要的所有信息，我认为它是你想要的：
<h1>Example</h1>
<div id="s1" class="pics">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
</div>
<div class="nav">(Click on image for next slide)</div>
<pre>
<code class="mix">$('#s1').cycle({
fx: 'slideY',
speed: 300,
next: '#s1',
timeout: 0 });
</code></pre>
您可以采取的jCarousel：http://sorgalla.com/projects/jcarousel/examples/static_circular.html
对于这个你只有在JavaScript中这样写：
$(function(){
/*#mycarousel is the ID from the ul list*/
$('#mycarousel').jcarousel({
"wrap": 'circular',
"scroll": 1
});
一个在HTML你没有忘记这一点：
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script src="jquery.jcarousel.min.js" type="text/javascript"></script>
，然后你才可以创建正确的类
<div class="jcarousel-container jcarousel-container-horizontal" id="pictureslide">
<div class="jcarousel-clip jcarousel-clip-horizontal" id="pic" style='position: relative;'>
<ul id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal' id='jcarousel-item-1'>
<img src="images/SquirrelFull.jpeg" class="squirrel">
</li>
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-2-horizontal' id="jcarousel-item-2" >
<img src="images/SquirrelName.jpeg" class="squirrel">
</li>
<li class='jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-3-horizontal' id="jcarousel-item-3" >
<img src="images/SquirrelEmpty.jpeg" class="squirrel">
</li>
</ul>
</div>
<!-- Here are the arrows-->
<div class="jcarousel-prev jcarousel-prev-horizontal" style="display:'block'">
<a class="controls prev" href="#"><img id="arrow-left" src="pic/arrow_left.png" alt="arrow-left" /></a>
</div>
<div class="jcarousel-next jcarousel-next-horizontal" style="display:'block'">
<a class="controls next" href="#"><img id="arrow-right" src="pic/arrow_right.png" alt="arrow-right"/></a>
</div>
我想你想要做这样的事情：
我会尽量给多了一个解决方案... 工作...
$('img').click(function() {
$('img').each(function(){
var classes = ['icon','icon1','icon2'];
this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
});
});#container {
\t \t position: relative;
\t \t height: 80px;
\t \t width: 80px;
\t \t margin: auto;
\t \t overflow: hidden;
\t \t top: 30%; left: 0; bottom: 0; right: 0;
\t }
\t
\t .icon {
\t \t position: absolute;
\t \t width:80px;
\t \t height:80px;
\t \t
\t }
\t .icon1 {
\t \t position: relative;
\t \t display: none;
\t }
\t .icon2 {
\t \t position: relative;
\t \t display: none;
\t } \t \t \t \t<!DOCTYPE>
<html>
<head>
<title>Little Twitter Buttons</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="container">
<img class="icon" src="http://i.imgur.com/9FEVXE2.png" alt="*" height="80" width="80"/>
<img class="icon1" src="http://i.imgur.com/zZ1w6Qt.png" alt="*" height="80" width="80"/>
<img class="icon2" src="http://i.imgur.com/TRWB1qO.png" alt="*" height="80" width="80"/>
</div>
</body>
</html>
尽管我知道你的代码是正确的，但它仍然不能用于某些疯狂的原因。当我啾啾他们时，CSS和html工作正常，但我从js中得不到任何东西。我有一个链接头到'\t \t “我不知道什么是，但谢谢你！ – Squirrl 2012-02-14 09:09:52
哇！我终于弄明白了。当我将代码直接复制并粘贴到Dreamweaver中时，发生了一些疯狂的小隐形错误。它现在完全有效。唷！我有7个小时的生活，我再也看不到了。 :-) – Squirrl 2012-02-14 20:46:25