jQuery onclick并更改图像

Question

我正在尝试创建一个简单的jQuery，当单击图像时，它会更改为下一个图像。我得到了大部分工作，但是当点击最后一张图片时，它就会结束。我希望它再次旋转到第一张图像，以便在点击时无限期地继续旋转。

<li id="t_01">
    <img src="images/tear_sheets/t_02.jpg" alt="" class="image"/>
</li>

http://jsfiddle.net/zLk430dm/

Answer 1

我只是在 last li

之后插入 first li

$("img").click(function () {
    $('#tear_sheets li:first').insertAfter($('#tear_sheets li:last'));
});

演示：http://jsfiddle.net/8ky8wmb8/

Answer 2

试试这个

＆＃13;

＆＃13;

$(".box li").click(function() {
    if ($(this).is(':last-child')) {
        $(".box li:first-child").addClass("active").nextAll("li").removeClass("active")
    } else {
        $(this).next("li").addClass("active").prevAll("li").removeClass("active");
    }
})

＆＃13;

ul
{
	height: 150px;
	position: relative;
	width: 150px;
}

ul li
{
	left: 0;
	list-style: none;
	position: absolute;
	text-decoration: none;
	top: 0;
}

ul li
{
	display: none;
}

ul li.active
{
	display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tear_sheets">
    <h2>Tear Sheets</h2>
    <ul class="box">
        <li id="t_01" class="active">
            <img src="http://placekitten.com/175/300" class="image" /></li>
        <li id="t_01">
            <img src="http://placekitten.com/250/300" alt="" class="image" /></li>
        <li id="t_01">
            <img src="http://placekitten.com/275/300" alt="" class="image" /></li>
        <li id="t_01">
            <img src="http://placekitten.com/190/300" alt="" class="image" /></li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

更新（请参阅注释）不透明度和过渡

＆＃13;

＆＃13;

$(".box li").click(function() {
    if ($(this).is(':last-child')) {
        $(".box li:first-child").addClass("active").nextAll("li").removeClass("active")
    } else {
        $(this).next("li").addClass("active").prevAll("li").removeClass("active");
    }
})

＆＃13;

ul
{
	height: 150px;
	position: relative;
	width: 150px;
}

ul li
{
	left: 0;
	list-style: none;
	position: absolute;
	text-decoration: none;
	top: 0;
}

ul li
{
	opacity:0;
    z-index:-9999;
    transition: opacity .3s ease;
}

ul li.active
{
	opacity:1;
    z-index:1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tear_sheets">
    <h2>Tear Sheets</h2>
    <ul class="box">
        <li id="t_01" class="active">
            <img src="http://placekitten.com/175/300" class="image" /></li>
        <li id="t_01">
            <img src="http://placekitten.com/250/300" alt="" class="image" /></li>
        <li id="t_01">
            <img src="http://placekitten.com/275/300" alt="" class="image" /></li>
        <li id="t_01">
            <img src="http://placekitten.com/190/300" alt="" class="image" /></li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

使用fadeIn进行演示

＆＃13;

＆＃13;

$(".box li").click(function() {
    if ($(this).is(':last-child')) {
        $(".box li:first-child").fadeIn("slow").nextAll("li").hide()
    } else {
        $(this).next("li").fadeIn("slow").prevAll("li").hide();
    }
})

＆＃13;

ul
{
	height: 150px;
	position: relative;
	width: 150px;
}

ul li
{
	left: 0;
	list-style: none;
	position: absolute;
	text-decoration: none;
	top: 0;
}

ul li
{
	display: none;
}

ul li.active
{
	display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tear_sheets">
    <h2>Tear Sheets</h2>
    <ul class="box">
        <li id="t_01" class="active">
            <img src="http://placekitten.com/175/300" class="image" /></li>
        <li id="t_01">
            <img src="http://placekitten.com/250/300" alt="" class="image" /></li>
        <li id="t_01">
            <img src="http://placekitten.com/275/300" alt="" class="image" /></li>
        <li id="t_01">
            <img src="http://placekitten.com/190/300" alt="" class="image" /></li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

也许这是你想要实现的目标：

  

  
1. HTML：
  

    <div id="tear_sheets">
        <h2>Tear Sheets</h2>
        <ul class="box">
        <li id="t_01">  
          <img src="http://placekitten.com/175/300" class="image"/>
          <img src="http://placekitten.com/250/300" alt="" class="image"/>
          <img src="http://placekitten.com/275/300" alt="" class="image"/>
          <img src="http://placekitten.com/190/300" alt="" class="image"/>
            </li>
        </ul>

    </div>

2. Javascript:

$(function(){
  $("img").hide();
  $("img").first().show();
});

$("img").click(function () {
  $(this).hide();
   debugger;
    if( $(this).next().length === 0) {
          $("img").first().show();
    }
    else {
         $(this).next().show();
    }


})

演示：http://jsfiddle.net/zLk430dm/1/

希望它有所帮助。

Answer 4

您可以使用一行脚本执行此操作，方法是继续将单击的项目附加到父项，同时仅显示第一项：

＆＃13;

＆＃13;

$("img").click(function () {
    $(this).parent("li").appendTo(".box")
})

＆＃13;

ul li {
    display:none;
    text-decoration: none;
    list-style: none;
}
ul li:first-child {
    display:block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tear_sheets">
    	<h2>Tear Sheets</h2>

    <ul class="box">
        <li>
            <img src="http://placekitten.com/175/300" class="image" />
        </li>
        <li>
            <img src="http://placekitten.com/250/300" alt="" class="image" />
        </li>
        <li>
            <img src="http://placekitten.com/275/300" alt="" class="image" />
        </li>
        <li>
            <img src="http://placekitten.com/190/300" alt="" class="image" />
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;