製作數組幻燈片Javascript

我的目標是製作幻燈片。我在這裏只有1張圖片，並計劃在稍後使用。製作數組幻燈片Javascript

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

table{ 
margin: 1.5in; 
} 

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

我試圖讓水平和垂直居中的圖像類640 x 540像素。我想避免內部填充。不知道它是否正確。

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

對於圖像元素本身我沒有保證金，是100％寬，有一個1像素純黑色邊框。

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

我想使2全局變量，「圖像」和「imgidx」。 -images - 以圖像目錄中的圖像路徑作爲字符串填充的數組。

-imgidx - 一些初始設置爲0

接下來我要填寫以下功能。

- 增加或減少imgidx。

-將img元素上的'src'屬性（由id'img'標識）設置爲圖像[imgidx]上的圖像。如果imgidx>圖像數組中的圖像數量，它應該回到零。如果它低於零，它應該設置爲小於數組長度的1。

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>

來源

2017-04-11 HTMLnoobcs17001

所以你想改變'img'的src或你想要的圖像走動？ –

我打算在以後重用不同圖像的代碼。我想能夠前進和後退。 – HTMLnoobcs17001

你會有更多的'img'還是隻有那個'img'，它會根據你點擊的箭頭改變它的src？ –

基於哪個方向你點擊，利用圖像索引到的SRC應指向只要改變img SRC。

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>

來源

2017-04-12 00:57:44

我可以用我的替換div嗎？ – HTMLnoobcs17001

@HTMLnoob是的，無論你把什麼容器放進去，只要確保你有一些方法來識別你的'img'例如'id'。只是懶惰。 –

太棒了！萬分感謝！ – HTMLnoobcs17001

我猜你增量爲imgidx變量，那麼你就應該使用這種計算：

分組

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

下一個

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

下面是如何一些例子它的工作原理：

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

來源

2017-04-12 00:16:54 Vivick

謝謝！它需要從0這樣打包。 – HTMLnoobcs17001

代碼'-1％10'不等於9 –

它的確是基礎數學。 – Vivick

我做根據您的需求小幻燈片！

也許我可以幫你..按鈕不工作，但預先配置！

$('.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>

來源

2017-04-12 00:37:19 Felix

檢查你的代碼，你的按鈕不起作用。或者至少拋出錯誤 –

如果你實際提交完整的代碼會更好（如在其實際工作中） –

檢查它！它僅在OP可自行設置的點擊不同行爲的情況下進行預配置。 – Felix

製作數組幻燈片Javascript

回答

相關問題