Thursday, 25 August 2016
Making Slide only JavaScript and Html no JQuery
How we make a design Slide without JQuery use button to show next image.
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" css.css/>
<title>Slide show </title>
// This is the JavaScript which is used for slide images
<script type="text/javascript">
var counter = 1
function changeIt() {
// Where you see blue color coding here you can use their own images names and it's path
here i use images directly without folder . If you use folder for images then type like this
"folder Name/Image.extension"
if (counter == 1) {
document.searchImage.src = "img42.jpg"
counter = 2
}
else if (counter == 2) {
document.searchImage.src = "img38.jpg"
counter = 3
}
else if (counter == 3) {
document.searchImage.src = "img39.jpg"
counter = 4
}
else if (counter == 4) {
document.searchImage.src = "img40.jpg"
counter = 5
}
else if (counter == 5) {
document.searchImage.src = "img41.jpg"
counter = 6
}
else {
document.searchImage.src = "img42.jpg"
counter = 1
}
}
</script>
</head>
<body>
<br><br><br>
<center>
<img src="img41.jpg" name="searchImage"><p>
<form>
<input type="button" value="Change Image" onClick="changeIt()">
</form>
</center>
</body>
</html>
So this is the way which we design the slide without jquery.
Subscribe to:
Post Comments
(
Atom
)
Real Translator Jobs - New Top Offer! - $100 Bonus To New Affiliates! (view mobile)
No comments :
Post a Comment