बटन का उपयोग कर क्षैतिज स्क्रॉलिंग div

Question

क्षैतिज सामग्री को स्क्रॉल करने के लिए मैं डीआईवी पर बाएं और दाएं बटन कैसे सेट कर सकता हूं? मुझे स्क्रॉलबार प्रदर्शित करने की आवश्यकता नहीं है।

HMTL:

<div id="browser"> 
    <a href="#" id="left-button"><img src="left-button.jpg" /></a> 
    <img src="thumb_1.jpg" /> 
    <img src="thumb_2.jpg" /> 
    <img src="thumb_3.jpg" /> 
    <img src="thumb_4.jpg" /> 
    <img src="thumb_5.jpg" /> 
    <img src="thumb_6.jpg" /> 
    <a href="#" id="right-button"><img src="right-button.jpg" /></a> 
</div> 

सीएसएस:

#browser { float: left; width: 200px; overflow: hidden; white-space: nowrap; } 

Answer 1

है:

<div id="browser"> 
    <a href="#" id="left-button"><img src="left-button.jpg" /></a> 
    <div id="content"> 
     <img src="thumb_1.jpg" /> 
     <img src="thumb_2.jpg" /> 
     <img src="thumb_3.jpg" /> 
     <img src="thumb_4.jpg" /> 
     <img src="thumb_5.jpg" /> 
     <img src="thumb_6.jpg" /> 
    </div> 
    <a href="#" id="right-button"><img src="right-button.jpg" /></a> 
</div> 

<script> 
    $('#right-button').click(function() { 
     event.preventDefault(); 
     $('#content').animate({ 
     marginLeft: "-=200px" 
     }, "fast"); 
    }); 
</script> 

फिर बाएं बटन के लिए एक ही है, सिवाय - marginLeft: + = "200px"।

Answer 2

आप इसे आजमा सकते हैं: - "मास्क div" बनाएं और स्थिति को सापेक्ष सेट करें, चौड़ाई सेट करें, और अतिप्रवाह छिपाएं। - और मुखौटा div के अंदर एक सामग्री div बनाने स्थिति सेट को ठीक

अब आपके पास दो बटन रख सकते हैं: छोड़ दिया और सही, और आप केवल सामग्री div के बाएं मूल्य modifiy की जरूरत

पैच समाधान के रूप में इसी तरह के :)

Answer 3

यहां वह कोड है जिसे आप चाहते हैं। यह साबित हुआ है कि आईई, सफारी, क्रोम, फ़ायरफ़ॉक्स, आदि पर काम करता है

यहां HTML भाग है।

<div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;"> 
     <div id="inner-wrap" style="float:left;"> 
      <!-- 'Put Inline contains here like below.' --> 
      <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div> 
      <!-- ... --> 
      <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div> 
      <!-- 'Put Inline contains here like above.' --> 
     </div> 
     <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px; margin-top:40px"> 
      <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/> 
     </div> 
     <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px"> 
      <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/> 
     </div> 
    </div> 

जावास्क्रिप्ट फ़ंक्शन में jQuery भाग यहां है।

 function scrollThumb(direction) { 
     if (direction=='Go_L') { 
      $('#slide-wrap').animate({ 
       scrollLeft: "-=" + 250 + "px" 
      }, function(){ 
       // createCookie('scrollPos', $('#slide-wrap').scrollLeft()); 
      }); 
     }else 
     if (direction=='Go_R') { 
      $('#slide-wrap').animate({ 
       scrollLeft: "+=" + 250 + "px" 
      }, function(){ 
       // createCookie('scrollPos', $('#slide-wrap').scrollLeft()); 
      }); 
     } 
     } 

तीरों को छिपाने के लिए कृपया यहां देखें। Detect end of horizontal scrolling div with jQuery