javascript - 带有按钮的 Jquery 自动 slider

Question

任何人都可以推荐任何带有按钮的好的产品自动 slider 。我是 jquery 的新手，所以任何好的简单 jquery slider 都可以。我正在寻找构建这种 slider.当点击图片时，它应该打开带有描述的点击图片like this .在此先感谢您对我如何制作此 slider 的任何帮助。

Answer 1

弹出窗口:colorbox

slider :elastislide-responsive-carousel

http://jsfiddle.net/ckraoftt/1/

HTML:

<div class="column">
    <ul id="carousel" class="elastislide-list">
        <li><a href="img4.jpg"><img src="img44" alt="image04" /></a></li>
        <li><a href="img3.jpg"><img src="img33" alt="image03" /></a></li>
        <li><a href="img2.jpg"><img src="img22" alt="image02" /></a></li>
        <li><a href="img1.jpg"><img src="img11" alt="image01" /></a></li> 
    </ul>
</div>

JQ:

$( '#carousel' ).elastislide( {
    orientation : 'vertical'
} );

$('#carousel a').colorbox({photo :true});

---

编辑 2:

http://jsfiddle.net/ckraoftt/7/

为所有标签添加 2 个属性:

data-txt="image 4 4000$" //text after image

data-button-url="http://test.com/shop/4"  //url for button Shop

JQ

$( '#carousel' ).elastislide( {
    orientation : 'vertical'
} );

$('#carousel a').colorbox({
    html:function(){

        var src=$(this).attr('href');
        var txt=$(this).attr('data-txt');
        var url=$(this).attr('data-button-url');

        var img='<img src="'+src+'">';
        var text= '<div class="pp_txt">'+txt+'</div>';
        var btn='<a class="pp_btn" href="'+url+'">SHOP</a>';

        var html='<div class="popup">'+img+text+btn+'</div>';
        return html;
    }