制作数组幻灯片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

回答

相关问题