onclick 在三个图像之间切换？答案

【问题标题】：Toggle between three images onclick?onclick 在三个图像之间切换？
【发布时间】：2012-02-14 08:16:34
【问题描述】：

我有 3 张松鼠图片：

<img src="images/SquirrelFull.jpeg"  class="squirrel">
<img src="images/SquirrelName.jpeg"  class="squirrel">
<img src="images/SquirrelEmpty.jpeg"  class="squirrel">

我想将它们叠放在一起，然后通过单击“切换”它们。谁能帮帮我？

【问题讨论】：

标签： jquery css image toggle

【解决方案1】：

如果您不想使用插件，这里有一个示例，说明如何在松鼠之间切换：

http://jsfiddle.net/jAMzV/

基本上我把松鼠放在一个父容器中，除了default类的松鼠之外，把它们全部隐藏起来。然后你在松鼠上绑定一个点击事件，它执行以下操作：

隐藏点击的那一项，这是唯一可见的检查是否有下一个元素，如果没有，则选择第一个并显示，否则显示下一个。

这样循环一遍又一遍。

【讨论】：

即使我知道您的代码是正确的，但由于某些疯狂的原因它仍然无法正常工作。当我对 css 和 html 进行 tweek 处理时，它们工作正常，但我从 js 中一无所获。我的头上有一个链接到` `我不知道发生了什么，但谢谢！
哇！我终于弄明白了。当我将您的代码直接复制并粘贴到 Dreamweaver 中时，发生了一些疯狂的小无形错误。它现在完全有效。呸！！我的生命中有 7 个小时我再也见不到了。 :-)

【解决方案2】：

您可以使用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>

【讨论】：

【解决方案3】：

你可以拿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>

【讨论】：

【解决方案4】：

我认为你想做这样的事情：

http://jsfiddle.net/Fzxgd/1/

【讨论】：

【解决方案5】：

我会尝试再提供一个解决方案... 工作中...

$('img').click(function () {
  $('img').each(function(){
    var classes = ['icon','icon1','icon2'];
    this.className = classes[($.inArray(this.className, classes)+1)%classes.length];
  });
});

#container {
		position: relative;
		height: 80px;
		width: 80px;
		margin: auto;
		overflow: hidden;
		top: 30%; left: 0; bottom: 0; right: 0;
	}
	
	.icon {
		position: absolute;
		width:80px;
		height:80px;
		

	}
	.icon1  {
		position: relative;
		display: none;

	}
	.icon2  {
		position: relative;
		display: none;

	}

<!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>

【讨论】：