1

我正在尝试使用细化滑块，到目前为止它实际上看起来很酷。我从其他一些帖子中注意到这个论坛上有一些其他用户，所以我想我会伸出手来。有谁知道我将如何更改下面较小的“滑块”图像，这样他们就不会使用与上面旋转的“英雄”图像相同的图像？我想为底部滑块和上面较大的旋转图像使用独立图像。

为此有很多代码，我在个人网站上确实有这些代码，所以我创建了一个小提琴，您可以在下面查看。（抱歉，这是我的第一个小提琴，所以如果看起来不正确，请告诉我，我会修复。）

http://jsfiddle.net/Buford/aMj6u/

（下面粘贴的代码只是html，css和js可以看上面的链接。）

    <div class="wrap group">
        <div class="section-2 group">
            <ul id="images" class="rs-slider">
                <li class="group">
                    <a href="#"><img src="http://thegravityghost.com/test/assets/img/wood6.jpg" alt="" /></a>
                    <div class="rs-caption rs-bottom">
                        <h3>Caption Area</h3>
                        <p>Wood texture by <a href="http://downloads.dvq.co.nz/" class="button">Matthew Skiles.</a></p>
                    </div>
                </li>
                <li class="group">
                    <a href="#" class="slide-parent"><img src="http://thegravityghost.com/test/assets/img/greenbut.jpg" alt=""/></a>
                    <div class="rs-caption rs-top-right">
                        <p>This image is wrapped in a link.</p>
                    </div>
                </li>
                <li class="group">
                    <img src="http://thegravityghost.com/test/assets/img/form.jpg" alt=""/>
                    <div class="rs-caption rs-bottom-right">
                        <p>Adapted from <a class="button" href="http://dribbble.com/shots/154205-Cool-Green-Signup-form">Glenn Van Bogaert</a></p>
                    </div>
                </li>
                <li class="group"><img src="http://thegravityghost.com/test/assets/img/red.jpg" alt=""/>
                </li>
                <li class="group"><img src="http://thegravityghost.com/test/assets/img/6.jpg" alt=""/></li>
            </ul>
        </div> <!-- /.section-2 -->         
    </div> <!-- /.wrap -->



<script src="http://thegravityghost.com/test/assets/js/jquery.js"></script>
<script src="http://thegravityghost.com/test/assets/js/jquery.refineslide2.js"></script>
<script>
    $(function () {
        var $upper = $('#upper');

        $('#images')

        .refineSlide({
            transition : 'fade',
            onInit : function () {
                var slider = this.slider,
                   $triggers = $('.translist').find('> li > a');

                $triggers.parent().find('a[href="#_'+ this.slider.settings['transition'] +'"]').addClass('active');

                $triggers.on('click', function (e) {
                   e.preventDefault();

                    if (!$(this).find('.unsupported').length) {
                        $triggers.removeClass('active');
                        $(this).addClass('active');
                        slider.settings['transition'] = $(this).attr('href').replace('#_', '');
                    }
                });

                function support(result, bobble) {
                    var phrase = '';

                    if (!result) {
                        phrase = ' not';
                        $upper.find('div.bobble-'+ bobble).addClass('unsupported');
                        $upper.find('div.bobble-js.bobble-css.unsupported').removeClass('bobble-css unsupported').text('JS');
                    }
                }

                support(this.slider.cssTransforms3d, '3d');
                support(this.slider.cssTransitions, 'css');
            }
        });
    });
</script>

我仍在学习 js 和 jquery，但我认为驱动滑块中当前“较小”图像的 js 代码部分是这样的：

    ,setThumbs: function () {
        var that = this,
            // Set percentage width (minus user-defined margin) to span width of slider
            width = (100 - ((this.totalSlides - 1) * this.settings.thumbMargin)) / this.totalSlides + '%';

        //<Wrapper to contain thumbnails
        this.$thumbWrap = $('<div class="rs-thumb-wrap" />').appendTo(this.$sliderWrap);

        // Loop to apply thumbnail widths/margins to <a> wraps, appending an image clone to each
        for (var i = 0; i < this.totalSlides; i++) {
            var $thumb = $('<a />')
                .css({
                    width : width,
                    marginLeft : this.settings.thumbMargin + '%'
                })
                .attr('href', '#')
                .data('rs-num', i);

            this.$slideImages.eq(i).clone()
                .removeAttr('style')
                .appendTo(this.$thumbWrap)
                .wrap($thumb);
        }

        this.$thumbWrapLinks = this.$thumbWrap.find('a');

        // Safety margin to stop IE7 wrapping the thumbnails (no visual effect in other browsers)
        this.$thumbWrap.children().last().css('margin-right', -10);

        // Add active class to starting slide's respective thumb
        this.$thumbWrapLinks.eq(this.settings.startSlide).addClass('active');

        // Listen for click events on thumnails
        this.$thumbWrap.on('click', 'a', function (e) {
            e.preventDefault();

            that.transition(parseInt($(this).data('rs-num'))); // Call transition using identifier from thumb class
        });
    }

我不知道更新语法以实现我的原始请求的正确方法（最终结果使用与上面的旋转英雄图像不同的滑块图像）。任何帮助将不胜感激。

4

0 回答 0