スライドショーに色々な機能を付けてみた。

詳細はサンプルコードにコメントアウトしました。サンプルコードの実行結果はこちら

CSSのサンプルコードは以下です。
今回はコードが長いので、CSSとHTMLに分けています。

	*{margin:0;padding:0;}
	
	.slideShow{
		background-color:black;
		
		/* スライドさせる画像の高さ */
		height:540px;

        /*
        スライドで使用している画像の幅が
        320pxなので最大値と最小値を設定
        
        異なるサイズの画像を使う場合は、
        ここを変更する
        */
        max-width:960px;        
		min-width:960px;

        /* はみ出すものがあれば隠す */
		overflow:hidden;
        /* 子要素でposition:absoluteを設定するために行う */
		position:relative;}
	
		/* スライドショー全体を囲む箱に適用する 
        class slideShowと同じ幅、高さ*/
		.slideShowSlides{
			width:100%;
			height:100%;
			position:absolute;}
	
			/* 個々のスライドショーに適用する */
			.slideShowSlides .slide{
				width:100%;
				height:100%;
				position:absolute;
                overflow:hidden;}

				/* スライドショーの画像に適用する */
				.slideShowSlides .slide img{
					position:absolute;}
    /* class slodeShowNav　aと
       class slideShowIndicater a の
    クリックするときに使用する画像がはみ出したき
　　はみ出した部分は隠すように設定する　*/
	.slideShowNav a,
	.slideShowIndicator a{
        overflow:hidden;}
	
	.slideShowNav a:before,
	.slideShowIndicator a:before{
        
        /* スライドショーで使う
        画像の設定を行っている
        フォントをaタグの直前に使っている場合は
        高さ０にしている　*/
		content:url(../../img/sprites.png);
		display:inline-block;
		font-size:0;
		line-height:0px;}
	
	/*　スライドショーのナビの設定　*/
	.slideShowNav a{
        /* スライドショー端に
        ナビボタンを表示させるための設定 
        72px はナビのボタン「<」「>」の幅 */
		position:absolute;
		top:50%;
		left:50%;
		width:72px;
		height:72px;
		margin-top:-36px;}
	
		.slideShowNav a.prev{
			margin-left:-408px;}

        /*　表示させるための画像をずらすための設定 */
		.slideShowNav a.prev:before{
			margin-top:-20px;}

		.slideShowNav a.next{
			margin-left:346px;}

        /*　表示させるための画像をずらすための設定 */
		.slideShowNav a.next:before{
			margin-left:-80px;
			margin-top:-20px;}

		.slideShowNav a.disabled{
			display:none;}
	
	/* インジケーターの設定 */
	.slideShowIndicator{
		height:16px;        
		position:absolute;
        left:0;
		right:0;
		bottom:30px;        
		text-align:center;}
	
    .slideShowIndicator a{
        display:inline-block;
        width:16px;
        height:16px;
        margin-left:3px;
        margin-right:3px;}

    .slideShowIndicator a.active{
        cursor:default;}

    /*　表示させるための画像をずらすための設定
    選んでいないスライドの「〇」を表示する   */
    .slideShowIndicator a:before{
        margin-left:-110px;}

/*　表示させるための画像をずらすための設定
    選んでいるスライドの「●」を表示する   */
    .slideShowIndicator a.active:before{
        margin-left:-130px;}
	
    /* ブラウザでJavaScriptを無効にしている場合 */
	.no-js .slideShow{height:auto;}
	.no-js .slideShowSlide{
		position:static;
		height:auto;}
	.no-js .slideShow .slide{
		position:static;
		height:auto;
		display:block;}

	.no-js .slideShowSlide .slide img{
		position:static;
		margin:auto;}

	.no-js .slideShowNav,
	.no-js .slideShowIndicator{display:none;}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

*{margin:0;padding:0;}

.slideShow{

background-color:black;

/* スライドさせる画像の高さ */

height:540px;

スライドで使用している画像の幅が

320pxなので最大値と最小値を設定

異なるサイズの画像を使う場合は、

ここを変更する

max-width:960px;

min-width:960px;

/* はみ出すものがあれば隠す */

overflow:hidden;

/* 子要素でposition:absoluteを設定するために行う */

position:relative;}

/* スライドショー全体を囲む箱に適用する

class slideShowと同じ幅、高さ*/

.slideShowSlides{

width:100%;

height:100%;

position:absolute;}

/* 個々のスライドショーに適用する */

.slideShowSlides .slide{

width:100%;

height:100%;

position:absolute;

overflow:hidden;}

/* スライドショーの画像に適用する */

.slideShowSlides .slide img{

position:absolute;}

/* class slodeShowNav　aと

class slideShowIndicater a の

クリックするときに使用する画像がはみ出したき

　　はみ出した部分は隠すように設定する　*/

.slideShowNav a,

.slideShowIndicator a{

overflow:hidden;}

.slideShowNav a:before,

.slideShowIndicator a:before{

/* スライドショーで使う

画像の設定を行っている

フォントをaタグの直前に使っている場合は

高さ０にしている　*/

content:url(../../img/sprites.png);

display:inline-block;

font-size:0;

line-height:0px;}

/*　スライドショーのナビの設定　*/

.slideShowNav a{

/* スライドショー端に

ナビボタンを表示させるための設定

72px はナビのボタン「<」「>」の幅 */

position:absolute;

top:50%;

left:50%;

width:72px;

height:72px;

margin-top:-36px;}

.slideShowNav a.prev{

margin-left:-408px;}

/*　表示させるための画像をずらすための設定 */

.slideShowNav a.prev:before{

margin-top:-20px;}

.slideShowNav a.next{

margin-left:346px;}

/*　表示させるための画像をずらすための設定 */

.slideShowNav a.next:before{

margin-left:-80px;

margin-top:-20px;}

.slideShowNav a.disabled{

display:none;}

/* インジケーターの設定 */

.slideShowIndicator{

height:16px;

position:absolute;

left:0;

right:0;

bottom:30px;

text-align:center;}

.slideShowIndicator a{

display:inline-block;

width:16px;

height:16px;

margin-left:3px;

margin-right:3px;}

.slideShowIndicator a.active{

cursor:default;}

/*　表示させるための画像をずらすための設定

選んでいないスライドの「〇」を表示する */

.slideShowIndicator a:before{

margin-left:-110px;}

/*　表示させるための画像をずらすための設定

選んでいるスライドの「●」を表示する */

.slideShowIndicator a.active:before{

margin-left:-130px;}

/* ブラウザでJavaScriptを無効にしている場合 */

.no-js .slideShow{height:auto;}

.no-js .slideShowSlide{

position:static;

height:auto;}

.no-js .slideShow .slide{

position:static;

height:auto;

display:block;}

.no-js .slideShowSlide .slide img{

position:static;

margin:auto;}

.no-js .slideShowNav,

.no-js .slideShowIndicator{display:none;}

HTMLのサンプルコードは以下です。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>スライドショーに色々機能を付けてみる</title>
   
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/ui/jquery-ui.js"></script>
    <link type="text/css" rel="stylesheet" href="css/style.css">

</head>
<body>
<div class="slideShow">
    <div class="slideShowSlides">
        <a href="#" class="slide"><img src="../img/b1.JPG"></a>
        <a href="#" class="slide"><img src="../img/b2.JPG"></a>
        <a href="#" class="slide"><img src="../img/b3.JPG"></a>
        <a href="#" class="slide"><img src="../img/b4.JPG"></a>
    </div>
    <div class="slideShowNav">
        <a href="#" class="prev">Prev</a>
        <a href="#" class="next">Next</a>
    </div>
    <div class="slideShowIndicator"></div>
</div>
    
<script>
$(function(){
    $(".slideShow").each(function(){
        
        //変数宣言
        var 
        $container = $(this),
        $slideObj  = $container.find(".slideShowSlides"),
        $slide     = $slideObj.find(".slide"),
        $nav       = $container.find(".slideShowNav"),
        $indicator = $container.find(".slideShowIndicator"),
            
        slideNum      = $slide.length,
        indicatorHTML = "",
        currentNum    = 0,
        DURATION      = 400,
        easing        = "easeInOutExpo",
        interval      = 2500,
        timer;
        
        /*
        HTML要素の配置、生成、挿入
        */
        
        /*
        .slideの数だけループします。
        変数insicatorHTMLに文字列を格納していく
        今回は画像4枚なので、4回ループ
        */
        $slide.each(function(i){
           $(this).css({left:100 * i + "%" });
            indicatorHTML += '<a href="#">' + ( i + 1 ) + '</a>';
        });
        $indicator.html(indicatorHTML);
        
        /*
            好きなスライドを表示させる関数
        */
        function showSlide( index ){
            
            //表示させたいスライドの位置に合わせて移動
            $slideObj.animate({
                left: -100 * index + "%" },
                DURATION,easing);
            
            //現在表示しているスライドを示すインデックスを更新
            currentNum = index;
            
            upDateNav();
        }
        function upDateNav(){
            
            var 
            $navPrev = $nav.find(".prev"),
            $navNext = $nav.find(".next");
            
            //一番目のスライド表示中なら、「prev」ボタンは表示しない
            if( currentNum === 0 ){
                $navPrev.addClass("disabled");
            }else{
                $navPrev.removeClass("disabled");
            }

            //最後のスライド表示中なら、「next」ボタンは表示しない
            if( currentNum === ( slideNum - 1 ) ){
                $navNext.addClass("disabled");
            }else{
                $navNext.removeClass("disabled");
            }
            
            $indicator.find("a").removeClass("active")
            .eq( currentNum ).addClass("active");
        }
        
        function startTimer(){
            
            /*
                タイマーを起動して
                変数intervalミリ秒毎に
                function(){...]の処理を行う
            */
            timer = setInterval(function(){
                
            //次の画像番号(インデックスの番号)を格納
                var nextIndex = 
                    ( currentNum + 1 ) % slideNum;
                
                //次の画像を表示する
                showSlide( nextIndex );
            },interval);
        }
        
        function stopTimer(){clearInterval(timer);}
        
        /*
        イベント登録
        画像上に表示されている「<」、「>」ボタンを
        クリックしたときの処理はここで行う
        */
        $nav.on("click","a",function(event){
            
            //クリックされていない状態に戻す
            event.preventDefault();
            
            /*
            クリックされたのが class="prev"のaタグで
            あるかどうか判定する
            */
            if( $(this).hasClass("prev") ){
                /*
                    class="prev"のaタグなら
                    前のスライドの表示する
                */
                showSlide( currentNum - 1 );
            }else{
                /*
                    class="prev"のaタグではない
                    (class="next"のaタグなら)
                    次のスライドの表示する
                */
                showSlide( currentNum + 1 );
            }
        });

        /*
        インジケーターのリンクがクリックされたとき
        該当するスライドを表示させる
        */
        
        $indicator.on("click","a",function(event){
            
            /*
            通常クリックの動作を取り消している
            */
            event.preventDefault();
            
            /*
                クリックされた要素が「active」classを
                もっていないかどうか判定
                
            */
            if( !$(this).hasClass("active") ){
                /*
                    「active」classを持っていない場合
                    クリックしたインジケーターに該当する
                    画像を表示する
                */
                showSlide( $(this).index() );
            }
        });
        
        /*
            スライドを囲っているDivタグの中に
            マウスを乗せたら、タイマーストップして
            時の経過に伴う関数の実行をやめている
            
            逆に、マウスがDivタグの外にいったら
            再び自動でスライドさせる関数を実行するように
            している
        */
        $container.on({
           mouseenter: stopTimer,
            mouseleave: startTimer
        });
        
        /*
            一番最初　1枚目のスライドを表示
        */
        showSlide( currentNum );
        
        /*
            自動でスライドさせるためにタイマーを起動
        */
        startTimer();
    });
});
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

<!doctype html>

<html>

<head>

<title>スライドショーに色々機能を付けてみる</title>

</head>

<body>

</div>

</div>

</div>

$(function(){

$(".slideShow").each(function(){

//変数宣言

var

$container = $(this),

$slideObj = $container.find(".slideShowSlides"),

$slide = $slideObj.find(".slide"),

$nav = $container.find(".slideShowNav"),

$indicator = $container.find(".slideShowIndicator"),

slideNum = $slide.length,

indicatorHTML = "",

currentNum = 0,

DURATION = 400,

easing = "easeInOutExpo",

interval = 2500,

timer;

HTML要素の配置、生成、挿入

.slideの数だけループします。

変数insicatorHTMLに文字列を格納していく

今回は画像4枚なので、4回ループ

$slide.each(function(i){

$(this).css({left:100 * i + "%" });

indicatorHTML += '<a href="#">' + ( i + 1 ) + '</a>';

});

$indicator.html(indicatorHTML);

好きなスライドを表示させる関数

function showSlide( index ){

//表示させたいスライドの位置に合わせて移動

$slideObj.animate({

left: -100 * index + "%" },

DURATION,easing);

//現在表示しているスライドを示すインデックスを更新

currentNum = index;

upDateNav();

}

function upDateNav(){

var

$navPrev = $nav.find(".prev"),

$navNext = $nav.find(".next");

//一番目のスライド表示中なら、「prev」ボタンは表示しない

if( currentNum === 0 ){

$navPrev.addClass("disabled");

}else{

$navPrev.removeClass("disabled");

}

//最後のスライド表示中なら、「next」ボタンは表示しない

if( currentNum === ( slideNum - 1 ) ){

$navNext.addClass("disabled");

}else{

$navNext.removeClass("disabled");

}

$indicator.find("a").removeClass("active")

.eq( currentNum ).addClass("active");

}

function startTimer(){

タイマーを起動して

変数intervalミリ秒毎に

function(){...]の処理を行う

timer = setInterval(function(){

//次の画像番号(インデックスの番号)を格納

var nextIndex =

( currentNum + 1 ) % slideNum;

//次の画像を表示する

showSlide( nextIndex );

},interval);

}

function stopTimer(){clearInterval(timer);}

イベント登録

画像上に表示されている「<」、「>」ボタンを

クリックしたときの処理はここで行う

$nav.on("click","a",function(event){

//クリックされていない状態に戻す

event.preventDefault();

クリックされたのが class="prev"のaタグで

あるかどうか判定する

if( $(this).hasClass("prev") ){

class="prev"のaタグなら

前のスライドの表示する

showSlide( currentNum - 1 );

}else{

class="prev"のaタグではない

(class="next"のaタグなら)

次のスライドの表示する

showSlide( currentNum + 1 );

}

});

インジケーターのリンクがクリックされたとき

該当するスライドを表示させる

$indicator.on("click","a",function(event){

通常クリックの動作を取り消している

event.preventDefault();

クリックされた要素が「active」classを

もっていないかどうか判定

if( !$(this).hasClass("active") ){

「active」classを持っていない場合

クリックしたインジケーターに該当する

画像を表示する

showSlide( $(this).index() );

}

});

スライドを囲っているDivタグの中に

マウスを乗せたら、タイマーストップして

時の経過に伴う関数の実行をやめている

逆に、マウスがDivタグの外にいったら

再び自動でスライドさせる関数を実行するように

している

$container.on({

mouseenter: stopTimer,

mouseleave: startTimer

});

一番最初　1枚目のスライドを表示

showSlide( currentNum );

自動でスライドさせるためにタイマーを起動

startTimer();

});

</script>

</body>

</html>

参考サイト：jQuery最高の教科書
こちらを参考にしています。
アイコンやインディケータの画像はそこより引用し
コードも上記のリンクを参考に作成しました。