I want to make an image slide show.
Enter your jQuery question at the top of this page and click Get An Answer.
Tell us how quickly you want your jQuery question answered.
Connect with your programmer via online chat or telephone call.
I want to make an image slide show.
There are a lot of image slide show jquery plugins, One of the most famous is jquery cycle (http://jquery.malsup.com/cycle/). its very simple to use.
at first add 2 library (jquery & jquery.cycle) at your html header. Than add an script like this
$('.your class/#your id').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
and then add a div with your class or id names and inside the div, add some images.
here is a demo code:
<!doctype html>
<html>
<head>
<title>JQuery Cycle Plugin - Example Slideshow</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>
<!-- initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
});
</script>
</head>
<body>
<div class="slideshow">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
</div>
</body>
</html>
thank you.
Byron Narciso
Programmer
Whether you have a quick question while preparing your taxes, troubleshooting a computer problem, or need to hire an attorney, ExpertHelp is the most convenient and affordable way to connect with the right service professional to get the job done.
ExpertHelp has been in business since 2011, is an A+ Rated Better Business Bureau accredited member, and offers a 100% satisfaction guarantee on every question you ask!