javascript - 将标签内容设置为幻灯片图像

Question

我希望图像 slider 以这样一种方式工作，即在选项卡上悬停或单击它应该更改核心响应图像，就像您始终可以在 flipkarts 上看到的那样主页。现在我制作的脚本像普通 slider 一样工作，它会在 5 秒内更改图像。任何人都可以帮助我实现我所需要的。

HTML

<!--slide-part-starts--><div class="slide-part">
    <!--slider-starts--><div class="fadein">
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="BG Slideshow/1.jpg"><!--powerock-->
<img style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="BG Slideshow/2.jpg"><!--powerpunch-->
</div><!--slide-ends-->
</div><!--slide-part-ends-->
<div class="tabbed">
        <ul class="tab-slide">
        <li><a href="#">POWEROCK 13600mAh Power Banks</a></li>
        <li style="float:right"><a href="#">POWERPUNCH 10500mAh Power Banks</a></li>
        </ul>
    </div>

CSS

.slide-part{
    width:100%;
    max-width:1600px;
    margin:0 auto;
    min-height:100px;
    height:100%
}

.fadein {
    position:relative; 
    width:100%; 
    max-width:1600px; 
    margin:0 auto; 
    min-height:600px;
    height:100%
}

.fadein img {
    position:absolute; 
    left:0; 
    top:0; 
    height:auto; 
    max-width:100%; 
    width: auto\9;
}

.tabbed{
    width:100%;
    max-width:1600px;
    margin:0 auto
}

ul.tab-slide{
    margin:0; 
    padding:0
}

ul.tab-slide li{
    list-style:none;
    width:50%;
    display:block;
    float:left;
    display:list-item;
    text-align:center;
    background:#00a3d3
}

ul.tab-slide li a{
    position:relative;
    color:#000;
    text-decoration:none;
    width:100%;
    display:block;
    color:#fff;
    padding:15px 0 15px 0;
}

ul.tab-slide li:hover{background:#000;}

JS

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(function(){
    $('.fadein img:gt(0)').hide();
    setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 5000);
});
});//]]>  

</script>

Answer 1

您可以使用一些额外的 jQuery 并向您的 html 添加一些 id 来轻松完成此操作。

首先，您必须在 HTML 代码中为图像添加一个 id:

<img id="img1" style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerock-13600mAh-powerbank.html'" src="linktoimage"><!--powerock-->
<img id="img2" style="cursor:pointer" onclick="window.location.href='http://myevio.com/powerpunch-10500mAh-powerbank.html'" src="linktoimage">

之后，您将 data-id 添加到超链接:

<li><a data-id="img1" href="#">POWEROCK 13600mAh Power Banks</a></li>
<li style="float:right"><a data-id="img2" href="#">POWERPUNCH 10500mAh Power Banks</a></li>

完成后，您可以添加以下 jQuery:

$('.tabbed a').on({
    'mouseenter': function() {
        $('.fadein img').hide();
        $('#' + $(this).data('id')).fadeIn();
    }

这应该可以解决问题。 JSFIDDLE 在这里:https://jsfiddle.net/enhtymgk/1/