由于某种原因,以下代码在IE中不起作用。我尝试过使用F12 Dev Tools,但看起来没有错误。任何帮助表示赞赏。您也可以参考:http://codepen.io/sanelaxm/pen/cHzdm 这是代码:
/**
* Slimslider v1.1.0
* @author Kyle Foster
* MIT license
*/
;(function ( $, window, document, undefined ) {
$.fn.slimSlider = function ( options ) {
options = $.extend( {}, $.fn.slimSlider.options, options );
return this.each(function () {
// Define our variables
var counter = 0,
element = $(this),
wrapper = element.children('.slides'),
slide = wrapper.children('li'),
slideCnt = slide.length,
navLink2 = element.find('.slide-nav').find('div').find('a'),
navLink = element.find('.slide-nav').find('li').find('a'),
prefix = (/mozilla/.test(navigator.userAgent.toLowerCase()) &&
!/webkit/.test(navigator.userAgent.toLowerCase())) ? '-moz-' :
(/webkit/.test(navigator.userAgent.toLowerCase())) ? '-webkit-' :
(/msie/.test(navigator.userAgent.toLowerCase())) ? '-ms-' :
(/opera/.test(navigator.userAgent.toLowerCase())) ? '-o-' : '';
// Add active class to first nav link
navLink.first().addClass('active');
navLink2.first().addClass('active');
// Auto play function (if selected options)
if ( options.autoPlay === true ) {
// Define slideshow variable
var slideShow;
// Define play function
function play() {
// Don't execute after click function
if ( !wrapper.is('.stopped') ) {
// Slideshow function
slideShow = setTimeout(function() {
// Slideshow iterator
if (counter < slideCnt - 1) { counter++; }
else { counter = 0; };
// Stop browser 'catch up' when switching tabs
wrapper.stop(true,true);
// Fire animation function
animate();
// Loop our slideshow
play();
}, options.autoDelay );
};
};
// Instantiate our play function
play();
// Define our pause function
function pause() { clearTimeout(slideShow); };
// Pause on hover (if selected)
if ( options.hoverPause === true ) {
wrapper.on({
mouseenter: function() { pause(); },
mouseleave: function() { play(); }
});
};
};
// Navigation click function
navLink.on('click', function(e) {
// Stop auto play (if instantiated)
//pause();
// Add a class to keep animation stopped
//wrapper.addClass('stopped');
// Set counter to new slide position
counter = $(this).parent().index();
// Fire animation function
animate();
// Prevent default click action
e.preventDefault();
});
navLink2.on('click', function(e) {
// Stop auto play (if instantiated)
//pause();
// Add a class to keep animation stopped
//wrapper.addClass('stopped');
// Set counter to new slide position
counter = $(this).parent().index();
// Fire animation function
animate();
// Prevent default click action
e.preventDefault();
});
// Define our animation function
function animate() {
// Iterate through our navigation links
navLink.each(function() {
// Cache 'this'
var currentLink = $(this);
// Move to counter's position
if ( counter === currentLink.parent().index() ) {
navLink.removeClass('active'); // Clear 'active' class
currentLink.addClass('active'); // And add to selected link
}
});
// Iterate through our navigation links
navLink2.each(function() {
// Cache 'this'
var currentLink = $(this);
// Move to counter's position
if ( counter === currentLink.parent().index() ) {
navLink2.removeClass('active'); // Clear 'active' class
currentLink.addClass('active'); // And add to selected link
}
});
// Animation
wrapper
.css( prefix + 'transition' , prefix + 'transform ' + options.animSpeed ) // Apply transition
.css( prefix + 'transform' , 'translate(-' + counter * element.width() + 'px, 0)' ) // Animate
.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function() {
wrapper.css( prefix + 'transition' , 'none' ); // Kill transition once animation completes
});
};
// Define debulked onresize handler
function on_resize(c, t) { onresize = function() { clearTimeout(t); t = setTimeout(c, 100) }; return c };
// Instantiate resize function
on_resize(function() {
// Cache our slider width
var newWidth = element.width();
// Set wrapper width & reposition
wrapper
.css({ 'width' : newWidth * slideCnt })
.css( prefix + 'transform' , 'translate(-' + counter * newWidth + 'px, 0)' );
// Set slide width
slide.css({ 'width' : newWidth });
})
();
});
};
// Overridable default options
$.fn.slimSlider.options = {
animSpeed : '0', // animation speed
autoPlay : false, // auto play option
autoDelay : 4000, // auto play duration
hoverPause : true // auto play pause on hover
};
})( jQuery, window, document );
// Instantiate Slimslider
$('.slider').slimSlider();