CODEWITHSUNDEEP
javascripthtmlcss
HTMLnoobcs17001
HTMLnoobcs17001

Reputation: 59

Making a slideshow with arrays Javascript

My goal is to make a slideshow. I have only 1 image here and plan to use more later. 

<!DOCTYPE html>
<html onmousedown='event.preventDefault();'>
<head>
<title> Slides </title>
<meta charset='utf-8'>
<style>

 table{
 margin: 1.5in;
 }

.arrow{
 color: blue;
 cursor: pointer;
 }

I attempted to make the image class 640 x 540 pixels, centered both horizontally and vertically. I want to avoid internal padding. Not sure if it's right.

.img{
 height: 540px;
 width: 640px;
 position: relative;
 }

For the image element itself I put no margin, is 100% wide, has a 1 pixel solid black border.

 #image{
 width: 100%;
 border: solid 1px;
 border-color: black;
 }
</style>
<script>

I want to make 2 globals, "images" and "imgidx". -images - an array that is filled in with the paths of the images in the images directory as strings.

-imgidx - a number initially set to 0.

Next I want to fill in the following functions.

-Increment or decrement imgidx.

-set the 'src' attribute on the img element (identified by the id 'img') to the image at images[imgidx]. If imgidx is > the number of images in the images array, it should wrap back to zero. If it goes below zero it should be set to 1 less than the length of the array.

function previmg() {
}
function nextimg() {
}
</script>
</head>
<body>
<table>
<tr>
<!-- Clicking on the arrows should change the image being displayed: -->
<td class='arrow' onclick='previmg();'> &#171;
<td class='image'><img id='img' src='https://img-9gag-fun.9cache.com/photo/appxzbM_460s.jpg'>
<td class='arrow' onclick='nextimg();'> &#187;
</table>
</body>
</html>

Upvotes: 1

Views: 10881

Answers (3)

A. L
A. L

Reputation: 12649

Just change the img src based on whichever direction you're clicking, using the image index as to where the src should point to.

var images = ['http://placehold.it/300x150?text=Image1', 'http://placehold.it/300x150?text=Image2', 'http://placehold.it/300x150?text=Image3'];

var index = 0;

var the_image = document.getElementById("main-image");
the_image.src = images[0];

function show_image(direction)
{
  if (direction == "left")
  {
    index--;
  }
  else
  {
    index++;
    index %= images.length;
  }
  
  if (index < 0)
  {
    index = images.length - 1;
  }
  
  the_image.src = images[index];
}
<div>
  <button onclick="show_image('left')">&lt;</button>
  <button onclick="show_image('right')">&gt;</button>
</div>

<div>
  <img id="main-image" />
</div>

Upvotes: 2

Vivick
Vivick

Reputation: 4991

I guess the variable that you increment is imgidx, then you should use this calculations :

prev

imgidx -= 1;
imgidx %= images.length;

next

imgidx += 1;
imgidx %= images.length;

Here are some examples of how it works :

//imgidx is 9, images.length is 10
//user click on next
imgidx += 1;//here imgidx is 10
imgidx %= images.length;//10%10 is 0, back to zero \o/

``

//img idx is 0, images.length is 10
//user click on prev
imgidx -= 1;//here imgidx is -1
imgidx %= images.length;//-1%10 is -1
imgidx+=(imgidx < 0)?images.length:0;//-1 + 10 = 9, the "last" image

Upvotes: 1

Felix Haeberle
Felix Haeberle

Reputation: 1606

I did a small slideshow based on your needs!

Maybe I could help you.. buttons are not working but are preconfigured!

$('.arrowLeft').on('click', function (){
  // your code goes here
});

$('.arrowRight').on('click', function (){
 // your code goes here
});
.arrowLeft{
  z-index: 100;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 50%;
  left: 10%;
  background-color: red;
}

.arrowRight{
  z-index: 100;
  position: fixed;
  width: 50px;
  height: 50px;
  top: 50%;
  right: 10%;
  background-color: red;
}

.arrow {
  color: blue;
  cursor: pointer;
}

.img {
  height: 540px;
  width: 640px;
  position: relative;
}

img {
  position: fixed;
  top: 0%;
  left: 20%;
  width: 60%;
  border: solid 1px;
  border-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <div class='arrowLeft'></div>
    <div class='arrowRight'></div>
    <td class='image'>
      <img id='img-3' src='http://placehold.it/200x200?text=Slide3' />
    </td>
    <td class='image'>
      <img id='img-2' src='http://placehold.it/200x200?text=Slide2' />
    </td>
    <td class='image'>
      <img id='img-1' src='http://placehold.it/200x200?text=Slide1' />
    </td>
  </tr>
</table>

Upvotes: 0

Related Questions