English 中文(简体)
How to stop sliding if only one <li> using anythingSlider(jQuery plugin)?
原标题:

I m currently using the anythingSlider plugin, it works totally fine except when there is only one <li>.

The <li>s are generated from the database so sometimes there s only one.

However, the anythingSlider plugin still tries to slide through the <li>s, it works by sliding back to the first slide. Although this doesn t look great.

Does anybody know of a way of stopping it sliding if there s only one <li>?

-- EDIT --

Hi!

Can anybody else help with this? I ve tried the solution by Greg and I ve also tried:

if (banners<1) {
    .anythingSlider({
        startStopped: true,
        buildNavigation: false
        });
    }

banners is my variable that I m calling.

And this disables the anythingSlider function altogether.

Help please?!

-- EDIT 2 --

The original code is in the page of the html

<script type="text/javascript">

var banners=[];

banners[0]="http://image.ebuyer.com/customer/promos/UK/AcerAspire5536.jpg";
//banners[1]="http://image.ebuyer.com/customer/promos/2150/banner.jpg";
//banners[2]="http://image.ebuyer.com/customer/promos/UK/257653_FerrariOne_tb20091026.jpg";
//banners[3]="http://image.ebuyer.com/customer/promos/UK/247038_compaq_images/247038_compaq_incentive_banner20090814.jpg"; //added 03/09/2009
//banners[4]="http://image.ebuyer.com/customer/promos/UK/247858-samsung-tv-comp-tb20090817.jpg"; //added 19/08/2009

var bannerLink=[];

bannerLink[0]="http://www.ebuyer.com/product/173536";
//bannerLink[1]="/special/2150";
//bannerLink[2]="/product/172295";
//bannerLink[3]="/compaq-cash-incentive";
//bannerLink[4]="/special/2101";

var bannerAlt=[];

bannerAlt[0]="Acer Aspire 5536";
//bannerAlt[1]="The X5 range for Asus";
//bannerAlt[2]="Acer Ferrari One Laptop";
//bannerAlt[3]="Buy these three products together and claim £75 cashback";
//bannerAlt[4]="Win a Samsung 46in LCV TV";

</script>

It s then being actioned by this file: http://image.ebuyer.com/customer/promos/js/topbanners.js

// function to import css and javascript from external locations
function loadjscssfile(filename, filetype){
 if (filetype=="js"){ //if filename is a external JavaScript file
  var fileref=document.createElement( script )
  fileref.setAttribute("type","text/javascript")
  fileref.setAttribute("src", filename)
 }
 else if (filetype=="css"){ //if filename is an external CSS file
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)
 }
 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

// importing css and javascript
loadjscssfile("http://static.ebuyer.com/css/slider.css", "css") ////dynamically load and add this .css file

// setting the variables
var banner = document.getElementById( tehBanner );
var link = document.getElementById( tehLink );

// this function creates the tracking tags
function tracking (x) {
    if (x.indexOf("?")>=0){x+= &tb= +(i+1);}else{x+= ?tb= +(i+1);}
    return x 
    }

// telling the javascript to display all available variables    
for (var i in banners) {
    banner.alt = bannerAlt[i];  
    link.href = tracking(bannerLink[i]);
    banner.src = banners[i];
    document.write( <a href="  + bannerLink[i] +  " class="slide-link">  +  <img src="  + banners[i] +  " id="slide-image" alt="  + bannerAlt[i] +  " /></a> );
    }

// remove the original banner
$ ( a#tehLink ).parent().remove();

// hide banners to begin with
$( a.slide-link ).hide();

/*
    anythingSlider v1.1

    By Chris Coyier: http://css-tricks.com
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/


    To use the navigationFormatter function, you must have a function that
    accepts two paramaters, and returns a string of HTML text.

    index = integer index (1 based);
    panel = jQuery wrapped LI item this tab references
    @return = Must return a string of HTML/Text

    navigationFormatter: function(index, panel){
        return index + " Panel"; // This would have each tab with the text  X Panel  where X = index
    }
*/

(function($){

    $.anythingSlider = function(el, options){
        // To avoid scope issues, use  base  instead of  this 
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el; 

        // Set up a few defaults
        base.currentPage = 1;
        base.timer = null;
        base.playing = false;

        // Add a reverse reference to the DOM object
        base.$el.data("AnythingSlider", base);

        base.init = function(){
            base.options = $.extend({},$.anythingSlider.defaults, options);

            // Cache existing DOM elements for later 
            base.$wrapper = base.$el.find( > div ).css( overflow ,  hidden );
            base.$slider  = base.$wrapper.find( > ul );
            base.$items   = base.$slider.find( > li );
            base.$single  = base.$items.filter( :first );

            // Build the navigation if needed
            if(base.options.buildNavigation) base.buildNavigation();

            // Get the details
            base.singleWidth = base.$single.outerWidth();
            base.pages = base.$items.length;

            // Top and tail the list with  visible  number of items, top has the last section, and tail has the first
            // This supports the "infinite" scrolling
            base.$items.filter( :first ).before(base.$items.filter( :last ).clone().addClass( cloned ));
            base.$items.filter( :last  ).after(base.$items.filter( :first ).clone().addClass( cloned ));

            // We just added two items, time to re-cache the list
            base.$items = base.$slider.find( > li ); // reselect

            // Setup our forward/backward navigation
            base.buildNextBackButtons();

            // If autoPlay functionality is included, then initialize the settings
            if(base.options.autoPlay) {
                base.playing = !base.options.startStopped; // Sets the playing variable to false if startStopped is true
                base.buildAutoPlay();
            };

            // If pauseOnHover then add hover effects
            if(base.options.pauseOnHover) {
                base.$el.hover(function(){
                    base.clearTimer();
                }, function(){
                    base.startStop(base.playing);
                });
            }

            // If a hash can not be used to trigger the plugin, then go to page 1
            if((base.options.hashTags == true && !base.gotoHash()) || base.options.hashTags == false){
                base.setCurrentPage(1);
            };
        };

        base.gotoPage = function(page, autoplay){
            // When autoplay isn t passed, we stop the timer
            if(autoplay !== true) autoplay = false;
            if(!autoplay) base.startStop(false);

            if(typeof(page) == "undefined" || page == null) {
                page = 1;
                base.setCurrentPage(1);
            };

            // Just check for bounds
            if(page > base.pages + 1) page = base.pages;
            if(page < 0 ) page = 1;

            var dir = page < base.currentPage ? -1 : 1,
                n = Math.abs(base.currentPage - page),
                left = base.singleWidth * dir * n;

            base.$wrapper.filter( :not(:animated) ).animate({
                scrollLeft :  +=  + left
            }, base.options.animationTime, base.options.easing, function () {
                if (page == 0) {
                    base.$wrapper.scrollLeft(base.singleWidth * base.pages);
                    page = base.pages;
                } else if (page > base.pages) {
                    base.$wrapper.scrollLeft(base.singleWidth);
                    // reset back to start position
                    page = 1;
                };
                base.setCurrentPage(page);

            });
        };

        base.setCurrentPage = function(page, move){
            // Set visual
            if(base.options.buildNavigation){
                base.$nav.find( .cur ).removeClass( cur );
                $(base.$navLinks[page - 1]).addClass( cur );    
            };

            // Only change left if move does not equal false
            if(move !== false) base.$wrapper.scrollLeft(base.singleWidth * page);

            // Update local variable
            base.currentPage = page;
        };

        base.goForward = function(autoplay){
            if(autoplay !== true) autoplay = false;
            base.gotoPage(base.currentPage + 1, autoplay);
        };

        base.goBack = function(){
            base.gotoPage(base.currentPage - 1);
        };

        // This method tries to find a hash that matches panel-X
        // If found, it tries to find a matching item
        // If that is found as well, then that item starts visible
        base.gotoHash = function(){
            if(/^#?panel-d+$/.test(window.location.hash)){
                var index = parseInt(window.location.hash.substr(7));
                var $item = base.$items.filter( :eq(  + index +  ) );
                if($item.length != 0){
                    base.setCurrentPage(index);
                    return true;
                };
            };
            return false; // A item wasn t found;
        };

        // Creates the numbered navigation links
        base.buildNavigation = function(){
            base.$nav = $("<div id= thumbNav ></div>").appendTo(base.$el);
            base.$items.each(function(i,el){
                var index = i + 1;
                var $a = $("<a href= # ></a>");

                // If a formatter function is present, use it
                if( typeof(base.options.navigationFormatter) == "function"){
                    $a.html(base.options.navigationFormatter(index, $(this)));
                } else {
                    $a.text(index);
                }
                $a.click(function(e){
                    base.gotoPage(index);

                    if (base.options.hashTags)
                        base.setHash( panel-  + index);

                    e.preventDefault();
                });
                base.$nav.append($a);
            });
            base.$navLinks = base.$nav.find( > a );
        };


        // Creates the Forward/Backward buttons
        base.buildNextBackButtons = function(){
            var $forward = $( <a class="arrow forward">&gt;</a> ),
                $back    = $( <a class="arrow back">&lt;</a> );

            // Bind to the forward and back buttons
            $back.click(function(e){
                base.goBack();
                e.preventDefault();
            });

            $forward.click(function(e){
                base.goForward();
                e.preventDefault();
            });

            // Append elements to page
            base.$wrapper.after($back).after($forward);
        };

        // Creates the Start/Stop button
        base.buildAutoPlay = function(){

            base.$startStop = $("<a href= #  id= start-stop ></a>").html(base.playing ? base.options.stopText :  base.options.startText);
            base.$el.append(base.$startStop);            
            base.$startStop.click(function(e){
                base.startStop(!base.playing);
                e.preventDefault();
            });

            // Use the same setting, but trigger the start;
            base.startStop(base.playing);
        };

        // Handles stopping and playing the slideshow
        // Pass startStop(false) to stop and startStop(true) to play
        base.startStop = function(playing){
            if(playing !== true) playing = false; // Default if not supplied is false

            // Update variable
            base.playing = playing;

            // Toggle playing and text
            base.$startStop.toggleClass("playing", playing).html( playing ? base.options.stopText : base.options.startText );

            if(playing){
                base.clearTimer(); // Just in case this was triggered twice in a row
                base.timer = window.setInterval(function(){
                    base.goForward(true);
                }, base.options.delay);
            } else {
                base.clearTimer();
            };
        };

        base.clearTimer = function(){
            // Clear the timer only if it is set
            if(base.timer) window.clearInterval(base.timer);
        };

        // Taken from AJAXY jquery.history Plugin
        base.setHash = function ( hash ) {
            // Write hash
            if ( typeof window.location.hash !==  undefined  ) {
                if ( window.location.hash !== hash ) {
                    window.location.hash = hash;
                };
            } else if ( location.hash !== hash ) {
                location.hash = hash;
            };

            // Done
            return hash;
        };
        // <-- End AJAXY code


        // Trigger the initialization
        base.init();
    };


    $.anythingSlider.defaults = {
        easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
        autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
        startStopped: false,            // If autoPlay is on, this can force it to start stopped
        delay: 3000,                    // How long between slide transitions in AutoPlay mode
        animationTime: 600,             // How long the slide transition takes
        hashTags: true,                 // Should links change the hashtag in the URL?
        buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
        pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
        startText: "Start",             // Start text
        stopText: "Stop",               // Stop text
        navigationFormatter: null       // Details at the top of the file on this use (advanced use)
    };


    $.fn.anythingSlider = function(options){
        if(typeof(options) == "object"){
            return this.each(function(i){           
                (new $.anythingSlider(this, options));

                // This plugin supports multiple instances, but only one can support hash-tag support
                // This disables hash-tags on all items but the first one
                options.hashTags = false;
            }); 
        } else if (typeof(options) == "number") {

            return this.each(function(i){
                var anySlide = $(this).data( AnythingSlider );
                if(anySlide){
                    anySlide.gotoPage(options);
                }
            });
        }
    };


})(jQuery);

// this function wraps the elements in the neccessary tags to work with anything Slider
$ (document).ready(function() {
    $( a.slide-link )
        .wrap( <li class="slide-list-item"></li> );
    $( li.slide-list-item )
        .wrapAll( <ul id="slide-list"></ul> );
    $( ul#slide-list )
        .wrapAll( <div class="wrapper"></div> );
    $( div.wrapper )
        .wrapAll( <div class="anythingSlider internalSlider"></div> );
    $( .anythingSlider )
        .anythingSlider({
            easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
            autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
            startStopped: false,            // If autoPlay is on, this can force it to start stopped
            delay: 7000,                    // How long between slide transitions in AutoPlay mode
            animationTime: 600,             // How long the slide transition takes
            hashTags: false,                 // Should links change the hashtag in the URL?
            buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
            pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
            startText: "Start",             // Start text
            stopText: "Stop",               // Stop text
            navigationFormatter: null       // Details at the top of the file on this use (advanced use)
        });
    $( a.slide-link ).show();
    });

It s a bit of a hash job but works fine as long as there s more than one <li>

最佳回答

Try this:

// this function wraps the elements in the neccessary tags to work with anything Slider
$ (document).ready(function() {
    $( a.slide-link )
        .wrap( <li class="slide-list-item"></li> );
    $( li.slide-list-item )
        .wrapAll( <ul id="slide-list"></ul> );
    $( ul#slide-list )
        .wrapAll( <div class="wrapper"></div> );
    $( div.wrapper )
        .wrapAll( <div class="anythingSlider internalSlider"></div> );

    if(banners.length > 1){
        autoplayval= true;
    } else {
        autoplayval= false;
    }
    $( .anythingSlider )
        .anythingSlider({
            easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
            autoPlay: autoplayval,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not
            startStopped: false,            // If autoPlay is on, this can force it to start stopped
            delay: 7000,                    // How long between slide transitions in AutoPlay mode
            animationTime: 600,             // How long the slide transition takes
            hashTags: false,                 // Should links change the hashtag in the URL?
            buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
            pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
            startText: "Start",             // Start text
            stopText: "Stop",               // Stop text
            navigationFormatter: null       // Details at the top of the file on this use (advanced use)
        });
    $( a.slide-link ).show();
});
问题回答

Changing this

$( .anythingSlider ).anythingSlider({...});

to this

$( .anythingSlider:has(li:nth-child(2) ).anythingSlider({...});

should do it

This assumes you don t have nested lists.

I had this problem and could only resolve this with a new version of the plugin: v1.5.3
URL: https://github.com/ProLoser/AnythingSlider/downloads

Once you ve got the latest version, only change one line:

base.setCurrentPage(startPanel, false); // added to trigger events for FX code

When I have only one <li> the anythingControls element s style is display=none.

This will only activate the slider if more than 1 <LI> elements are present:

jQuery("#sliderDiv:has(>li:eq(1))").anythingSlider({...})

it assumes your HTML structure is like this:

<div id="sliderDiv">
  <li>Offer 1</li>
  <li>Offer 2</li>
</div>

You ll need something like

if($([ULELEMENT]).children( li ).length > 1){

//Your code

}

Something along those lines. If you post your code, I can give it a try.





相关问题
selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

How to fire event handlers on the link using javascript

I would like to click a link in my page using javascript. I would like to Fire event handlers on the link without navigating. How can this be done? This has to work both in firefox and Internet ...

How to Add script codes before the </body> tag ASP.NET

Heres the problem, In Masterpage, the google analytics code were pasted before the end of body tag. In ASPX page, I need to generate a script (google addItem tracker) using codebehind ClientScript ...

Clipboard access using Javascript - sans Flash?

Is there a reliable way to access the client machine s clipboard using Javascript? I continue to run into permissions issues when attempting to do this. How does Google Docs do this? Do they use ...

javascript debugging question

I have a large javascript which I didn t write but I need to use it and I m slowely going trough it trying to figure out what does it do and how, I m using alert to print out what it does but now I ...

Parsing date like twitter

I ve made a little forum and I want parse the date on newest posts like twitter, you know "posted 40 minutes ago ","posted 1 hour ago"... What s the best way ? Thanx.

热门标签