Question

我正在为我的网站添加分区滑块。我已经在css和jquery的帮助下制作了分区滑块。这里有一个带有angular js指令的html代码。分区数将从后端发送。

<div id="my-slick-holder">   
         <div class="thumbnailArrows"><img src="http://kimjoyfox.com/blog/wp-content/uploads/leftA.jpg" id="Tleft"/></div>
       <div id="myslick">

         <div id="divHolder" >
              <div class="block1" data-ng-repeat="a in test " ng-click="myData.doClick(a, $event)">
            <div class="img-holder" style=" background-image:url('img/battery.png') ;background-repeat:no-repeat; background-size:contain;background-position:center; height:70px;margin-top: 20px;"></div> 
            <div class="feature-name" ng-model="selectedItem">{{a.Feature}}</div>
          </div>
        </div>

        </div>
        <div class="thumbnailArrows"><img src="http://kimjoyfox.com/blog/wp-content/uploads/rightA.jpg" id="Tright" /></div>
</div>

这里是jquery代码，它使这个分区滑块滑动。

<script type="text/javascript-lazy">
$(document).ready(function() {
//Hovering Over Thumbnail Navigation
$('.thumbnailArrows').hover(function() {
    var whiches = $(this).children('img').attr('id');
    if (whiches == 'Tleft') {
        movingThumbs1(3000, '+');
    }
    else {
        movingThumbs1(3000, '-');
    }
}, function() {
    $('#divHolder').stop();
});


//Function for Thumbnails Moving
function movingThumbs1(speed, direction) {
    var currentLeft = $('#divHolder').position().left;
    //figure out how far to go left - only for right arrow
    var moving = $('#divHolder').width() - (Math.abs($('#divHolder').position().left) + $('#myslick').width());
    if (currentLeft == 0 && direction == '+') {
        //do nothing
    } else if (Math.abs($('#divHolder').position().left) + $('#myslick').width() >= $('#divHolder').width() && direction == '-') {
        //do nothing
    } else if (direction == '+' && currentLeft != 0) {
        $('#divHolder').animate({
            left: 0,
        }, speed);
    } else {

        $('#divHolder').animate({
            left: '+='+direction + moving,
        }, speed);
    }
}
});

当右箭头悬停在分割滑块上方向右移动时。但在到达终点后，它再次滑落，将空白区域带入画面。但是在达到最终功能后向右移动不应再被召唤。但那会发生。如果我不使用angular js指令，所有代码都可以正常工作。

Answer 1

我建议使用jQuery UI来创建滑块，它会让你更容易

这里是滑块的代码：

$(<NAME>).slider({
    orientation: <"horizontal" or "vertical",
    range: <"min" or "max">,
    min: <min value>,
    max: <max value>,
    value: <default value>,
    step: <step value>,
    animate: <true or false>,
    slide: function (event, ui) {
        //what to do when sliding
    }
});

Answer 2

可能是这个问题：

<script type="text/javascript-lazy">

应该是：

<script type="text/javascript">

因为jQuery是type="text/javascript"。

角度js的Jquery滑块不能正常工作

2 个答案: