How To Make Navigation Images As Picture Below

Posted by Ahmedsa under ASP.NET MVC on 3/5/2017 | Points: 10 | Views : 933 | Status : [Member] | Replies : 2
I work in visual studio 2015 asp.net mvc project i need to make image galary with circle light

really I cannot know technique i will use(css or flash or what )

it found on



under green menu image galary automatic navigate every certain time

can you tell me

How to do that please ?

it found as link below




Responses

Posted by: A2H on: 3/5/2017 [Member] [MVP] Silver | Points: 25

Up
0
Down
If possible you can try using a third party plugin to implement this functionality. One such option is to use JqueryCycle Plugin.
A very basic example will be like this
<!DOCTYPE html>

<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- load the script here -->
<script src="../jquery.cycle.all.min.js"></script>
<script>
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'scrollLeft',
speed: 300,
timeout: 5000
});
});

</script>
<meta charset="utf-8">
</head>

<body>
<div style="margin:auto;text-align:center">
<div id="nav"></div>
</div>
<div class="slideshow">
<div class="slide">
<img src="~/images/free_33403728.jpg" width="500" height="200" />

</div>
<div class="slide">
<img src="~/images/free_10025276.jpg" width="500" height="200" />
</div>
<div class="slide">
<img src="~/images/free_8752000.jpg'" width="500" height="200" />
</div>
</div>
</body>
</html>


Reference URL: http://jquery.malsup.com/cycle/

Thanks,
A2H
My Blog

Ahmedsa, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: A2H on: 3/5/2017 [Member] [MVP] Silver | Points: 25

Up
0
Down
If you are not ok with using any third party controls then you can use the below javascript approach which doesnt use any third party plugin
<html> 
<head>
<title> Auto Change Background Color </title>
<style type="text/css">
div
{
height:320px;
width:100%;
}

</style>
<script type = "text/javascript">
//Change this as per your design so that the images will be loaded properly
var image = new Array('pic-1.jpg', 'pic-2.jpg', 'pic-3.jpg', 'pic-10.jpg', 'pic-11.jpg');
var image_index = 0;
function ChangeBgImage() {
document.getElementById("ddiv").style.backgroundImage = "url(" + image[image_index] + ")";
image_index++;
if (image.length == image_index) {
image_index = 0;
}
}
//Change the image on every 5 seconds
setInterval("ChangeBgImage()", 1000);
</script>
</head>
<body>
<div id="ddiv">
</div>
</body>
</html>


Thanks,
A2H
My Blog

Ahmedsa, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response