鼠标移动时增加和减少滑动速度

时间:2013-10-29 02:30:58

标签: javascript jquery jquery-animate slideshow

我正在尝试创建一个幻灯片,当您将鼠标向右移动并将其速度降低到左侧时,该幻灯片会提高其速度。问题是我希望它连续不连续。这是我的代码。谢谢你

$('[class*="sPrevious"]').hover(
                function () {
                    //debugger;
                    //$( "."+slideId+"_"+"ui" ).stop(true, false);
                    var cName = this.className.substr(11);
                    var slideId = cName.substring(0,cName.lastIndexOf("_"));
                    var totalSize = $('#'+slideId+"_totalWidth").attr( "value");
                    var mWidth=288;
                    var leftSize = $('.'+slideId+'_'+'ui').css("left");
                    leftSize = leftSize.substring(0,leftSize.lastIndexOf("p"));



                    $( '.'+slideId+'_'+'ui' ).animate(
                      { left: 0     },                        
                      {
                        duration: 3400*this.className.substr(9,1),
                        queue : false
                      }
                      );



 <div class="middle">
          <div class="viewbox">
           <div class="previous mf1_direction">
               <div class="sPrevious3 mf1_direction"></div>
               <div class="sPrevious2 mf1_direction"></div>
               <div class="sPrevious1 mf1_direction"></div>
                                            </div>
           <div class="next mf1_direction">
               <div class="sNext1 mf1_direction"></div>
               <div class="sNext2 mf1_direction"></div>
              <div class="sNext3 mf1_direction"></div>
        </div>
</div>
<input type="hidden" id="mf1_totalWidth" value="3355.582507916454">
                                        <input type="hidden" id="mf1_photoSize" value="125.71428571428571,61.96666666666667,125.71428571428571,73.7,63.8,134.82051282051282,124.66666666666667,132,77.73333333333333,146.66666666666666,61.233333333333334,132,132,76.63333333333334,132.83018867924528,132.83018867924528,66,132,117.33333333333333,166.9206349206349,124.97041420118343,156.44444444444446,58.666666666666664,117.33333333333333,133.67088607594937,132,117.33333333333333,132,105.6">  
                                       <ul class="mf1_ui" style="width: 3355.582507916454px; left: -2892.7099518171763px;">

                                            <li><img src="http://farm6.staticflickr.com/5333/9509968984_39f271e72e_m.jpg" alt="" class="mf1_f30_li" style="height: 88px;"></li>

                                            <li><img src="http://farm8.staticflickr.com/7320/9507172741_b869095bb1_m.jpg" alt="" class="mf1_f29_li" style="height: 88px;"></li>

                                            <li><img src="http://farm6.staticflickr.com/5328/9507168757_22b6b7fc4c_m.jpg" alt="" class="mf1_f28_li" style="height: 88px;"></li>

                                            <li><img src="http://farm3.staticflickr.com/2830/9509968588_b11cc4d925_m.jpg" alt="" class="mf1_f27_li" style="height: 88px;"></li>

                                            <li><img src="http://farm4.staticflickr.com/3758/9509964156_684f190b8a_m.jpg" alt="" class="mf1_f25_li" style="height: 88px;"></li>

                                            <li><img src="http://farm8.staticflickr.com/7433/9509965790_b6103e5431_m.jpg" alt="" class="mf1_f24_li" style="height: 88px;"></li>

                                            <li><img src="http://farm4.staticflickr.com/3778/9509963902_af7174270c_m.jpg" alt="" class="mf1_f22_li" style="height: 88px;"></li>

                                            <li><img src="http://farm3.staticflickr.com/2834/9507172221_0a9061158e_m.jpg" alt="" class="mf1_f18_li" style="height: 88px;"></li>

                                            <li><img src="http://farm4.staticflickr.com/3687/9507172565_4c16634337_m.jpg" alt="" class="mf1_f23_li" style="height: 88px;"></li>

                                        </ul>
                                    </div>

0 个答案:

没有答案