Question

我尝试复制粘贴this似乎有用的示例。此代码使用jCarousel和AngularJS。但是，当我尝试在Chrome或Firefox中运行该复制粘贴的代码时，当我点击 control-prev 或 control-next 时，没有任何事情发生且没有错误消息。我此刻正在挠头。这是我下面的代码，它是 jsfiddle 示例的精确副本。我究竟做错了什么？感谢。

更新1： 我看到一个奇怪的现象：当我点击控件时，什么也没发生。但是，如果我打开/关闭调试器，轮播将根据调试器切换前单击的内容滑动到该状态。这个症状意味着什么？

的index.html

<html>
<head>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.3/jquery.jcarousel.min.js"></script>

<style>

.jcarousel-wrapper {
    margin: 0;
    position: relative;
    border: 10px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 2px #999;
    -moz-box-shadow: 0 0 2px #999;
    box-shadow: 0 0 2px #999;
    margin: 20px;
}
.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.jcarousel ul {
    width: 20000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.jcarousel li {
    width: 150px;
    float: left;
    border: 1px solid #fff;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.jcarousel img {
    display: block;
    max-width: 100%;
    height: auto !important;
}
/** Carousel Controls **/
 .jcarousel-control-prev, .jcarousel-control-next {
    position: absolute;
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    text-align: center;
    background: #4E443C;
    color: #fff;
    text-decoration: none;
    text-shadow: 0 0 1px #000;
    font: 24px/27px Arial, sans-serif;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 0 0 4px #F0EFE7;
    -moz-box-shadow: 0 0 4px #F0EFE7;
    box-shadow: 0 0 4px #F0EFE7;
}
.jcarousel-control-prev {
    left: 15px;
}
.jcarousel-control-next {
    right: 15px;
}

</style>

</head>

<body>

<div ng-app="testApp">
    <div ng-controller="profileController">
        <div carousel images="images"></div>
        <div carousel images="images"></div>
        <div carousel images="images"></div>
    </div>
</div>

<script>

(function () {
    angular.module('testApp', []).directive('carousel', carousel).controller('profileController', profileController);

    function carousel() {
        return {
            restrict: 'A',
            replace: true,
            transclude: false,
            scope: {
                images: "="
            },
            template: '<div class="jcarousel-wrapper"><div class="jcarousel"><ul><li ng-repeat="img in images">{{img.imageKey}}</li></ul></div><a href="javascript:void(0)" class="jcarousel-control-prev">&lsaquo;</a><a href="javascript:void(0)" class="jcarousel-control-next">&rsaquo;</a></div>',
            link: function link(scope, element, attrs) {
                var container = $(element);
                var carousel = container.children('.jcarousel');

                carousel.jcarousel({
                    wrap: 'circular'
                });

                scope.$watch(attrs.images, function (value) {
                    carousel.jcarousel('reload');
                });

                container.find('.jcarousel-control-prev')
                    .jcarouselControl({
                    target: '-=1'
                });

                container.find('.jcarousel-control-next')
                    .jcarouselControl({
                    target: '+=1'
                });
            }
        };
    }



    function profileController($scope) {

        $scope.images = [{
            imageKey: 'Hello 1'
        }, {
            imageKey: 'Hello 2'
        }, {
            imageKey: 'Hello 3'
        }, {
            imageKey: 'Hello 4'
        }, {
            imageKey: 'Hello 5'
        }, {
            imageKey: 'Hello 6'
        }];
    }

})();

</script>

放在本地html文件中时，在jsfiddle中工作的jCarousel代码不起作用

0 个答案: