<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom Slider demo</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="slides">
<ul>
<li><img src="image-1.jpg" alt="" /></li>
<li><img src="image-2.jpg" alt="" /></li>
<li><img src="image-3.jpg" alt="" /></li>
<li><img src="image-4.jpg" alt="" /></li>
<li><img src="image-5.jpg" alt="" /></li>
</ul>
</div>
<script>
jQuery(document).ready(function(){
jQuery(".slides ul > li:gt(0)").hide();
setInterval(function() {
jQuery('.slides ul > li:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slides ul');
}, 3000);
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Custom Slider demo</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="slides">
<ul>
<li><img src="image-1.jpg" alt="" /></li>
<li><img src="image-2.jpg" alt="" /></li>
<li><img src="image-3.jpg" alt="" /></li>
<li><img src="image-4.jpg" alt="" /></li>
<li><img src="image-5.jpg" alt="" /></li>
</ul>
</div>
<script>
jQuery(document).ready(function(){
jQuery(".slides ul > li:gt(0)").hide();
setInterval(function() {
jQuery('.slides ul > li:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('.slides ul');
}, 3000);
});
</script>
</body>
</html>
No comments:
Post a Comment