本文介绍了图像滑块onclick按钮-JavaScript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我完全将Array内带有URL链接的滑块固定住了.如何使此代码适当运行?就是这个: https://codepen.io/konradszymanski/pen/VwvLgYG?editors=0110
I completely stuck with slider with url links inside the Array.How to make this code run appropriate?This is it:https://codepen.io/konradszymanski/pen/VwvLgYG?editors=0110
或者这是html:
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<div class="container">
<button class="left" onclick="" ><i class='fas fa-angle-left'></i></button>
<button class="right" onclick="next()"><i class='fas fa-angle-right'></i></button>
</div>
和js:
var images = [{img: "https://upload.wikimedia.org/wikipedia/commons/5/50/Bodiam-castle-10My8-1197.jpg",},{img: "https:upload.wikimedia.org/wikipedia/commons/4/4d/Balmoral_Castle.jpg",}];
var x = images;
var element = document.getElementById("container");
element.innerHtml = x;
next();
function next(){
element.innerHTML = x;
};
推荐答案
var images = [{img: "https://upload.wikimedia.org/wikipedia/commons/5/50/Bodiam-castle-10My8-1197.jpg"},{img: "https://upload.wikimedia.org/wikipedia/commons/4/4d/Balmoral_Castle.jpg"}];
var element = document.getElementById("container");
function next(direction){
var index= element.dataset.index;
if(direction=="right"){index++;}else{index--}
if(index>images.length-1){index=0;}
if(index<0){index=images.length-1;}
element.dataset.index=index;
element.style.backgroundImage ="url('"+ images[index].img +"')";
};
*{
}
body{
background-color: #3a4a63;
}
img{
min-width: 500px;
height: 400px;
}
.container{
min-width: 500px;
height: 400px;
margin: 0 auto;
background-color:#363537;
display: flex;
justify-content:space-between;
align-items: center;
flex-direction: row;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
border: 7px solid #fff;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/5/50/Bodiam-castle-10My8-1197.jpg);
background-size: cover;
background-position:center center;
background-repeat:no-repeat
}
button{
font-size: 50px;
padding: 5px 10px;
background-color: #3a4a63;
border: 4px solid #fff;
border-radius: 10px;
}
.fa-angle-left,
.fa-angle-right{
color: #fff;
}
.left{
position: relative;
left: -25px;
}
.right{
position: relative;
left: 25px;
}
*/
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<div class="container"id="container"data-index="0">
<button class="left" onclick="next('left')"><i class='fas fa-angle-left'></i></button>
<button class="right" onclick="next('right')"><i class='fas fa-angle-right'></i></button>
</div>
这篇关于图像滑块onclick按钮-JavaScript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!