グローバル関数に変数を定義せず、ローカル関数で(var current=0;とvar num=0;)を入れるためにはカプセル化を用いてスライドショーを実装しようと考えてます。(ローカル関数で変数を宣言するなら、カプセル化を用いれば実装はできるとアドバイスをいただきました。)
カプセル化を用いて書いてみましたが、どこを修正すれな良いかが分からなかったため、教えていただきたいです。
現状のエラー
今はコンソールでslideNextとslidePrevが定義されてないとエラーが表示されている状態です。
エラーが出ているhtmlとcssファイル
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 6<meta name="format-detection" content="telephone=no"> 7<title></title> 8<link rel="stylesheet" href="css/reset.css"> 9<link rel="stylesheet" href="css/base.css"> 10<link rel="stylesheet" href="css/style.css"> 11</head> 12<body> 13<div class="wrapper"> 14 <div class="slider-wrap"> 15 <div class="slider-area"> 16 <ul class="slider-list clearfix"> 17 <li><img src="http://placehold.jp/150x150.png" alt=""></li> 18 <li><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></li> 19 <li><img src="http://placehold.jp/150x150.png" alt=""></li> 20 <li><img src="http://placehold.jp/3d4070/ffffff/150x150.png" alt=""></li> 21 </ul> 22 <button type="button" class="slider-ctrl-btn prev" data-ctrl="prev"></button> 23 <button type="button" class="slider-ctrl-btn next" data-ctrl="next"></button> 24 </div> 25 </div> 26</div> 27<script type="text/javascript" src="js/jquery.js"></script> 28<script type="text/javascript"> 29/** 30 * (説明) 31 * @type {number} current ←クリックしたときの初期値 32 * @type {number} num ←要素の幅を取得した後に幅の数値を入れる変数 33 * @type {string} numLength ←画像の位置情報を取得するための要素の個数 34 * @type {number} numWidth ←要素の幅 35 * 36 * 37**/ 38 39$(function(){ 40 $('.next').on('click',function(){ 41 slideNext(); 42 }); 43 44 $('.prev').on('click',function(){ 45 slidePrev(); 46 }); 47 48 function slider(){ 49 var current=0; 50 var num=0; 51 52 function slideNext(){ 53 var numWidth=$('.slider-list img').eq(current).width(); 54 var numLength=$('.slider-list img').length; 55 current++; 56 if(current<numLength){ 57 num-=numWidth; 58 }else{ 59 num=0; 60 current=0; 61 } 62 $('.slider-list').animate({left:num}); 63 } 64 return slideNext; 65 66 function slidePrev(){ 67 var numWidth=$('.slider-list img').eq(current).width(); 68 var numLength=$('.slider-list img').length; 69 current--; 70 if(current>=0){ 71 num+=numWidth; 72 }else{ 73 num=-$('.slider-list img:not(:last)').map(function(){ 74 return $(this).width(); 75 }).get().reduce((x,y)=>x+y); 76 current=numLength-1; 77 } 78 $('.slider-list').animate({left:num}); 79 } 80 return slidePrev; 81 } 82}); 83</script> 84</body> 85</html>
css
1.slider-wrap { 2 width: 600px; 3 padding: 10px; 4 margin: 0 auto; 5 border-radius: 10px; 6 background-color: #DDD; 7 box-shadow: 0 2px 5px rgba(50, 50, 50, 0.4); 8} 9.slider-area { 10 position: relative; 11 width: 600px; 12 height: 300px; 13 background-color: #FFF; 14 overflow: hidden; 15} 16.slider-list { 17 position: absolute; 18 top: 0; 19 left: 0; 20 width: 2400px; 21 height: 300px; 22} 23.slider-list > li { float: left; } 24.slider-ctrl-btn { 25 position: absolute; 26 top: 50%; 27 width: 30px; 28 height: 30px; 29 margin-top: -15px; 30 cursor: pointer; 31 border-radius: 15px; 32 background-color: rgba(255, 255, 255, 0.5); 33} 34.slider-ctrl-btn.prev { left: 30px; } 35.slider-ctrl-btn.next { right: 30px; }
回答2件
あなたの回答
tips
プレビュー