create a js and insert this code
create a Html file and insert this
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bootstrap/js/jquery.js"></script>
<script src="js/slideshow.js"></script>
<link rel="stylesheet" href="css/slidshow.css">
</head>
<body>
<section class="slider">
<img src="image/1.jpg">
<img src="image/2.jpg">
<img src="image/3.jpg">
<img src="image/4.jpg">
</section>
<script>
(function($)
{
$(document).ready(function(e)
{
options=
{
"delay":2000,
"fadespeed":600,
};
$.slideshow(".slider",options);
});
}(jQuery));
</script>
</body>
</html>
(function($)
{
$.slideshow=function(selector,options)
{
var settings=
{
"delay":2000,
"fadespeed":500,
};
$.extend(settings,options);
var obj = $(selector);
var img = obj.children('img');
var count = img.length;
img.eq(0).show();
i=0;
setInterval(function()
{
img.eq(i).fadeOut(settings.delay);
i = (i+1==count) ? 0:i=i+1;
img.eq(i).fadeIn(settings.fadespeed);
},2000);
};
}(jQuery));
create a Html file and insert this
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="bootstrap/js/jquery.js"></script>
<script src="js/slideshow.js"></script>
<link rel="stylesheet" href="css/slidshow.css">
</head>
<body>
<section class="slider">
<img src="image/1.jpg">
<img src="image/2.jpg">
<img src="image/3.jpg">
<img src="image/4.jpg">
</section>
<script>
(function($)
{
$(document).ready(function(e)
{
options=
{
"delay":2000,
"fadespeed":600,
};
$.slideshow(".slider",options);
});
}(jQuery));
</script>
</body>
</html>
