Question

我有3张松鼠图片：

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

我想把它们放在一起，然后点击一下“切换”它们。任何人都可以帮助我吗？

Answer 1

如果你不想使用插件，这里有一个如何切换松鼠的例子：

http://jsfiddle.net/jAMzV/

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

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

这种方式一遍又一遍地循环。

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

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

Answer 4

我想你想做这样的事情：

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

Answer 5

我会尝试再给一个解决方案...... 工作...

＆＃13;

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

＆＃13;

#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;

	}

＆＃13;

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

＆＃13;

在三个图像之间切换点击？

5 个答案: