html5背景图片幻灯片切换,jquery背景图片幻灯片-优快云博客

这段代码展示了如何使用JavaScript实现幻灯片切换功能。通过点击上一张、下一张按钮或自动播放来控制幻灯片的展示，同时包含了图片的加载、显示以及过渡效果的处理。代码中还涉及到背景图片的设置和动画的停止与启动操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

if(i == 0) {

var style = 'background:url(./icon.png) -55px -19px no-repeat;';

}else {

var style = '';

}

$("

").insertBefore("#next");

}

slides.init();

slides.startAnimation();

// 初始化添加按钮事件以

init : function() {

$( "#" + slides.conf.prevId ).click(function() {

slides.stopAnimation();

slides.prev();

});

$( "#" + slides.conf.nextId ).click(function() {

slides.stopAnimation();

slides.next();

});

$("." + slides.conf.controlClass).bind('click',function(){

slides.stopAnimation();

slides.control($(this).attr('data'));

});

$("." + slides.conf.controlClass).bind('mousemove',function(){

$(this).css('backgrund-position','-55px -19px');

});

// 上一张幻灯片

prev : function() {

slides.control("prev");

// 下一张幻灯片

next : function() {

slides.control("next");

// 显示当前选择的幻灯片

current : function(num) {

slides.control(num);

// 幻灯片显示控制器

control : function(direction) {

// 选择要显示的图片

if(direction == "next") {

slides.conf.currentImg++;

slides.conf.currentImg = slides.searchImg( slides.conf.currentImg , slides.urls.length );

}else if(direction == 'prev') {

slides.conf.currentImg--;

slides.conf.currentImg = slides.searchImg( slides.conf.currentImg , slides.urls.length);

}else {

slides.conf.currentImg = direction;

}

// Check which container we need to use

var currentContainer = slides.conf.activeContainer;

if(slides.conf.activeContainer == 1) {

slides.conf.activeContainer = 2;

} else {

slides.conf.activeContainer = 1;

}

// 当前图片指针位置高亮

$("#headernav ." + slides.conf.controlClass).css('background', 'url(./icon.png) -55px -0px no-repeat');

$($("#headernav ." + slides.conf.controlClass).get(slides.conf.currentImg)).css('background', 'url(./icon.png) -55px -19px no-repeat');

// 切换图片

slides.showImage(slides.urls[slides.conf.currentImg], currentContainer, slides.conf.activeContainer);

// 背景图显示

showImage : function(photoObject, currentContainer, activeContainer) {

slides.conf.animating = true;

// 使容器的显示层级总是最低的

slides.conf.currentZindex--;

// 替换需要展示的容器图片

$("#" + slides.conf.htmlBgIdPrefix + slides.conf.activeContainer).css({

"background-image" : "url(" + photoObject + ")",

"display" : "block",

"z-index" : slides.conf.currentZindex

});

// 使上一个显示图片的容器慢慢消失

$("#" + slides.conf.htmlBgIdPrefix + currentContainer).fadeOut();

// 搜索应该显示的北京图片

searchImg : function( current , total ) {

if(current == total) {

current = 0;

}else if(current == -1) {

current = total-1;

}

return current;

// 停止动画

stopAnimation : function() {

// Clear the interval

clearInterval(slides.conf.interval);

slides.conf.animating = false;

// 开始动画

startAnimation : function() {

slides.conf.animating = true;

slides.conf.interval = setInterval(function() {

slides.control("next");

}, slides.conf.slideshowSpeed);

}

slides.start();

《script》