Using JQuery to change images with mouse click

Question

I am trying to make a image slideshow. I have no experience with Jquery and I need some help. So basically I have an image in a div#slideshow. I want to put multiple images in there and with the power of Jquery, when a user clicks the left/right button it will change to the next image. Here is my code for the HTML Part -

<!DOCTYPE html>
<html lang="en">
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
body {
background: url(bg.png);
width: 999px;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
p {
color: #222;
}
a {
color: #777;
font-size: 14px;
font-weight: bold;
text-decoration: none;
padding: 10px;
}
#nav {
float: right;
}
#slideshow {
width: 999px;
margin: 100px -50px;
}
#content {
background: #FFF;
padding: 50px;
height: 500px;
border-radius: 1px;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="content">
<div id="nav">
<a href="..">Home</a>
<a href="..">About</a>
<a href="..">Work</a>
<a href="..">Contact</a>
</div>
<div id="slideshow">
<img src="image.jpg" />
</div>
</div>
</body>
</html>

What about you use some existing jQuery plugins, like: slidesjs.com — Daniel Cheng
– Daniel Cheng, Commented Sep 30, 2012 at 15:13
Yes I would but I would also like to make my own so then I can learn new skills — Jack
– Jack, Commented Sep 30, 2012 at 15:18

mbinette · Accepted Answer · 2012-09-30 15:13:21Z

2

Look into the SlidesJS plugin for jQuery. Here is the example page: http://www.slidesjs.com/#examples

There are a lot more plugins that do this (ResponsiveSlides for example), but this one is pretty simple and you should be able to figure it out.

answered Sep 30, 2012 at 15:13

mbinette

5,0923 gold badges27 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using JQuery to change images with mouse click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related