Question

这里部分完成，但它不能正常工作.. 这是我的样式表

<style>
body
{
overflow:hidden;
}
div
{
position:absolute;
top:-330px;
left:-50px;
}
#slideshow img
{
position:absolute;
z-index:8;
}
#slideshow img.active
{
z-index:10;
transition-delay:5s;
transition:all 1s ease;
transform:scale(1.25);
}
#slideshow img.last-active
{
z-index:9;
}
</style>
</head>

身体陈述

<body>
<div id="slideshow">
<img src="C:\Documents and Settings\Aravind.P\Desktop\JQuery\Matt Wiebe_Manhattan Skyline_akRhRQ.jpg" class="active">
<img src="C:\Documents and Settings\Aravind.P\Desktop\JQuery\Ray_A New Day_YkFhSGU.jpg">
<img src="C:\Documents and Settings\Aravind.P\Desktop\JQuery\Luke Ma_Shinjuku Skyline - Sony A7r_a0dkRw.jpg">
</div>

这是我的jquery，我在这里通过添加类

来完成幻灯片放映

<script>
function slideShow()
{
var $active=$("#slideshow img.active");
var $next=$active.next().length ? $active.next():$("#slideshow          img:first");
$active.addClass("last-active");
$next
.addClass("active");
$active.removeClass("active anim last-active");
}
$(function()
{
setInterval("slideShow()",5000);
});
</script>

在上面的脚本中，我正在检查是否有下一张图像，如果没有，那么我指向第一张图片

Answer 1

为了实现它的最后一个图像，你可以为它添加一个类：

 $("img:last-child").addClass("last");//give some class to last image

现在你可以检查一下，如果 img 有这个类，那么它是最后一个图像：

    if ($("img").hasClass("last")) {
     $(img:last-child).removeClass("active");
     $(img:first-child).addClass("active");
}

如何使用jquery执行缩放淡入淡出幻灯片放映？

1 个答案: