Question

我尝试创建旋转木马，但它不能使用下面的代码。

HTML：

<div class="carousil_listing_container clearfix"><a class="buttons prev" href="#">left</a>
<div class="viewport"><ul class="overview"><li>Content 01</li><li>Content 02</li><li>Content 3</li></ul></div><a class="buttons next" href="#">right</a></div>

CSS：

.carousil_listing_container { height: 1%; overflow:hidden; padding: 0 0 10px;   }
.carousil_listing_container .viewport { float: left; width: 240px; height: 125px; overflow: hidden; position: relative; }
.carousil_listing_container .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
.carousil_listing_container .next { background-position: 0 0; margin: 30px 0 0 10px;  }
.carousil_listing_container .disable { visibility: hidden; }
.carousil_listing_container .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
.carousil_listing_container .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}

Answer 1

你可以试一下许多滑块/旋转木马之一

Nivo-Slider

<强> Responsive Slides

<强> Basic Slider

<强> Swiper

<强> Responsive Image Grid

<强> WoW Slider

Answer 2

Try this below jQuery code which does not have any third party plugin

JSFiddle Link：http://jsfiddle.net/ramsunvtech/ZcfJu/

HTML

<div class="tgt-carousel">
    <span id="tgt-prev">prev</span>
    <ul>
        <li>First Text goes here . . .</li>
        <li>Second Text goes here . . .</li>
        <li>Third Text goes here . . .</li>
        <li>Fourth Text goes here . . .</li>
        <li>Fifth Text goes here . . .</li>
        <li>Sixth Text goes here . . .</li>
        <li>Seventh Text goes here . . .</li>
    </ul>
    <span id="tgt-next">next</span>
</div>

CSS

.tgt-hide{display:none;}
.tgt-show{display:block;}
.tgt-arrows{cursor:pointer;}
.red{background-color:red;}

的jQuery

$(function() {
    // Initialize the Carousel.
    $( ".tgt-carousel" ).tgtCarousel({
        'hide': 'tgt-hide'
    });
});


/**
 * This Plugin is used to do Simple text carousel.
 */

(function ( $ ) {

    var tgtConfig = {
        'hide': 'tgt-hide',
        'prevClass': 'tgt-prev',
        'nextClass': 'tgt-next',
        'arrowClass': 'tgt-arrows',
        'activeClass': 'tgt-active'
    };

    $.fn.tgtCarousel = function(settings) {
        if (settings){
            $.extend(tgtConfig, settings);
        }

        var prevButton = '#' + tgtConfig.prevClass;
        var nextButton = '#' + tgtConfig.nextClass;
        var arrowButtons = prevButton + ', ' + nextButton;
        $(arrowButtons).addClass(tgtConfig.arrowClass);

        this.children('ul').children('li:eq(0)').addClass(tgtConfig.activeClass);
        this.children('ul').children('li:gt(0)').addClass(tgtConfig.hide);

        $(prevButton).bind( "click", function() {
            var activeItem = $(this).next('ul').children('.' + tgtConfig.activeClass);
            if(activeItem.prev().size() > 0) {
                activeItem.prev().removeClass(tgtConfig.hide).addClass(tgtConfig.activeClass);
                activeItem.removeClass(tgtConfig.activeClass).addClass(tgtConfig.hide);
            }
        });

        $(nextButton).bind( "click", function() {
            var activeItem = $(this).prev('ul').children('.' + tgtConfig.activeClass);
            if(activeItem.next().size() > 0){
                activeItem.next().removeClass(tgtConfig.hide).addClass(tgtConfig.activeClass);
                activeItem.removeClass(tgtConfig.activeClass).addClass(tgtConfig.hide);
            }
        });

        return this;
    };

}( jQuery ));

需要一个没有第三方插件的旋转木马

2 个答案:

HTML

CSS

的jQuery