简单的画廊Angularjs

• 文章 • 阅读 88

我做了一个简单的画廊。画廊是工作的，但代码非常糟糕。我想使代码通用。我试图用循环进行代码，但不能。请帮忙。

html：

<ul class="catalog">    <li><img src="1.png"></li>    <li><img src="2.png"></li>    <li><img src="3.png"></li></ul><div class="main">    <img src="1.png"></div>

JS：

var main = angular.element(document.querySelector(".main"))var catalog = angular.element(document.querySelector(".catalog"));var catlalogItems = catalog.find("img"); var firstItem = catlalogItems.eq(0)firstItem.on('click',function(){    main.attr('src',(firstItem.attr('src')));}); var secondItem = catlalogItems.eq(1)secondItem.on('click',function(){    main.attr('src',(secondItem.attr('src')));}) var thirdItem = catlalogItems.eq(2)thirdItem.on('click',function(){    main.attr('src',(thirdItem.attr('src')));})

谢谢，对不起，我的英语不好。

app.js

(function () {  angular.module('app', []);}());

app.html

<image-gallery></image-gallery>

图像 – gallery.js

(function () {  var imageGallery = {    constroller: function () {      this.urls = ['1.png', '2.png', '3.png'];    },    templateUrl: './images-template.html'  };   angular.module('app')    .component('imageGallery', imageGallery)}());

图像gallery.html

<ul class="catalog">    <li ng-repeat="url in $ctrl.urls">      <img ng-src="url" ng-click="$ctrl.selectedUrl = image">    </li></ul><div class="main">    <img ng-src="$ctrl.selectedUrl"></div>

本文链接：https://xdcnz.com/10637.html

赞 (0)
打赏 微信扫一扫 微信扫一扫
0
上一篇 2022年7月1日 11:28
下一篇 2022年7月1日 11:30

相关推荐