滑塊使用css和jquery

-1

我想使滑塊使用jquery所以我已經做了功能，其中正在增加價值左屬性現在我想當滑塊div來結束，那麼它假設來自其父div的權利，如作爲字幕但不要使用選取框。滑塊使用css和jquery

<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     var left = 0; 
     $(function moveable() { 

      $('#slider').css('left', --left); 

      setTimeout(moveable, 10) 

     }) 
    </script> 
    <style> 
     .main { 
      margin: 0 auto; 
      width: 500px; 
      height: 200px; 
      border: solid 1px #F00; 
      overflow: hidden 
     } 
     #slider { 
      position: relative; 
      background: #333; 
      height: 200px; 
     } 

    </style> 
</head> 
<body> 
    <div class="main"> 
     <div id="slider"> 
      <img src="slider.jpg" width="500" height="200" /> 
     </div> 
    </div> 
</body>

來源

2012-04-24 Carlos

你有沒有使用像http://nivo.dev7studios.com/ – Undefined 2012-04-24 11:23:34

其實我想知道是什麼插件考慮是 – Carlos 2012-04-24 11:35:26

嘗試這樣的事情

     <html xmlns="http://www.w3.org/1999/xhtml"> 
        <head> 
        <script src="http://code.jquery.com/jquery-latest.js"></script> 
        <style> 
        .main { margin:0 auto; width:500px; height:200px; border:solid 1px #F00; overflow:hidden} 
        #slider {position:relative; background:#333; height:200px;} 
        </style> 
        </head> 
        <body> 
        <div class="main"> 
        <div id="slider"> 
         <img src="test.png" width="500" height="200" alt="image" id="slider_img" /></div> 
        </div> 
        <script type="text/javascript"> 
         var left=0; 
         $("#slider_img").click(function() { 
         $(function moveable(){ 
         $('#slider').css('left' ,--left); 
         setTimeout(moveable,10) 
         }); 
         }); 
        </script> 
        </body> 
        </html>

檢查的jsfiddle輸出

http://jsfiddle.net/srinivasan/T7xhW/2/

來源

2012-04-24 13:22:15 srini

目前已經是一個jQuery UI的滑塊：http://jqueryui.com/demos/slider/

它運作良好和樣式選項都非常優秀。如果沒有對jQuery UI的約束，我強烈建議使用它。

來源

2012-04-24 11:30:11

背後的邏輯沒有我不使用插件 – Carlos 2012-04-24 11:32:33

滑塊使用css和jquery

回答

相關問題