16. Develop a webpage for implementing Slideshow Banner
<!DOCTYPE html>
<html>
<head>
<title>Slideshow Images</title>
<style>
.slider {
width: 500px;
height: 300px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-container {
width: 1500px;
background-color: pink;
height: 300px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slide {
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slide-1:target ~ .image-container {
left: 0px;
}
#slide-2:target ~ .image-container {
left: -500px;
}
#slide-3:target ~ .image-container {
left: -1000px;
}
.buttons {
position: relative;
top: -20px;
}
.buttons a {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="slider">
<span id="slide-1"></span>
<span id="slide-2"></span>
<span id="slide-3"></span>
<div class="image-container">
<img src="/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg" class="slide" width="500" height="300" />
<img src="/uploads/media/default/0001/03/b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg" class="slide" width="500" height="300" />
<img src="/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" class="slide" width="500" height="300" />
</div><div class="buttons">
<a href="#slide-1"></a>
<a href="#slide-2"></a>
<a href="#slide-3"></a>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Slideshow Images</title>
<style>
.slider {
width: 500px;
height: 300px;
background-color: yellow;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
text-align: center;
overflow: hidden;
}
.image-container {
width: 1500px;
background-color: pink;
height: 300px;
clear: both;
position: relative;
-webkit-transition: left 2s;
-moz-transition: left 2s;
-o-transition: left 2s;
transition: left 2s;
}
.slide {
float: left;
margin: 0px;
padding: 0px;
position: relative;
}
#slide-1:target ~ .image-container {
left: 0px;
}
#slide-2:target ~ .image-container {
left: -500px;
}
#slide-3:target ~ .image-container {
left: -1000px;
}
.buttons {
position: relative;
top: -20px;
}
.buttons a {
display: inline-block;
height: 15px;
width: 15px;
border-radius: 50px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div class="slider">
<span id="slide-1"></span>
<span id="slide-2"></span>
<span id="slide-3"></span>
<div class="image-container">
<img src="/uploads/media/default/0001/03/66cf5094908491e69d8187bcf934050a4800b37f.jpeg" class="slide" width="500" height="300" />
<img src="/uploads/media/default/0001/03/b7d624354d5fa22e38b0ab1f9b905fb08ccc6a05.jpeg" class="slide" width="500" height="300" />
<img src="/uploads/media/default/0001/03/5bfad15a7fd24d448a48605baf52655a5bbe5a71.jpeg" class="slide" width="500" height="300" />
</div><div class="buttons">
<a href="#slide-1"></a>
<a href="#slide-2"></a>
<a href="#slide-3"></a>
</div>
</div>
</body>
</html>
Practical Lists with Source Code :
- Writesimple JavaScript with HTML for arithmetic expression evaluation and messageprinting.
- Develop JavaScript to use decision making and looping statements.
- Develop JavaScript to implement Array functionalities.
- DevelopJavaScript to implement functions.
- DevelopJavaScript to implement strings.
- Createa webpage using form elements.
- Createa webpage to implement form event Part-I.
- Createa webpage to implement form event Part-II.
- Developa webpage using Intrinsic Java Function.
- Developa webpage for creating session and persistent cookies observe the effects withBrowser cookie settings.
- Developa webpage for placing the window on the screen and working with child window.
- Developa webpage for validation of form fields using regular expressions.
- Create a webpage with Rollovers Effect.
- Developa webpage for implementing menus.
- Developa webpage for implementing Status bars and Web Page Protection.
- Developa webpage for implementing Slideshow, Banner.