<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slides, A Slideshow Plugin for jQuery</title>
<style type="text/css" media="screen">
/*
Load CSS before JavaScript
*/
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
#slides .slides_container {
width:570px;
height:170px;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
#slides .slides_container div {
width:570px;
height:170px;
display:block;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
#slides_two .slides_container {
width:250px;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
#slides_two .slides_container div {
width:250px;
height:250px;
display:block;
}
/*
Slides container
Important:
Set the width of your slides container
Set to display none, prevents content flash
*/
#slides_three .slides_container {
width:200px;
display:none;
}
/*
Each slide
Important:
Set the width of your slides
If height not specified height will be set by the slide content
Set to display block
*/
#slides_three .slides_container div {
width:200px;
height:100px;
display:block;
}
/*
Example only
*/
.pagination .current a {
color:red;
}
hr {
background:#efefef;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$('#slides').slides({
generateNextPrev: true,
play: 2500
});
$('#slides_two').slides({
generateNextPrev: true,
play: 4500
});
$('#slides_three').slides({
generateNextPrev: true,
play: 6500,
autoHeight: true
});
/*
You could also combin them all
But you can't customize each this way
$('#slides,#slides_two,#slides_three').slides({
preload: true,
generateNextPrev: true
});
*/
/*
Or use a class for all three
If all three had class="slides"
Same here can't customize each this way
$('.slides').slides({
preload: true,
generateNextPrev: true
});
*/
});
</script>
</head>
<body>
<div id="slides">
<div class="slides_container">
<div>
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<hr>
<div id="slides_two">
<div class="slides_container">
<div>
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<hr>
<div id="slides_three">
<div class="slides_container">
<div>
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div>
<h1>Slide 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</body>
</html>
jquery图片滑动效果图片切换
5星 · 超过95%的资源 需积分: 10 138 浏览量
2011-09-01
07:24:15
上传
评论
收藏 1.81MB ZIP 举报 
jquery图片滑动效果slides.zip （79个子文件） 
Slides examples Standard css 
global.css 3KB img 
slide-5.jpg 27KB
pagination.png 724B background.png 12KB slide-1.jpg 48KB slide-4.jpg 79KB example-frame.png 33KB new-ribbon.png 9KB slide.jpg 49KB slide-3.jpg 43KB slide-6.jpg 24KB
loading.gif 7KB arrow-prev.png 2KB slide-2.jpg 28KB slide-7.jpg 24KB arrow-next.png 2KB js slides.min.jquery.js 7KB
index.html 3KB images-with-captions css global.css 3KB img slide-5.jpg 27KB pagination.png 724B background.png 12KB slide-1.jpg 48KB slide-4.jpg 79KB example-frame.png 33KB new-ribbon.png 9KB slide.jpg 49KB slide-3.jpg 43KB slide-6.jpg 24KB loading.gif 7KB arrow-prev.png 2KB slide-2.jpg 28KB slide-7.jpg 24KB arrow-next.png 2KB js slides.min.jquery.js 7KB index.html 5KB Product css global.css 3KB img 1144953-5-2x.jpg 96KB background.png 12KB 1144953-1-2x.jpg 97KB 1144953-p-2x.jpg 145KB 1144953-4-2x.jpg 37KB loading.gif 7KB arrow-prev.png 637B 1144953-2-2x.jpg 93KB 1144953-3-2x.jpg 101KB .DS_Store 6KB arrow-next.png 649B 1144953-6-2x.jpg 41KB js slides.min.jquery.js 7KB index.html 3KB .DS_Store 15KB Linking css global.css 3KB img slide-5.jpg 27KB pagination.png 724B background.png 12KB slide-1.jpg 48KB slide-4.jpg 79KB example-frame.png 33KB new-ribbon.png 9KB slide.jpg 49KB slide-3.jpg 43KB slide-6.jpg 24KB loading.gif 7KB arrow-prev.png 2KB slide-2.jpg 28KB slide-7.jpg 24KB arrow-next.png 2KB js slides.min.jquery.js 7KB index.html 6KB Simple js slides.min.jquery.js 7KB index.html 2KB Carousel js slides.min.jquery.js 7KB index.html 2KB multiple js slides.min.jquery.js 7KB index.html 7KB source slides.jquery.js 18KB slides.min.jquery.js 7KB README.textile 4KB
- 1
- 2
前往页