Question

任何人都可以推荐任何带按钮的好产品自动滑块。我是jquery的新手，所以任何好的简单jquery滑块都可以。我希望建立这种slider 。点击图片后，它应该打开带有描述like this的点击图片。任何有关如何制作此滑块的帮助将非常感谢提前。

Answer 1

弹出式广告：colorbox

滑块：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});

<强> EDIT2：

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

对于所有标签添加2 attr：

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;
    }

Jquery自动滑块与按钮

1 个答案: