0

当用户从右/左滑动图像切换时，我有一个滑动手势以我想要的方式工作。现在我只想为每个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>
4

2 回答 2

0

第三个答案：在此处更改图像演示

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，click为每个img具有 custo 属性的事件添加一个事件，例如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>
于 2013-09-05T19:03:22.723 回答
0

试试这样： -

<div>
    <a href='link1' style="display: block; height: 100%">
    <img src="../slider/slider1.png" alt=".." />
</a> </div>

这将使整个<div>可点击。

于 2013-09-05T19:07:09.057 回答