html 用于新BB重新设计的滑块（稍后清理）

Posted 2021-05-11

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
// We do not need a fancy slider, just something simple.
$ ( document ).ready(function() {
    //Add Current class to first menu item + first slide
    $('#slider-menu a:first-child, #slider div.slide:first-child').addClass('current');
    //Display: block;, .slide is display:none;. Override!
    $('#slider .slide:first-child').css('display', 'block');
    
    //On click of slider menu
    $('#slider-menu a').on('click', function(e) {
        e.preventDefault();
        var slide = $(this).attr('data-slide');
        if ( $('.slide.current').attr('id') != slide) {
            //Fadeout first, then fade in. Was too janky before.
            $('.slide.current').fadeOut(450, function () {
                $('#' + slide).fadeIn(450);
            });
            $('.slide, #slider-menu a').removeClass('current');
            $('#' + slide).addClass('current');
            $(this).addClass('current');
        }
    });
});
</script>
<style>
#slider {background: #f8f8f8; padding: 20px;}
    .slide {display: none;}
    #slider-menu a.current {font-weight:bold;}
</style>
<div id="slider-menu">
    <a href="#" data-slide="beef">Beef</a>&nbsp;&nbsp;&nbsp;
    <a href="#" data-slide="chicken">Chicken</a>
</div>
<div id="slider">
    <div class="slide" id="beef">
       <img src="http://puu.sh/dpRIH/281591c3bc.jpg" />
    </div>
    <div class="slide" id="chicken">
        <img src="http://puu.sh/dpRIH/281591c3bc.jpg" />
    </div>
</div>