我正在构建一个简单的jQuery幻灯片，我正在为我的网站使用它。
我在这里找到了代码（并进行了一些调整）：http://www.barrelny.com/blog/building-a-jquery-slideshow-plugin-from-scratch/（我唯一的要求是代码必须从头开始构建，重量轻，使用CSS3 Transitions并每隔五秒钟自动滑动。）< / p>
问题是，我的代码甚至无法发生任何事情。无论如何，在这里。
(function($){
function prefix(el){
var prefixes = ["webkit", "moz", "o", "ms"];
for (var i = 0; i < prefixes.length; i++){
if (prefixes[i] + "transition" in el.style){
return '-'+prefixes[i].toLowerCase()+'-';
};
};
return "transition" in el.style ? "" : false;
};
s var methods = {
init: function(settings){
return this.each(function(){
var config = {
slideDur: 7000,
fadeDur: 800
};
if(settings){
$.extend(config, settings);
};
this.config = config;
var $container = $(this),
slideSelector = 'article',
fading = false,
slideTimer,
activeSlide,
newSlide,
$slides = $container.find(slideSelector),
totalSlides = $slides.length,
$pagerList = $container.find('#control');
prefix = prefix($container[0]);
function waitForNext(){
slideTimer = setTimeout(function(){
changeSlides('next');
},config.slideDur);
};
function animateSlides(activeNdx, newNdx){
function cleanUp(){
$slides.eq(activeNdx).removeAttr('style');
activeSlide = newNdx;
fading = false;
waitForNext();
};
if(fading || activeNdx == newNdx){
return false;
};
fading = true;
$pagers.removeClass('active').eq(newSlide).addClass('active');
$slides.eq(activeNdx).css('z-index', 3);
$slides.eq(newNdx).css({
'z-index': 2,
'opacity': 1
});
var styles = {};
styles[prefix+'transition'] = 'opacity '+config.fadeDur+'ms';
styles['opacity'] = 0;
$slides.eq(activeNdx).css(styles);
var fadeTimer = setTimeout(function(){
cleanUp();
},config.fadeDur);
};
function changeSlides(target){
if(target == 'next'){
newSlide = activeSlide + 1;
if(newSlide > totalSlides - 1){
newSlide = 0;
}
} else if(target == 'prev'){
newSlide = activeSlide - 1;
if(newSlide < 0){
newSlide = totalSlides - 1;
};
} else {
newSlide = target;
};
animateSlides(activeSlide, newSlide);
};
for(var i = 0; i < totalSlides; i++){
$pagerList
.append('<nav id="control" data-target="'+i+'">'+i+'</nav>');
};
$container.find('#control').bind('click',function(){
var target = $(this).attr('data-target');
clearTimeout(slideTimer);
changeSlides(target);
});
var $pagers = $pagerList.find('#control');
$slides.eq(0).css('opacity', 1);
activeSlide = 0;
slideTimer = setTimeout(function(){
changeSlides('next');
},config.slideDur);
});
}
};
$.fn.easyFader = function(settings){
return methods.init.apply(this, arguments);
};
})(jQuery);
这是小提琴：http://jsfiddle.net/b7PLz/
我真的希望有人可以帮助我 - 任何帮助都会受到赞赏。感谢
答案 0 :(得分：1)
我已更新您的jsfiddle，现在效果非常好。你的问题，除了代码中的拼写错误（'var方法'之前有一个's'），你在DOMready事件处理程序中执行插件函数并在body标记的末尾调用它是你的问题幻灯片垂直排列在幻灯片放映容器内。由于幻灯片放映容器具有特定高度并且隐藏了溢出，因此它们是不可见的。我改变了这一点，将文章设置为绝对位置，以便文章现在一个接一个。此外，没有位置绝对或相对z指数不起作用。
#slideshow article {
height: 345px;
width: 700px;
position: absolute;
top: 0px;
left: 0px;
}
答案 1 :(得分：1)
我打开第二个答案来发布新代码。
我已更新jsfiddle，现在转换是幻灯片，代码更简单：
(function($){
function prefix(el){
var prefixes = ["webkit", "moz", "o", "ms"];
for (var i = 0; i < prefixes.length; i++){
if (prefixes[i] + "transition" in el.style){
return '-'+prefixes[i].toLowerCase()+'-';
};
};
return "transition" in el.style ? "" : false;
};
var methods = {
init: function(settings){
return this.each(function(){
var config = {
slideDur: 7000,
fadeDur: 800
};
if(settings){
$.extend(config, settings);
};
this.config = config;
var $container = $(this),
slideSelector = 'article',
slideTimer,
activeSlide,
$slides = $container.find(slideSelector),
$carousel = $slides.parent();
totalSlides = $slides.length;
$carousel.css('width', (totalSlides * 100) + '%');
$pagerList = $container.find('#control');
prefix = prefix($container[0]);
function waitForNext(){
slideTimer = setTimeout(function(){
changeSlides('next');
},config.slideDur);
};
function animateSlides(){
$pagers.removeClass('active').eq(newSlide).addClass('active');
var $slide = $slides.eq(newSlide);
var offset = $slide.position().left;
console.log(offset);
var styles = {};
styles[prefix+'transition-duration'] = config.fadeDur+'ms';
styles[prefix+'transform'] = 'translate3d(-'+offset+'px, 0px, 0px)';
console.log(styles);
$carousel.css(styles);
waitForNext();
};
function changeSlides(target){
if(target == 'next'){
newSlide = activeSlide + 1;
if(newSlide >= totalSlides){
newSlide = 0;
}
} else if(target == 'prev'){
newSlide = activeSlide - 1;
if(newSlide < 0){
newSlide = totalSlides - 1;
};
} else {
newSlide = Math.max(0, Math.min(target, totalSlides - 1));
};
activeSlide = newSlide;
animateSlides();
};
for(var i = 0; i < totalSlides; i++){
$pagerList
.append('<nav id="control" data-target="'+i+'">'+i+'</nav>');
};
$container.find('#control').bind('click',function(){
var target = $(this).attr('data-target');
clearTimeout(slideTimer);
changeSlides(target);
});
var $pagers = $pagerList.find('#control');
activeSlide = 0;
slideTimer = setTimeout(function(){
changeSlides('next');
},config.slideDur);
});
}
};
$.fn.easyFader = function(settings){
return methods.init.apply(this, arguments);
};
console.log('here');
}）（jQuery的）;
你必须将文章包装在id为'carousel'的另一个div中。
现在，当幻灯片显示到达最后一张幻灯片时，它会回到开头。如果你想总是从右向左前进，然后从左向右回来，它会变得有点复杂。您可以尝试bxSlider，这已经允许您执行此操作，还有更多选项。