我有松鼠的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