码迷,mamicode.com
首页 > 其他好文 > 详细

缩略图轮播

时间:2015-07-10 10:58:23      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:

  
技术分享

 <%--  全景图片--%>         <script type="text/javascript">             var n, interval;             $(document).ready(function () {                 var $div_li = $("div .showSImgBox li");                 $div_li.click(function () {                     var index = $div_li.index(this);                     $(this).addClass("showCurrent").siblings().removeClass();                     var src = $(".showSImgBox li img").eq(index).attr("src");                     $(" div .showBImgBox img").attr("src", src).fadeIn(5000)                 });                 time(0);             });             var n, interval = null;  // n:指定 或 标记当前播放的图片             function time(index) {                 n = index;                 if (interval == null) {                     interval = setInterval("play()", 5000);                 }             }             function play() {                 var count = $(" .showSImgBox li").length;                 n++;                 if (n > count) {                     n = 0;                 }                 $(".showSImgBox li").removeClass("showCurrent");                 $(".showSImgBox li").eq(n).addClass("showCurrent");                 var src = $(".showSImgBox li img").eq(n).attr("src");                 $("div .showBImgBox img").attr("src", src).fadeIn(5000);             }         </script>         <div class="qjShowBox">             <div class="showBImgBox">                 <img alt="" src="images/quanjing.jpg" />                 <%--    <img src="images/qjShowBimg00.jpg" />--%>             </div>             <div class="showSImgBox" id="showSImgBox">                 <ul>                     <asp:Repeater runat="server" ID="rptquanjingsmall">                         <ItemTemplate>                             <li><href="javascript:void(0)">                                 <img src="<%#globalVariables.FileDir+Eval("GlobalPicBig2") %>alt="" width="181px"                                     height="90px" /></a></li>                         </ItemTemplate>                     </asp:Repeater>                 </ul>             </div>         </div>

缩略图轮播

标签:

原文地址:http://www.cnblogs.com/ft-Pavilion/p/4634851.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!