Question

我希望图片滑块以这样一种方式工作，即在悬停选项卡或单击它时，应该像您在flipkarts主页上总是看到的那样更改核心申请图像。现在我制作的脚本就像普通的滑块一样，可以在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/

将选项卡式内容设置为幻灯片图像

1 个答案: