File "slide_show01.php"

Full Path: /home/analogde/www/Bookmarks/CHESS_ON/slide_show01.php
File size: 2.47 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>Infinite Slideshow with jQuery</title>

	<style type="text/css">
	body {
		color: #777;
	}
	h1, h2, a {
		display: block;
		margin: 1.5em 0;
		letter-spacing: 0.025em;
		word-spacing: 0.1em;
		font-family: "Segoe WP", "Segoe UI", Helvetica, Arial, sans-serif;
		font-weight: normal;
		color: #888;
		text-align:center;
	}
	h1 { margin-bottom:0; }
	h2 {margin-top: 0; }
	h3 { 
		max-width: 605px;
		margin: 0 auto;
	}

	pre { 
		max-width: 605px;
		padding: 10px;
		margin: 0.6em auto 3em;
		border: 3px solid #f2f2f2;
		background: #fff;
		overflow: auto;
		line-height: 1.4em;
	}
	code {
		font-family: "Consolas", "Courier", "Courier New", monospace;
	}

	/* slideshow styles */
	.slideshow {  
       width: 350px;  
       height: 200px;  
       margin: 3em auto;
       overflow: hidden;
       border: 3px solid #f2f2f2;
    }  
    .slideshow ul {  
       width: 400%;  
       height: 200px;
       padding:0; margin:0;
       list-style:none;
    }  
    .slideshow li { float: left; }

    .ad {
		margin-top: 5em;
		padding: 10px;
		height: 125px;
		text-align: center;
	}
	.ad ins {
		margin: 0 2em;
	}	
	</style>
</head>
<body>
	<h1>Infinite Slideshow</h1>
	<h2>with jQuery</h2>
	<div class="slideshow">  
    	<ul>
    		<li><img src="diaporama/img/galerie/transistor.jpg" alt="jQuery" width="350" height="200" /></li>
    		<li><img src="img2.jpg" alt="Infinite Slideshow" width="350" height="200" /></li>
    		<li><img src="img3.jpg" alt="only 4 lines of code" width="350" height="200" /></li>
    		<li><img src="img4.jpg" alt="www.creativejuiz.fr" width="350" height="200" /></li>
    	</ul>  
	</div>
<!--
	<h3>jQuery part of code</h3>
	<pre><code>$(function(){
   setInterval(function(){
      $(".slideshow ul").animate({marginLeft:-350},800,function(){
         $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
      })
   }, 3500);
});</code></pre>
-->
	<p><a href="http://www.creativejuiz.fr/blog/tutoriels/infinite-slideshow-quelques-lignes-jquery" hreflang="fr">Back to the tutorial</a></p>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(function(){
			setInterval(function(){
				$(".slideshow ul").animate({marginLeft:-350},800,function(){
					$(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
				})
			}, 3500);
		});
	</script>








	<!-- 
	
	
	
</body>
</html>