05:32
Полноэкранное слайдшоу фоновых изображений, с различным переходом изображений и названиями.
Смотрим ДЕМО
Установка:
Первый вариант!
Ставим между head и /head:
Code
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
Ставим влюбое место после body:
Code
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li>
<li><span>Image 02</span><div><h3>qui·e·tude</h3></div></li>
<li><span>Image 03</span><div><h3>bal·ance</h3></div></li>
<li><span>Image 04</span><div><h3>e·qua·nim·i·ty</h3></div></li>
<li><span>Image 05</span><div><h3>com·po·sure</h3></div></li>
<li><span>Image 06</span><div><h3>se·ren·i·ty</h3></div></li>
</ul>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Development/RockingLetters/">
<strong>« Previous Demo: </strong>Rocking Letters with CSS3 & jQuery
</a>
<span class="right">
<a href="http://www.flickr.com/photos/markjsebastian/" target="_blank">Photography by Mark Sebastian</a>
<a href="http://creativecommons.org/licenses/by-sa/2.0/deed.en" target="_blank">CC BY-SA 2.0</a>
<a href="http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1>CSS3 <span>Fullscreen Slideshow</span></h1>
<h2>A CSS-only slideshow for background images</h2>
<p class="codrops-demos">
<a href="#" class="current-demo">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
</p>
</header>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Второй вариант!
Вставляем в head и /head:
Code
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
В любое место после body:
Code
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li>
<li><span>Image 02</span><div><h3>qui·e·tude</h3></div></li>
<li><span>Image 03</span><div><h3>bal·ance</h3></div></li>
<li><span>Image 04</span><div><h3>e·qua·nim·i·ty</h3></div></li>
<li><span>Image 05</span><div><h3>com·po·sure</h3></div></li>
<li><span>Image 06</span><div><h3>se·ren·i·ty</h3></div></li>
</ul>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Development/RockingLetters/">
<strong>« Previous Demo: </strong>Rocking Letters with CSS3 & jQuery
</a>
<span class="right">
<a href="http://www.flickr.com/photos/markjsebastian/" target="_blank">Photography by Mark Sebastian</a>
<a href="http://creativecommons.org/licenses/by-sa/2.0/deed.en" target="_blank">CC BY-SA 2.0</a>
<a href="http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1>CSS3 <span>Fullscreen Slideshow</span></h1>
<h2>A CSS-only slideshow for background images</h2>
<p class="codrops-demos">
<a href="#" class="current-demo">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
</p>
</header>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Третий вариант!
Вставляем скрипт между head и /head:
Code
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style3.css" />
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
В любое место после body:
Code
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li>
<li><span>Image 02</span><div><h3>qui·e·tude</h3></div></li>
<li><span>Image 03</span><div><h3>bal·ance</h3></div></li>
<li><span>Image 04</span><div><h3>e·qua·nim·i·ty</h3></div></li>
<li><span>Image 05</span><div><h3>com·po·sure</h3></div></li>
<li><span>Image 06</span><div><h3>se·ren·i·ty</h3></div></li>
</ul>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Development/RockingLetters/">
<strong>« Previous Demo: </strong>Rocking Letters with CSS3 & jQuery
</a>
<span class="right">
<a href="http://www.flickr.com/photos/markjsebastian/" target="_blank">Photography by Mark Sebastian</a>
<a href="http://creativecommons.org/licenses/by-sa/2.0/deed.en" target="_blank">CC BY-SA 2.0</a>
<a href="http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1>CSS3 <span>Fullscreen Slideshow</span></h1>
<h2>A CSS-only slideshow for background images</h2>
<p class="codrops-demos">
<a href="#" class="current-demo">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
</p>
</header>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Четвертый вариант!
Ставим между head и /head:
Code
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style4.css" />
<script type="text/javascript" src="js/modernizr.custom.86080.js"></script>
В любое место после body:
Code
<ul class="cb-slideshow">
<li><span>Image 01</span><div><h3>re·lax·a·tion</h3></div></li>
<li><span>Image 02</span><div><h3>qui·e·tude</h3></div></li>
<li><span>Image 03</span><div><h3>bal·ance</h3></div></li>
<li><span>Image 04</span><div><h3>e·qua·nim·i·ty</h3></div></li>
<li><span>Image 05</span><div><h3>com·po·sure</h3></div></li>
<li><span>Image 06</span><div><h3>se·ren·i·ty</h3></div></li>
</ul>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top">
<a href="http://tympanus.net/Development/RockingLetters/">
<strong>« Previous Demo: </strong>Rocking Letters with CSS3 & jQuery
</a>
<span class="right">
<a href="http://www.flickr.com/photos/markjsebastian/" target="_blank">Photography by Mark Sebastian</a>
<a href="http://creativecommons.org/licenses/by-sa/2.0/deed.en" target="_blank">CC BY-SA 2.0</a>
<a href="http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/">
<strong>Back to the Codrops Article</strong>
</a>
</span>
<div class="clr"></div>
</div><!--/ Codrops top bar -->
<header>
<h1>CSS3 <span>Fullscreen Slideshow</span></h1>
<h2>A CSS-only slideshow for background images</h2>
<p class="codrops-demos">
<a href="#" class="current-demo">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
<a href="index4.html">Demo 4</a>
</p>
</header>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Из прикрепленного архива заливаем файлы в соответствующие папки css, js, images
style1 - первый вариант
style2 - второй вариант
style3 - третий вариант
style4 - четвертый вариант
