html - Making a slideshow with arrays Javascript - Stack Overflow|江阴雨辰互联

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='.jpg'>
<td class='arrow' onclick='nextimg();'> &#187;
</table>
</body>
</html>

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.

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./photo/appxzbM_460s.jpg'>
<td class='arrow' onclick='nextimg();'> &#187;
</table>
</body>
</html>

Share Improve this question asked Apr 11, 2017 at 23:50 HTMLnoobcs17001 591 gold badge2 silver badges9 bronze badges

so did you want to change the src of the img or did you want images to move around? – A. L Commented Apr 12, 2017 at 0:17
I plan to reuse the code for different images later on. I want to be able to got forward and backwards. – HTMLnoobcs17001 Commented Apr 12, 2017 at 0:28
were you going to have more img or just that single img which changes its src based on what arrow you click? – A. L Commented Apr 12, 2017 at 0:32
I am planing to have at least 8 images. I am unsure on the best way to have the images put into a function but I would like for it to change to the next image after the next arrow is clicked then wrap back to the first image at the end. So 12345678 --> 12345678 – HTMLnoobcs17001 Commented Apr 12, 2017 at 0:43
What I'm asking is the difference in execution. Basically, just having 1 image and changing the src means the image will just reload, whereas having multiple images will give you the option of create sliding animations and such – A. L Commented Apr 12, 2017 at 0:45

| Show 1 more ment

3 Answers 3

Sorted by: Reset to default 2

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>

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

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

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

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./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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744902888a4600081.html

html - Making a slideshow with arrays Javascript - Stack Overflow

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

html - Making a slideshow with arrays Javascript - Stack Overflow

3 Answers 3

相关推荐