Question

我在网站上使用了幻灯片：http://www.sitepoint.com/creating-slide-show-plugin-angularjs/

添加了小侧图像。我想知道如何在点击小图片时返回相应的大图片。

使用此代码添加缩略图:(放置templateurl.html）

<ul class="minimage" ng-show="image.visible" >

  <a ng-click="returner()"> <img ng-repeat="image in images" ng-src="/sliderAngular/img/{{image.src}}" width="70" height="56"/> </a>

</ul>

这是我的尝试，因为它可以使它工作？（放置app.js）

scope.currentIndex=0;

scope.returner=function(){
   scope.currentIndex= ;

};

我好几天都没有成功地真正需要知道的人的帮助。如果您需要更多信息，可以问我，我的英语和角度非常有限。

Answer 1

实际上，您最初共享的代码有很多问题，其中一些是：

UL标签没有LI项目
纳克放映=＆＃34; image.visible＆＃34;在ng-repeat之外，因此图像将始终未定义
ng-repeat位于img标签上，因此其中只有1个链接，里面有大量的图片。

使用$ index的代码示例（在ng-repeat指令中可用的属性）：

<ul class="minimage" ng-show="images.length"> <!-- show if there are items  -->
    <li ng-repeat="image in images"><a ng-click="returner($index)"><img ng-src="/sliderAngular/img/{{image.src}}" width="70" height="56"/></a></li>
</ul>

和

scope.currentIndex=-1;
scope.returner = function(index){
    scope.currentIndex = index;
};

Answer 2

我设法以几个月前想要的方式离开它，现在记住这个问题并回来为未来的读者提供更完整的答案。

将此代码放在要显示滑块的位置

下方

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div images="images" class="slider" id="mauseOnOut">
    <div  class="slide" ng-repeat="image in images" ng-show="image.visible"> 
        <a ng-href="{{image.url}}"><img ng-src="{{image.src}}" width="444" height="250"/>
        <p class="texto">{{image.texto}}</p>
        </a>
    </div>

    <ul class="minimagem" ng-show="images.length"> 
      <li ng-repeat="image in images"><a ng-click="returner($index)"><img ng-src="{{image.src}}" width="70" height="56"/></a></li>
    </ul>

    <div class="arrows">
        <a href="" ng-click="prev()" ><img  src="http://s5.postimg.org/orczpkx0z/left_arrow.png"/></a> <a href="" ng-click="next()"><img src="http://s5.postimg.org/qkfwdwi7n/right_arrow.png"/></a>
    </div>
</div>
    </div>
</div>

将以下代码放入app.js，controller或directives的特定页面。

myApp.directive('images', function factory($timeout) {
  var directiveDefinitionObject = {

    transclude: false,
    restrict: 'AE',
    multiElement: true,
    scope: {
        images: '='
    },

    link: function postLink(scope, iElement, iAttrs) { 
      scope.currentIndex=0;

    scope.returner = function(index){
    scope.currentIndex = index;
   };

        scope.next=function(){
            scope.currentIndex<scope.images.length-1?scope.currentIndex++:scope.currentIndex=0;
        };

        scope.prev=function(){
            scope.currentIndex>0?scope.currentIndex--:scope.currentIndex=scope.images.length-1;
        };

        scope.$watch('currentIndex',function(){
            scope.images. forEach(function(image){
                image.visible=false;
            });
            scope.images[scope.currentIndex].visible=true;
        });

        // Start: For Automatic slideshow

        var timer;

        var sliderFunc=function(){
            timer=$timeout(function(){

                scope.next();
                timer=$timeout(sliderFunc,3000);
            },3000);
        };

        sliderFunc();

        scope.$on('$destroy',function(){
            $timeout.cancel(timer);
        });

        var myDiv = document.getElementById('mauseOnOut');

        myDiv.onmouseover = function() { 
            $timeout.cancel(timer);
        };

        myDiv.onmouseout = function() { 
            timer=$timeout(sliderFunc,3000);
        };

         // End : For Automatic slideshow
   }
  };
  return directiveDefinitionObject;
});

将以下代码放入controller并根据需要进行编辑：

$scope.images = [

  {
        src:'http://s5.postimg.org/b2wzny14n/img1.png',
        url:'',
        texto:'Trees and mountains a pleasant and peaceful environment to live .'
  },
  {
        src:'http://s5.postimg.org/vlrvt0f1z/img2.jpg',
        url:'',
        texto:'Yellow and pond landscape sky that inspires a reflection on the existence'
  },
  {
        src:'http://s5.postimg.org/wms4i4w1j/img3.jpg',
        url:'',
        texto:'Yellow and pond landscape sky that inspires a reflection on the existence '
  },
  {
        src:'http://s5.postimg.org/k0hplatkn/img4.png',
        url:'',
        texto:'The cold and snow prevents does not prevent good news for those seeking good '
  },
  {
        src:'http://s5.postimg.org/nitphougn/img5.png',
        url:'',
        texto:'Imposing Rhino with your muscles , bones and horns forming one of the strongest animals of nature '
  }
   ];

查看在jsFiddle

中运行的CSS和滑块

＆＃39;滑块角度＆＃39;单击小图像将返回相应的大图像

2 个答案: