javascript - div中的可点击图片 | div中的可点击图片

当用户从右/左滑动图像时，我有一个滑动手势可以按照我想要的方式工作。现在，我只想为每个img src添加一个不同的链接，因此slider1与它相关联的链接要与slider2等相关，依此类推。有人可以帮我解决这个问题吗？

<pre>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='swipe.js'></script>

<title>Presentation</title>
<style>

.swipe {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}
.swipe-wrap {
    overflow: hidden;
    position: relative;
}
.swipe-wrap > div {
    float:left;
    width:100%;
    position: relative;
}

#mySwipe div b {
    display:block;
    margin:0px;
    margin-top:240px;
    background:url("");
    height:1280px;
    width:720px;
}

</style>
<script type="text/javascript">

    // When the DOM is ready, initialize the scripts.
    jQuery(function( $ ){

    // Get a reference to the container.
    var container = $( ".container" );


    // Bind the link to toggle the slide.
    $( "a" ).click(
    function( event ){
    // Prevent the default event.
    event.preventDefault();

    // Toggle the slide based on its current
    // visibility.
    if (container.is( ":visible" )){

    // Hide - slide up.
    container.slideUp(500, function(){ $('').show(); });
    } else {

    // Show - slide down.
    container.slideDown(300, function(){ $('').hide(); });
    }
    }
    );

    });

    </script>

</head>
<body>
<a href="#"><img src="../question_header/question.png" /></a>
<div class="nfooter"></div>

<div id='mySwipe' style='width:720px; height:981px; margin-top:55px;' class='swipe'>
  <div class='swipe-wrap'>
    <div><img src="../slider/slider1.png" /></div>
    <div><img src="../slider/slider2.png" /></div>
    <div><img src="../slider/slider3.png" /></div>
    <div><img src="../slider/slider4.png" /></div>
  </div>
</div>

<script>

// pure JS
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
  // transitionEnd: function(index, element) {}
});

// with jQuery
// window.mySwipe = $('#mySwipe').Swipe().data('Swipe');

</script>

<div class='container'>
<div class='inner'>
    </div>
    </div>
</body>
</html>
</pre>

最佳答案

第三答案：更改图像DEMO HERE

jQuery(document).ready(function($) {


   $('img[slideurl]').click(function(){

   if($(this).is(':last-child')){
       $(this).insertBefore($('img[slideUrl]').first());
    }
    else {
     $(this).next('img[slideUrl]').insertBefore($(this));

    }

 });

});

第二个答案：

在阅读您的评论之后，我建议使用jQuery，向具有custo属性的每个click添加一个img事件，例如slideUrl='http://stackoverflow.com'：

HTML：

  <div class='swipe-wrap'>
    <div><img src="../slider/slider1.png" slideUrl='http://link1.com' /></div>
    <div><img src="../slider/slider2.png"  slideUrl='http://link2.com'/></div>
    <div><img src="../slider/slider3.png"  slideUrl='http://link3.com'/></div>
    <div><img src="../slider/slider4.png"  slideUrl='http://link4.com'/></div>
  </div>

JS代码：

$('img[slideUrl]').click(function(){
window.location.href = $(this).attr('slideUrl');
});

CSS：

img[slideUrl]{
 cursor:pointer;
}

第一答案：

您可以使用具有<a>属性的href元素来完成此操作，如下所示：

 <div><a href='link1'><img src="../slider/slider1.png" /></a></div>

关于javascript - div中的可点击图片，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18643952/