スライド式イメージギャラリー

AngularJSの基本的な記法については言及しません。
ソースコードはこちらgithub

サムネイルのクリック時にメイン画像を切り替える

index.html

<div id="container">
	<div id="navi">
		<ul>
			<li>
				<img src="img/photo1_thum.jpg" ng-click="changeMainImage('img/photo1.jpg')" alt="" />
			</li>
			<li>
				<img src="img/photo2_thum.jpg" ng-click="changeMainImage('img/photo2.jpg')" alt="" />
			</li>
			<li>
				<img src="img/photo3_thum.jpg" ng-click="changeMainImage('img/photo3.jpg')" alt="" />
			</li>
			<li>
				<img src="img/photo4_thum.jpg" ng-click="changeMainImage('img/photo4.jpg')" alt="" />
			</li>
			<li>
				<img src="img/photo5_thum.jpg" ng-click="changeMainImage('img/photo5.jpg')" alt="" />
			</li>
			<li>
				<img src="img/photo6_thum.jpg" ng-click="changeMainImage('img/photo6.jpg')" alt="" />
			</li>
			<li>
				<img src="img/photo7_thum.jpg" ng-click="changeMainImage('img/photo7.jpg')" alt="" />
			</li>
			<li>
				<img src="img/photo8_thum.jpg" ng-click="changeMainImage('img/photo8.jpg')" alt="" />
			</li>
		</ul>
	</div>
	<div id="main">
		<img ng-src="{{imgSrc}}" src="img/photo1.jpg" alt="" />
	</div>
</div>

main.js

// 初期表示
$scope.imgSrc="img/photo1.jpg";
		
$scope.changeMainImage=function(imgSrc){
	$scope.imgSrc=imgSrc;
};

　#main imgのngSrcに設定したimgSrcに画像パスを設定しています。
　フォルダ一箇所だし何ならファイル名も連番だしでもうちょっとリファクタはできそうですがそこは主題ではないので放置。

アニメーション効果で画像を滑らかに切り替える

　AngularJSでアニメーションを使う場合、angular-animate.jsを個別に読み込む必要があります。

index.html

<script type="application/javascript" src="../angular/angular-animate.js"></script>

main.js

angular.module('sample', ['ngAnimate']).controller('IndexController',
		[ '$scope', function($scope) {} ]);

　アニメーション効果は琴線探査さんを参考にCSSで実装。
　imgタグを二つ用意して交互に切り替えることで実装しました。強引なのではなく柔軟なのだと思っていただければ幸甚(´@ω@｀)

index.html

	<div id="main">
		<img ng-src="{{imgSrc1}}" ng-hidden="sw" ng-show="!sw" src="img/photo1.jpg" alt="" />
		<img ng-src="{{imgSrc2}}" ng-show="sw" ng-hidden="!sw" src="img/photo1.jpg" alt="" />
	</div>

main.js

$scope.changeMainImage=function(imgSrc){
	if($scope.sw){
		$scope.imgSrc1=imgSrc;
		$scope.sw=false;
	}else{
		$scope.imgSrc2=imgSrc;
		$scope.sw=true;
	}
	
};

　CSSで透過アニメーションかけつつ画像二枚を交互に出現させるソース。imgふたつはposition:absoluteに設定して重なるようになってます。
　詳しくはソースコード参照。

画像の追加に対応、スライド式ギャラリーに対応する

　しない
　CSSでスライドアニメーションってどうやるのボンジョルノ(´@ω@｀)