gpt4 book ai didi

javascript - 如何创建固定的js slider

转载 作者:行者123 更新时间:2023-11-28 05:29:32 25 4
gpt4 key购买 nike

我有一个正在为工程新网站构建的java slider ,但无法将其设置为固定大小,它会根据图像的大小自行调整大小。我怎样才能成为这个亲戚?

<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
showDivs(slideIndex += n);
}

function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
<!DOCTYPE html>
<html>
<title>Slider</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<h2 class="w3-center">Greenscape slider</h2>

<div class="w3-content" style="max-width:400px;position:relative">
<img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/cropped-Profile-Pic-1-1.jpg" style="width:100%">
<img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/Roiente-Connect-1.png" style="width:100%">
<img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/How-solar-works-1.png" style="width:100%">
<img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/Greenscape-Logo-1.png" style="width:100%">
<img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/Trevor-Sheldrick1-1.jpg" style="width:100%">

<a class="w3-btn-floating" style="position:absolute;top:45%;left:0;" onclick="plusDivs(-1)"><</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">></a>
</div>

最佳答案

可能您需要更新您的代码,如下所示...

    <div class="w3-content" style="width:50%;height:50%;position:absolute;float:left;left:0;">
<img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/cropped-Profile-Pic-1-1.jpg" style="width:100%;height:100%;">
<img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/Roiente-Connect-1.png" style="width:100%;height:100%;">
<img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/How-solar-works-1.png" style="width:100%;height:100%;">
<img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/Greenscape-Logo-1.png" style="width:100%;height:100%;">
<img class="mySlides" src="http://s585624729.websitehome.co.uk/wp-content/uploads/2016/09/Trevor-Sheldrick1-1.jpg" style="width:100%;height:100%;">

<a class="w3-btn-floating" style="position:absolute;top:45%;left:0;" onclick="plusDivs(-1)"><</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)">></a>
</div>

关于javascript - 如何创建固定的js slider ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39829968/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com