圆形内容与jquery动态加载图像传送带

Question

我工作的asp.net和jquery。

我有jQuery的一个圆形转盘的内容在我的静态图像（即）我手动插入的图像css.But应用程序，我需要使用SQLSERVER database.Please给一些suggession使其动态。

CODE：

.ca-item-2 .ca-icon 
    { 
    background-image:url(../Database/images/f1.jpg); 
    } 

这是在我现在插入图像的方式。

这是工作代码：

 <div class="container"> 
     <div class="header"> 
      <a     href="http://tympanus.net/Tutorials/PortfolioImageNavigation/"><span>&laquo; Previous Demo: </span>Portfolio Image Navigation</a> 
      <span class="right_ab"> 
       <a href="http://cyberella74.deviantart.com/art/Archigraphs-Animals-Icons-139629985" target="_blank">Animal Icons by Cyberella</a> 
       <a href="http://tympanus.net/codrops/2011/08/16/circular-content-carousel/"><strong>back to the Codrops post</strong></a> 
      </span> 
     </div> 
     <h1>Circular Content Carousel<span>with jQuery</span></h1> 
     <div id="ca-container" class="ca-container"> 
      <div class="ca-wrapper"> 
       <div class="ca-item ca-item-1"> 
        <div class="ca-item-main"> 
         <div class="ca-icon"></div> 
         <!--<h3>Stop factory farming</h3> 
         <h4> 
          <span class="ca-quote">&ldquo;</span> 
          <span>The greatness of a nation and its moral progress can be judged by the way in which its animals are treated.</span> 
         </h4>--> 
          <a href="#" class="ca-more">more...</a> 
        </div> 
        <div class="ca-content-wrapper" runat="server"> 
         <div class="ca-content"> 
          <h6>Animals are not commodities</h6> 
          <a href="#" class="ca-close">close</a> 
          <div class="ca-content-text"> 
           <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p> 
           <!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p> 
           <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>--> 
          </div> 
          <ul> 
           <li><a href="#">Read more</a></li> 
           <li><a href="#">Share this</a></li> 
           <li><a href="#">Become a member</a></li> 
           <li><a href="#">Donate</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
       <div class="ca-item ca-item-2"> 
        <div class="ca-item-main"> 
         <div class="ca-icon"></div> 
         <!--<h3>Respect Life &amp; Rights</h3> 
         <h4> 
          <span class="ca-quote">&ldquo;</span> 
          <span>I hold that the more helpless a creature, the more entitled it is to protection by man from the cruelty of man.</span> 
         </h4>--> 
          <a href="#" class="ca-more">more...</a> 
        </div> 
        <div id="ca-content-wrapper"> 
         <div id="ca-content"> 
          <h6>Would you eat your dog?</h6> 
          <a href="#" id="ca-close">close</a> 
          <div id="ca-content-text"> 
           <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p> 
           <!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p> 
           <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>--> 
          </div> 
          <ul> 
           <li><a href="#">Read more</a></li> 
           <li><a href="#">Share this</a></li> 
           <li><a href="#">Become a member</a></li> 
           <li><a href="#">Donate</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
       <div id="ca-item ca-item-3"> 
        <div id="ca-item-main"> 
         <div id="ca-icon"></div> 
         <!--<h3>Become 100% meat-free</h3> 
         <h4> 
          <span id="ca-quote">&ldquo;</span> 
          <span>I feel that spiritual progress does demand at some stage that we should cease to kill our fellow creatures for the satisfaction of our bodily wants.</span> 
         </h4>--> 
          <a href="#" id="ca-more">more...</a> 
        </div> 
        <div id="ca-content-wrapper"> 
         <div id="ca-content"> 
          <h6>You can change the world</h6> 
          <a href="#" id="ca-close">close</a> 
          <div id="ca-content-text"> 
           <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p> 
           <!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p> 
           <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>--> 
          </div> 
          <ul> 
           <li><a href="#">Read more</a></li> 
           <li><a href="#">Share this</a></li> 
           <li><a href="#">Become a member</a></li> 
           <li><a href="#">Donate</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
       <div class="ca-item ca-item-4"> 
        <div class="ca-item-main"> 
         <div class="ca-icon"></div> 
         <!--<h3>Make a difference</h3> 
         <h4> 
          <span id="ca-quote">&ldquo;</span> 
          <span>A man is but the product of his thoughts what he thinks, he becomes.</span> 
         </h4>--> 
          <a href="#" class="ca-more">more...</a> 
        </div> 
        <div class="ca-content-wrapper"> 
         <div class="ca-content"> 
          <h6>Think globally, act locally</h6> 
          <a href="#" class="ca-close">close</a> 
          <div class="ca-content-text"> 
           <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p> 
           <!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p> 
           <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>--> 
          </div> 
          <ul> 
           <li><a href="#">Read more</a></li> 
           <li><a href="#">Share this</a></li> 
           <li><a href="#">Become a member</a></li> 
           <li><a href="#">Donate</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
       <div class="ca-item ca-item-5"> 
        <div class="ca-item-main"> 
         <div class="ca-icon"></div> 
         <!--<h3>Say no to killing</h3> 
         <h4> 
          <span class="ca-quote">&ldquo;</span> 
          <span>A weak man is just by accident. A strong but non-violent man is unjust by accident.</span> 
         </h4>--> 
          <a href="#" class="ca-more">more...</a> 
        </div> 
        <div class="ca-content-wrapper"> 
         <div class="ca-content"> 
          <h6>Animals have rights, too!</h6> 
          <a href="#" class="ca-close">close</a> 
          <div class="ca-content-text"> 
           <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p> 
           <!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p> 
           <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>--> 
          </div> 
          <ul> 
           <li><a href="#">Read more</a></li> 
           <li><a href="#">Share this</a></li> 
           <li><a href="#">Become a member</a></li> 
           <li><a href="#">Donate</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
       <div class="ca-item ca-item-6"> 
        <div class="ca-item-main"> 
         <div class="ca-icon"></div> 
         <!--<h3>Don't believe the lies</h3> 
         <h4> 
          <span class="ca-quote">&ldquo;</span> 
          <span>An error does not become truth by reason of multiplied propagation, nor does truth become error because nobody sees it.</span> 
         </h4>--> 
          <a href="#" class="ca-more">more...</a> 
        </div> 
        <div class="ca-content-wrapper"> 
         <div class="ca-content"> 
          <h6>How essential is meat?</h6> 
          <a href="#" class="ca-close">close</a> 
          <div class="ca-content-text"> 
           <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p> 
           <!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p> 
           <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>--> 
          </div> 
          <ul> 
           <li><a href="#">Read more</a></li> 
           <li><a href="#">Share this</a></li> 
           <li><a href="#">Become a member</a></li> 
           <li><a href="#">Donate</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
       <div class="ca-item ca-item-7"> 
        <div class="ca-item-main"> 
         <div class="ca-icon"></div> 
         <!--<h3>Save the planet</h3> 
         <h4> 
          <span class="ca-quote">&ldquo;</span> 
          <span>A small body of determined spirits fired by an unquenchable faith in their mission can alter the course of history.</span> 
         </h4>--> 
          <a href="#" class="ca-more">more...</a> 
        </div> 
        <div class="ca-content-wrapper"> 
         <div class="ca-content"> 
          <h6>Collateral damage?</h6> 
          <a href="#" class="ca-close">close</a> 
          <div class="ca-content-text"> 
           <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p> 
           <!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p> 
           <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>--> 
          </div> 
          <ul> 
           <li><a href="#">Read more</a></li> 
           <li><a href="#">Share this</a></li> 
           <li><a href="#">Become a member</a></li> 
           <li><a href="#">Donate</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
       <div class="ca-item ca-item-8"> 
        <div class="ca-item-main"> 
         <div class="ca-icon"></div> 
         <!--<h3>It's time to move on</h3> 
         <h4> 
          <span class="ca-quote">&ldquo;</span> 
          <span>A nation's culture resides in the hearts and in the soul of its people.</span> 
         </h4>--> 
          <a href="#" class="ca-more">more...</a> 
        </div> 
        <div class="ca-content-wrapper"> 
         <div class="ca-content"> 
          <h6>Let's finally become humans</h6> 
          <a href="#" class="ca-close">close</a> 
          <div class="ca-content-text"> 
           <p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p> 
           <!--<p>When, while the lovely valley teems with vapour around me, and the meridian sun strikes the upper surface of the impenetrable foliage of my trees, and but a few stray gleams steal into the inner sanctuary, I throw myself down among the tall grass by the trickling stream;</p> 
           <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>--> 
          </div> 
          <ul> 
           <li><a href="#">Read more</a></li> 
           <li><a href="#">Share this</a></li> 
           <li><a href="#">Become a member</a></li> 
           <li><a href="#">Donate</a></li> 
          </ul> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
     <h5>Quotes by Mohandas Gandhi</h5> 
    </div> 

Answer 1

你可能会更好使用中继器，并使用像jCarouselLite一个jQuery插件，旋转木马创建你的圆形转盘插入您的图片网页本身。

Answer 2

使用PHP和数据库连接;我得到了你想要的。

查询：（SQL查询应调整到你的数据库是如何工作的）

$sth = $dbh->prepare("SELECT * FROM Carousel"); 
    $sth->execute(); 
    $carousel = $sth->fetchAll(PDO::FETCH_ASSOC); 

这里是PHP：

（你的名字从你的databasebetween表名称标记[ 'ID']等）

<div class="container"> 
    <div id="ca-container" class="ca-container"> 
     <div class="ca-wrapper"> 
     <? foreach ($carousel as $carouselrow) { ?> 
      <div class="ca-item ca-item-<? echo $carouselrow['ID']; ?>"> 
       <div class="ca-item-main"> 
        <div class="ca-icon" style="background-image:url('<? echo $carouselrow['Image']; ?>')"></div> 
        <h3><? echo $carouselrow['Title']; ?></h3> 
        <h4> 
         <span class="ca-quote">&ldquo;</span> 
         <span><? echo $carouselrow['Subtitle']; ?></span> 
        </h4> 
        <a href="#" class="ca-more">Lees meer...</a> 
       </div> 
       <div class="ca-content-wrapper"> 
        <div class="ca-content"> 
         <h6><? echo $carouselrow['Title']; ?></h6> 
         <a href="#" class="ca-close">Sluit</a> 
         <div class="ca-content-text"> 
          <p><? echo $carouselrow['Content']; ?></p> 
         </div> 
        </div> 
       </div> 
      </div>           
     <? } ?> 
    </div> 
</div>