javascript - 切换 div 内容 JavaScript jQuery

Question

我想知道如何用js或jQuery更改div内容。我有一个 id="container" 的 div，其中包含另外 5 个具有不同 id 的 div。我需要的是从第一个 div 开始，然后，通过单击按钮更改到下一个 div ，等等。这是我的代码，我无法添加任何 js 或 jQuery:

<div id="container" class="thirdcanvas">
      
       <div id="vapor">
           <img src="images/alfabet/w.png" alt=""/>
           <img src="images/alfabet/f.png" alt=""/>
           <img src="images/alfabet/v.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/o.png" alt=""/>
           <img src="images/alfabet/r.png" alt=""/>
       </div>
       
       <div id="baiat">
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/aa.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/t.png" alt=""/>
       </div>     
           
       <div id="colac">    
           <img src="images/alfabet/g.png" alt=""/>
           <img src="images/alfabet/c.png" alt=""/>
           <img src="images/alfabet/u.png" alt=""/>
           <img src="images/alfabet/o.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/c.png" alt=""/>
       </div> 
           
       <div id="slapi">    
           <img src="images/alfabet/s.png" alt=""/>
           <img src="images/alfabet/ss.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
           <img src="images/alfabet/i.png" alt=""/>
       </div>  
           
       <div id="umbrela">   
           <img src="images/alfabet/u.png" alt=""/>
           <img src="images/alfabet/n.png" alt=""/>
           <img src="images/alfabet/m.png" alt=""/>
           <img src="images/alfabet/p.png" alt=""/>
           <img src="images/alfabet/b.png" alt=""/>
           <img src="images/alfabet/r.png" alt=""/>
           <img src="images/alfabet/e.png" alt=""/>
           <img src="images/alfabet/l.png" alt=""/>
           <img src="images/alfabet/a.png" alt=""/>
       </div>  
   </div> 

我现在有这个代码:

var image = new Array("images/baiat.png", "images/colac.png" , "images/slapi.png" , "images/umbrela.png");

var imgNumber=0; 

var numberOfImg = image.length;

function nextImage(){
    
    $("#container div").not("#container div:first").each(function(){

    $(this).addClass('hidden');

});

$("#click").click(function(){

    var divWithoutHiddenClass=$("#container div").not("#container div.hidden");       
    
   divWithoutHiddenClass.addClass('hidden');
         
       if(divWithoutHiddenClass.next().html()===undefined){
           $("#container div:first").removeClass('hidden');
    }
    else{
        divWithoutHiddenClass.next().removeClass('hidden');
    }
});
    
  if(imgNumber < numberOfImg){
    imgNumber++;
    }
  document.slideImage.src = image[imgNumber-1];
 
 }
 
 
            
if(document.images){
   
   var image1 = new Image();
   image1.src = "images/vapor.png";
   var image2 = new Image();
   image2.src = "images/baiat.png";
   var image3 = new Image();
   image3.src = "images/colac.png";
   var image4 = new Image();
   image4.src = "images/slapi.png";
   var image5 = new Image();
   image5.src = "images/umbrela.png";
   
   }  

与:

<a href="#" onClick="nextImage()"><img id="click" src="images/nextBtn.png" title="Continuare" /></a>

Answer 1

Check this fiddle

var parentElem = $('#container');
var parentWidth=parentElem.outerWidth();

$('#left').click(function(){
    var sr=parentElem.scrollLeft();
    parentElem.scrollLeft(sr-parentWidth); 
});

$('#right').click(function(){
   var sr=parentElem.scrollLeft();
   parentElem.scrollLeft(sr+parentWidth); 
});