많은 이미지 슬라이드
본문
http://css3.bradshawenterprises.com/cfimg/#cfimg7
에 나오는 이미지 슬라이든인데요
<div id="cf7" class="shadow"> 가 적은 수일 때는 div를 열거하면 된다고 해도
div가 아주 많아서 100개가 넘는다고 하면 아래와 같이 변수로 처리해야 할 텐데요.
그리고 자바스크립트와 css에서도 상응하게 처리해 주어야 하리라고 봅니다.
고수님들의 조언 좀 부탁 드립니다.
<div class="row">
<div class="span 6">
<?php for ($i=1; $i<=100; $i++) { ?>
<div id="cf7_<?=$i?>" class="shadow">
<img class='opaque' src="/img/imgA<?=$i?>.jpg" />
<img src="/img/imgB<?=$i?>.jpg" />
<img src="/img/imgC<?=$i?>.jpg" />
<img src="/img/imgD<?=$i?>.jpg" />
</div>
<?php } ?>
<p id="cf7_controls">
<span class="selected">Image 1</span>
<span>Image 2</span>
<span>Image 3</span>
<span>Image 4</span>
</p>
</div>
<script>
$(document).ready(function() {
$("#cf7_controls").on('click', 'span', function() {
$("#cf7_<?=$i?> img").removeClass("opaque");
var newImage = $(this).index();
$("#cf7_<?=$i?> img").eq(newImage).addClass("opaque");
$("#cf7_controls span").removeClass("selected");
$(this).addClass("selected");
});
});
</script>
<style>
p#cf7_controls {
text-align:center;
}
#cf7_controls span {
padding-right:2em;
cursor:pointer;
}
#cf7_<?=$i?> {
position:relative;
height:281px;
width:450px;
margin:0 auto 10px;
}
#cf7_<?=$i?> img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
#cf7_<?=$i?> img.opaque {
opacity:1;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=1);
}
</style>
답변 2
<img src="이미지 주소" class="cf_1" />
<img src="이미지 주소" class="cf_2" />
<img src="이미지 주소" class="cf_3" />
워처럼 하는것보다
<img src="이미지 주소" class="cf" />
위처럼 같은 형식의 style 이면 class 하나로 하시길 추천 드립니다.
CODINGROBOT 님!
답변 고맙습니다.