如何創建一個固定的js滑塊

我有一個java滑塊im爲新作品網站建設，我很難讓它成爲一個固定的大小，它將它自我調整爲圖像大小。我怎麼能讓這個親戚？如何創建一個固定的js滑塊

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

來源

2016-10-03 James Clapson

也許你需要更新你的代碼像下面給出...

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

來源

2016-10-03 11:20:43

感謝隊友，現在工作的魅力喝彩！ –

如何創建一個固定的js滑塊

回答

相關問題