JavaScript code for photo Gallery
<!DOCTYPE html>
<html>
<body>
<p id="sl"></p>
<h2>Photo Gallery</h2>
<button onclick="prev()">PREV</button>
<img id="myImage" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTaODs_YPgUwoeP6HzgpTVZfRaFXbD8qJ04g74_LQSm86v4BQAiw&s" style="width:150px; height:150px;">
<button onclick="next()">NEXT</button>
<script>
var pics=
[
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9z3pDNtnCK66ksFLYXNV6n9VHcM_fxIANkMPMtK1G2P204S0b&s",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIPU7PjSiqAsIGGadYvP_YzcHZ2oeDMvMOfmczoTwBvwlc3e3BhA&s",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTC9Tmy1LfVmXlgbyngqPN8uVCDk5urRwPjHa3sfExzhFJZ1SKRCg&s",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRt54JZ5Uh74Xbyg1p8Yfu-psDjugvwc-7-s539-mne94ZdOlgV&s",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMEeB-m-vj_BFEF3JhBg2RokoWIRGcYtnek_W2SBHXo_K9MyJC_Q&s",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvA-pCWL3nZ1IdbPNhxhHubEQBXr_AgxPssBpJDAEkTPl94NMJTg&s",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTaODs_YPgUwoeP6HzgpTVZfRaFXbD8qJ04g74_LQSm86v4BQAiw&s"
];
var i=0;
function prev()
{
i=i-1;
if(i<0)
i=pics.length-1
document.getElementById('myImage').src=pics[i];
document.getElementById('sl').innerHTML=i;
}
function next()
{
i=i+1;
if(i>pics.length-1)
i=0;
document.getElementById('myImage').src=pics[i];
document.getElementById('sl').innerHTML=i;
}
</script>
</body>
</html>
RUN CODE
<!DOCTYPE html>
<html>
<body>
<p id="sl"></p>
<h2>Photo Gallery</h2>
<button onclick="prev()">PREV</button>
<img id="myImage" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTaODs_YPgUwoeP6HzgpTVZfRaFXbD8qJ04g74_LQSm86v4BQAiw&s" style="width:150px; height:150px;">
<button onclick="next()">NEXT</button>
<script>
var pics=
[
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS9z3pDNtnCK66ksFLYXNV6n9VHcM_fxIANkMPMtK1G2P204S0b&s",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIPU7PjSiqAsIGGadYvP_YzcHZ2oeDMvMOfmczoTwBvwlc3e3BhA&s",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTC9Tmy1LfVmXlgbyngqPN8uVCDk5urRwPjHa3sfExzhFJZ1SKRCg&s",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRt54JZ5Uh74Xbyg1p8Yfu-psDjugvwc-7-s539-mne94ZdOlgV&s",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQMEeB-m-vj_BFEF3JhBg2RokoWIRGcYtnek_W2SBHXo_K9MyJC_Q&s",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvA-pCWL3nZ1IdbPNhxhHubEQBXr_AgxPssBpJDAEkTPl94NMJTg&s",
"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQTaODs_YPgUwoeP6HzgpTVZfRaFXbD8qJ04g74_LQSm86v4BQAiw&s"
];
var i=0;
function prev()
{
i=i-1;
if(i<0)
i=pics.length-1
document.getElementById('myImage').src=pics[i];
document.getElementById('sl').innerHTML=i;
}
function next()
{
i=i+1;
if(i>pics.length-1)
i=0;
document.getElementById('myImage').src=pics[i];
document.getElementById('sl').innerHTML=i;
}
</script>
</body>
</html>
RUN CODE
New Update
ReplyDeletehttps://www.w3schools.com/code/tryit.asp?filename=GBW7J0B6MB3M