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>