Image Slider | Image Gallery | Fadein Fadeout Slider |Jquery Slideshow|Next Button | Previous Button
<!-- Note: just find and Replace < with Lesser than sign and > with Greater than Sign -->
<html>
<head>
<title>Images fade2</title>
<style>
.main
{
width:700px;
height:350px;
}
.main img
{
width:700px;
height:350px;
position: absolute;
display: none;
}
.next
{
position: absolute;
top:30%;
left:53%;
background-color: yellow;
display: none;
}
.prev
{
position: absolute;
top:30%;
left:2%;
background-color: yellow;
display: none;
}
</style>
<script src="jquery.js"></script>
<script>
var i=1;
var n=1;
var p=1;
$
(
function()
{
$('.img1').css('display','block');
$('.next').css('display','block');
$('.prev').css('display','block');
setInterval('show()',20000);
$('.next').click(function(){
$('.img'+n).fadeOut();
n=n+1;
if(n==5)
{
n=1;
}
$('.img'+n).fadeIn();
})
$('.prev').click(function(){
$('.img'+p).fadeOut();
p=p-1;
if(p==0)
{
p=4;
}
$('.img'+p).fadeIn();
})
})
function show()
{
$('.img'+i).fadeOut();
i=i+1;
if(i==5)
{
i=1;
}
$('.img'+i).fadeIn();
}
</script>
</head>
<body>
<div class="main">
<img class="img1" src="flower.jpeg"/>
<img class="img2" src="flower2.jpeg"/>
<img class="img3" src="flower3.jpeg"/>
<img class="img4" src="flower4.jpeg"/>
<input class="next" type="button" value=">"></input>
<input class="prev" type="button" value="<"></input>
</div>
</body>
</html>
Видео Image Slider | Image Gallery | Fadein Fadeout Slider |Jquery Slideshow|Next Button | Previous Button канала Eagles Education
<html>
<head>
<title>Images fade2</title>
<style>
.main
{
width:700px;
height:350px;
}
.main img
{
width:700px;
height:350px;
position: absolute;
display: none;
}
.next
{
position: absolute;
top:30%;
left:53%;
background-color: yellow;
display: none;
}
.prev
{
position: absolute;
top:30%;
left:2%;
background-color: yellow;
display: none;
}
</style>
<script src="jquery.js"></script>
<script>
var i=1;
var n=1;
var p=1;
$
(
function()
{
$('.img1').css('display','block');
$('.next').css('display','block');
$('.prev').css('display','block');
setInterval('show()',20000);
$('.next').click(function(){
$('.img'+n).fadeOut();
n=n+1;
if(n==5)
{
n=1;
}
$('.img'+n).fadeIn();
})
$('.prev').click(function(){
$('.img'+p).fadeOut();
p=p-1;
if(p==0)
{
p=4;
}
$('.img'+p).fadeIn();
})
})
function show()
{
$('.img'+i).fadeOut();
i=i+1;
if(i==5)
{
i=1;
}
$('.img'+i).fadeIn();
}
</script>
</head>
<body>
<div class="main">
<img class="img1" src="flower.jpeg"/>
<img class="img2" src="flower2.jpeg"/>
<img class="img3" src="flower3.jpeg"/>
<img class="img4" src="flower4.jpeg"/>
<input class="next" type="button" value=">"></input>
<input class="prev" type="button" value="<"></input>
</div>
</body>
</html>
Видео Image Slider | Image Gallery | Fadein Fadeout Slider |Jquery Slideshow|Next Button | Previous Button канала Eagles Education
Комментарии отсутствуют
Информация о видео
27 ноября 2020 г. 23:49:56
00:04:32
Другие видео канала
how to use SIZEOF operator in C Language Tutorial | #Shorts
Class 5 | Javascript Tutorial | Learn Javascript Basics | Niklix Tutorial | Learn Javascript Basics
Class 14 | Swapping of Two Numbers in C Language | #cprogramming #cprogrammingvideo
ADD operator in C programming | ADD AND condition | #Shorts
Image Slider | Image Gallery | Fadein Fadeout Slider |Jquery Slideshow|Next Button | Previous Button
Laravel Installation | Composer set Up | Creating First Project in Laravel | Laravel Tutorial
Program to find sum of digits | #sumofseries
Date Time Function | PHP Tutorial | Date Time function in PHP
Class 3 | endl and variables in C++ | #shorts #cplusplusprogramming #cplusplustutorial
Object Oriented PHP | MYSQLI Object Connection | Connection Object | Learn PHP | Best PHP Tutorial
Form Validation - Laravel 8 Tutorial | Form Validation and Customizing Error Messages in Laravel
Difference Between Post Increment and Pre Increment in Language | C Language Tutorial | C Tutorial
Class 40 | Sum of Arrays of Elements in C | #shorts #cprogramming #arraysinc
Class 39 | First Program of Array | #shorts #cprogramming #arraysinc
Form Submit PHP | Get Method | Post Method | PHP Tutorial | PHP form Database Insert | Database CRUD
Class 4 | PHP Tutorial for Beginners | Best PHP Tutorial | Learn PHP | PHP Basics
Learn Python | Python Basic Tutorial | Python Basic to Advanced | Python Lecture 1 | Niklix Tutorial
Class 23 | Switch Statement in C Language |#cprogramming #cprogrammingvideo #switchstatement
Laravel 8 Form Insert Tutorial | Laravel 8 Tutorial | Form insert database in Laravel 8
String into array in PHP | #arrays #strings
Javascript Form Validation | Learn Javascript | Javascript Tutorial | Niklix Tutorials | Javascript
