A really nice jQuery slideshow type plugin is this http://www.devtrix.net/sliderman/ It has many different transitions between slides, and is really easy to use.
There are many out there, so a quick google search of "jQuery Slideshow" will produce hundreds of results.
$(document).ready(function () {
var currentPosition = 0;
var slideWidth = 650;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;
//Assign a timer, so it will run periodically
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>');
slides.css({ 'float': 'left' });
//set #slidesHolder width equal to the total width of all the slides
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
$('#slideShowWindow')
.prepend('<span class="slideNav" id="leftNav">Move Left</span>')
.append('<span class="slideNav" id="rightNav">Move Right</span>');
manageNav(currentPosition);
//tell the buttons what to do when clicked
$('.slideNav').bind('click', function () {
//determine new position
currentPosition = ($(this).attr('id') === 'rightNav')
? currentPosition + 1 : currentPosition - 1;
//hide/show controls
manageNav(currentPosition);
clearInterval(slideShowInterval);
slideShowInterval = setInterval(changePosition, speed);
moveSlide();
});
function manageNav(position) {
//hide left arrow if position is first slide
if (position === 0) {
$('#leftNav').hide();
}
else {
$('#leftNav').show();
}
//hide right arrow is slide position is last slide
if (position === numberOfSlides - 1) {
$('#rightNav').hide();
}
else {
$('#rightNav').show();
}
}
//changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
function changePosition() {
if (currentPosition === numberOfSlides - 1) {
currentPosition = 0;
manageNav(currentPosition);
} else {
currentPosition++;
manageNav(currentPosition);
}
moveSlide();
}
//moveSlide: this function moves the slide
function moveSlide() {
$('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
}
});
I know this is an old post but I though I would share my tutorial, for the benefit of anyone who comes across this question in future.
As you can see there isn’t anything exciting or complicated about this CSS. In fact it doesn’t get more basic, but I promise that’s all that’s needed.
Next we will create the jQuery:
$(document).ready(function () {
var currentPosition = 0;
var slideWidth = 650;
var slides = $('.slide');
var numberOfSlides = slides.length;
var slideShowInterval;
var speed = 3000;
//Assign a timer, so it will run periodically
slideShowInterval = setInterval(changePosition, speed);
slides.wrapAll('<div id="slidesHolder"></div>');
slides.css({ 'float': 'left' });
//set #slidesHolder width equal to the total width of all the slides
$('#slidesHolder').css('width', slideWidth * numberOfSlides);
$('#slideShowWindow')
.prepend('<span class="slideNav" id="leftNav">Move Left</span>')
.append('<span class="slideNav" id="rightNav">Move Right</span>');
manageNav(currentPosition);
//tell the buttons what to do when clicked
$('.slideNav').bind('click', function () {
//determine new position
currentPosition = ($(this).attr('id') === 'rightNav')
? currentPosition + 1 : currentPosition - 1;
//hide/show controls
manageNav(currentPosition);
clearInterval(slideShowInterval);
slideShowInterval = setInterval(changePosition, speed);
moveSlide();
});
function manageNav(position) {
//hide left arrow if position is first slide
if (position === 0) {
$('#leftNav').hide();
}
else {
$('#leftNav').show();
}
//hide right arrow is slide position is last slide
if (position === numberOfSlides - 1) {
$('#rightNav').hide();
}
else {
$('#rightNav').show();
}
}
//changePosition: this is called when the slide is moved by the timer and NOT when the next or previous buttons are clicked
function changePosition() {
if (currentPosition === numberOfSlides - 1) {
currentPosition = 0;
manageNav(currentPosition);
} else {
currentPosition++;
manageNav(currentPosition);
}
moveSlide();
}
//moveSlide: this function moves the slide
function moveSlide() {
$('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
}
});
发布评论
评论（5）
一个非常好的 jQuery 幻灯片类型插件是这个 http://www.devtrix.net/sliderman/
它在幻灯片之间有许多不同的过渡，并且非常易于使用。
那里有很多，所以快速谷歌搜索“jQuery Slideshow”将产生数百个结果。
A really nice jQuery slideshow type plugin is this http://www.devtrix.net/sliderman/
It has many different transitions between slides, and is really easy to use.
There are many out there, so a quick google search of "jQuery Slideshow" will produce hundreds of results.
只需谷歌搜索 javascript 内容滑块
这里有 350 个图像和内容滑块：
http://www.jqueryrain .com/example/jquery-slider-slideshow/
这里还有 25 个：
http://vandelaydesign.com/blog/web-development/jquery-image-galleries/ 。
Just google for javascript content sliders
Here's 350 image and content sliders:
http://www.jqueryrain.com/example/jquery-slider-slideshow/
and here's 25 more:
http://vandelaydesign.com/blog/web-development/jquery-image-galleries/.
有数千个例子，其中一些非常复杂和复杂。相反，困难的是找到一种对初学者来说容易理解的方法。
经过一番研究，我从 css-tricks< /strong>。 （也使用jquery）。
There are thousands of examples, some very complex and sophisticated. The difficoult, rather, is to find one easy to understand for beginners.
After some research I've found this from css-tricks. (Uses jquery also).
我知道这是一篇旧帖子，但我想分享我的教程，以造福于将来遇到这个问题的任何人。
简单幻灯片
希望这对某人有帮助。
这是一个非常简单和基本的幻灯片，很容易构建/实现。
以防万一链接无效，这里是代码：
第一阶段是设置 html，如下所示：
接下来我们将编写 CSS，如下所示：
正如您所看到的，此 CSS 没有任何令人兴奋或复杂的内容。
事实上，它并没有变得更基础，但我保证这就是所需要的。
接下来我们将创建 jQuery：
I know this is an old post but I though I would share my tutorial, for the benefit of anyone who comes across this question in future.
Simple Slideshow
Hope this helps somebody.
Its a pretty simple and basic slideshow that is easy to build / implement.
Just In case the link becomes invalid here is the code:
The first stage is to set up the html as follows:
Next we will write the CSS, which is as follows:
As you can see there isn’t anything exciting or complicated about this CSS.
In fact it doesn’t get more basic, but I promise that’s all that’s needed.
Next we will create the jQuery:
这是一个非常简单的代码，只需使用简单的 JavaScript 和 HTML 代码即可创建简单的 JavaScript/HTML 幻灯片：
Here is a Very simple code to create simple JavaScript/HTML slideshow only by using simple JavaScript and HTML codes :