滑块使用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

回答

相关问题