How to make slide show using jquery?
styles
<style>
body {
font-family:arial;
}
ul#nav {
list-style-type:none;
margin:10px 0 10px;
padding:0;
}
ul#nav li {
float:left;
width:30px;
}
ul#nav li a {
text-decoration:none;
background:#05609A;
color:#fff;
padding:5px;
}
ul#nav li a.active {
background:#B4F114;
}
.slide-image {
width:400px;
height:300px;
border:2px solid #05609A;
overflow:hidden;
}
.slide-image img{
}
Head
You can find jquery.innerfade.js in google.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.innerfade.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var slideArray = ["ansel_adams1.jpg", "ansel_adams2.jpg", "ansel_adams3.jpg", "ansel_adams4.jpg", "ansel_adams5.jpg"];
var imgDir = 'images/ansel_adams';
$('.container').append('<div class="slide-image"></div>');
$('.slide-image').after('<ul id="nav"></ul>');
var slideLength = slideArray.length;
for(i=0; i < slideLength; i++){
var slideText = i + 1;
$('#nav').append('<li><a href="#" rel="'+slideText+'">'+slideText+'</a></li>');
$('.slide-image').append('<img src="'+imgDir + slideText+'.jpg"/>');
}
$('#nav li a').bind('click', function(){
var numSlide = $(this).attr('rel');
$('.slide-image').html('<img src="'+imgDir + numSlide+'.jpg"/>');
});
$('.slide-image').innerfade({ speed: 'slow', timeout: 4000, type: 'sequence', containerheight: '220px' });
});
</script>
</head>
<body>
<div class="container">
<h1>jQuery Images gallery by Ikhlaque.</h1>
</div>
</body>
<style>
body {
font-family:arial;
}
ul#nav {
list-style-type:none;
margin:10px 0 10px;
padding:0;
}
ul#nav li {
float:left;
width:30px;
}
ul#nav li a {
text-decoration:none;
background:#05609A;
color:#fff;
padding:5px;
}
ul#nav li a.active {
background:#B4F114;
}
.slide-image {
width:400px;
height:300px;
border:2px solid #05609A;
overflow:hidden;
}
.slide-image img{
}
Head
You can find jquery.innerfade.js in google.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.innerfade.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var slideArray = ["ansel_adams1.jpg", "ansel_adams2.jpg", "ansel_adams3.jpg", "ansel_adams4.jpg", "ansel_adams5.jpg"];
var imgDir = 'images/ansel_adams';
$('.container').append('<div class="slide-image"></div>');
$('.slide-image').after('<ul id="nav"></ul>');
var slideLength = slideArray.length;
for(i=0; i < slideLength; i++){
var slideText = i + 1;
$('#nav').append('<li><a href="#" rel="'+slideText+'">'+slideText+'</a></li>');
$('.slide-image').append('<img src="'+imgDir + slideText+'.jpg"/>');
}
$('#nav li a').bind('click', function(){
var numSlide = $(this).attr('rel');
$('.slide-image').html('<img src="'+imgDir + numSlide+'.jpg"/>');
});
$('.slide-image').innerfade({ speed: 'slow', timeout: 4000, type: 'sequence', containerheight: '220px' });
});
</script>
</head>
<body>
<div class="container">
<h1>jQuery Images gallery by Ikhlaque.</h1>
</div>
</body>
