Question

HTML：

<html>
<head>
<script type="text/javascript" src="jscript/jquery.js"></script>
    </head>
    <body>

<div class="slider_b">
  <img src="img/frame_wood_back_460_380.jpg">
  <img src="img/01_french_train_480_360.jpg">
  <img src="img/05_cherries_480_360.jpg">
  <img src="img/06_wheat_480_360.jpg">
  <img src="img/10_renault_480_360.jpg">
</div>
<div id="button"><img src="img/06_wheat_480_360.jpg" width="48px" height="auto"></div>

<script>
setInterval("switchit()", 3000);

$('.slider_b img:gt(0)').hide();

function switchit() {
$('.slider_b img:first-child').fadeOut(0).next('img').fadeIn(2000).end().appendTo('.slider_b');
    }
</script>
</body>
</html>

CSS：

.slider_box img{
     position:relative;
     top:0px;
    left: 0px; }
.slider_box {
    position:absolute;
    width: 480px;
    height: 360px; }
#button {
    position: relative;
    top: 10px;
    left: 500px;}

幻灯片显示有效 - 我无法弄清楚如何通过单击缩略图按钮（id =按钮）将幻灯片显示切换到其中一个图像 - 幻灯片应继续按常规循环顺序播放。

Answer 1

尝试在幻灯片及其缩略图之间建立关系以获取相应的幻灯片，例如使用attibutes对，例如缩略图为data-slide="slide1"，实际幻灯片为id="slide1"
点击缩略图，将当前幻灯片调整为相应的幻灯片并从此点继续自动动画

第一点只是一个解决方案，它是创造力的一部分;）你可以想出其他的东西，例如使用缩略图和幻灯片等等。祝你好运。

Answer 2

您可以向<img>元素添加data attribute，并附加带有第一个子<img>元素的按钮以继承该数据属性。例如：

<img src="" data-slide="1">

对于追加

var thumbnail = $("div.slider_b").find("img:first");
$("#button > img").replaceWith(thumbnail);

完成后，将其设为

("#button").on(click, function() {
    var moveTo = $(this).find("img").data(slide);
    var item = $("div.slider_b").find("[data-slide='" + moveTo + "']"
    $("div.slider_b).prepend(item);

}

我对jQuery不是100％正确，但我相信我在正确的路线上。沿着这条路线进行更多探索将带您到达您需要的地方。

我做了一个简单的jquery幻灯片 - 我想通过点击缩略图来切换到一个特定的图像

2 个答案: