Question

这可能是不可能的，但我还是会问：

我从http://www.gmarwaha.com/jquery/jcarousellite/index.php获得了图片滑块插件但我希望prev和next按钮在第一个和第三个图像下不可见和底层。点击图像放大另一个div我想要点击图像后面的按钮。代码：

<div style="width: 300px; position: relative;">
    <button class="prev" style="height: 100px; width: 100px; position: absolute; left: 0;"></button>
    <button class="next" style="height: 100px; width: 100px; position: absolute; right: 0;"></button>
    <div class="slide">
        <ul>
            <li><img src="http://mario.nintendo.com/img/mario_logo.png" class="thumbprofilpic" style="height: 100px; width: 100px;" onclick="picid(this)"/></li>
            <li><img src="http://mario.nintendo.com/img/mario_logo.png" style="height: 100px; width: 100px" onclick="picid(this)"/></li>
            <li><img src="http://mario.nintendo.com/img/mario_logo.png" class="thumbprofilpic" style="height: 100px; width: 100px" onclick="picid(this)"/></li>
            <li><img src="http://mario.nintendo.com/img/mario_logo.png" class="thumbprofilpic" style="height: 100px; width: 100px" onclick="picid(this)"/></li>
            <li><img src="http://mario.nintendo.com/img/mario_logo.png" class="thumbprofilpic" style="height: 100px; width: 100px" onclick="picid(this)"/></li>
        </ul>
    </div>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousellite.min.js"></script>

<script language="javascript" type="text/javascript">
$(function() {
    $(".slide").jCarouselLite({
    btnNext: ".next",
    btnPrev: ".prev",
    circular: false
    });
});

function picid(z){
    var selected = '<img src="' + $(z).attr('src') + '" style="width: 300px">';
    $("#showfullsize").html(selected);
}
</script>

<div id="showfullsize"></div>

我有什么想法可以做到这一点？

Answer 1

在快速回复方法中 - 您可以触发点击内的任何点击，例如：

$('#element1').on('click',function(e) {
    $('#element2').trigger('click'); 
});

$('#element2').click(function(e) {
    alert('i was triggered'); 
});

Answer 2

当然，您可以动态点击事件

function picid(z) {
    var selected = '<img src="' + $(z).attr('src') + '" style="width: 300px">';
    $("#showfullsize").html(selected);

    // whatever the selectors are for your prev/next buttons
    $('.prev, .next', '#plugin-container').click();
}

虽然我很好奇这个用例是什么样的......

jQuery和CSS一次单击两个元素

2 个答案: