点击小图轮播，点击显示大图

 <script type="text/javascript">         var scrollPic1Index = 0, scrollPic2Index = 0, len = 0, len2 = 0, caseopenlength = 0, caseopenlength2 = 0;         function showScrollPic1(index) {             scrollPic1Index = $(index).index();             $(".caseOpenBox").eq(0).show();             $("#caseOpenContents1 li").eq(scrollPic1Index).show().siblings().hide();         }         function showScrollPic2(index) {             // scrollPic2Index = index;             scrollPic2Index = $(index).index();             $(".caseOpenBox").eq(1).show(); $("#caseOpenContents2 li").eq(scrollPic2Index).show().siblings().hide();         }         function caseOpenContents1Show(m) {             caseopenlength = $("#caseOpenContents1 li").length;             if (m == "+") {                 ++scrollPic1Index;             }             if (m == "-") {                 --scrollPic1Index;             }             if (scrollPic1Index >= caseopenlength)                 scrollPic1Index = 0;             if (scrollPic1Index < 0)                 scrollPic1Index = caseopenlength - 1;             $("#caseOpenContents1 li").eq(scrollPic1Index).show().siblings().hide();         }         function caseOpenContents2Show(m) {             caseopenlength2 = $("#caseOpenContents2 li").length;             if (m == "+") {                 ++scrollPic2Index;             }             if (m == "-") {                 --scrollPic2Index;             }             if (scrollPic2Index >= caseopenlength2)                 scrollPic2Index = 0;             if (scrollPic2Index < 0)                 scrollPic2Index = caseopenlength2 - 1;             $("#caseOpenContents2 li").eq(scrollPic2Index).show().siblings().hide();         }         function firstShow(m) {             len = $("#caseContents1 li").length;             caseopenlength1 = $("#caseOpenContents2 li").length;             if (m == "+") {                 $("#caseContents1 li").eq(0).insertAfter($("#caseContents1 li").eq(len - 1));                 $("#caseOpenContents1 li").eq(0).insertAfter($("#caseOpenContents1 li").eq(caseopenlength - 1));             }             if (m == "-") {                 $("#caseContents1 li").eq(len - 1).insertBefore($("#caseContents1 li").eq(0));                 $("#caseOpenContents1 li").eq(caseopenlength - 1).insertBefore($("#caseOpenContents1 li").eq(0));             }         }         function secondShow(m) {             len2 = $("#caseContents2 li").length;             caseopenlength2 = $("#caseOpenContents2 li").length;             if (m == "+") {                 $("#caseContents2 li").eq(0).insertAfter($("#caseContents2 li").eq(len2 - 1));                 $("#caseOpenContents2 li").eq(0).insertAfter($("#caseOpenContents2 li").eq(caseopenlength2 - 1));             }             if (m == "-") {                 $("#caseContents2 li").eq(len2 - 1).insertBefore($("#caseContents2 li").eq(0));                 $("#caseOpenContents2 li").eq(caseopenlength2 - 1).insertBefore($("#caseOpenContents2 li").eq(0));             }         }     </script>     <style>         #hz6d_kf_icon_1         {             width: 140px;             top: 50px;         }         /*.town         {             overflow: auto;         }*/     </style>

<div class="ContentBox07">         <h2 id="anchor04" class="title04">             应用案例</h2>         <div class="ContentBox07_Contents">             <div class="caseContents">                 <div class="caseOpenBox" style="display: none;">                     <p>                         <a href="javascript:void(0);" onclick="$(this).parent().parent().hide();">                             <img src="images/caseClose.png" /></a></p>                     <p class="clear">                     </p>                     <div class="caseOpenBox00">                         <a href="javascript:void(0);" class="caseOpen_arrowLe" onclick="caseOpenContents1Show('-')">                             <img src="images/caseOpen_arrowLe.png" /></a>                         <div class="caseOpenContents" id="caseOpenContents1">                             <ul>                                 <asp:Repeater ID="rptBigPic1" runat="server">                                     <ItemTemplate>                                         <li><a href="javascript:void(0);">                                             <img src="/Files/HeatPump/<%# Eval("Bigpic") %>" style="width: 807px; height: 485px;" /></a></li>                                     </ItemTemplate>                                 </asp:Repeater>                             </ul>                         </div>                         <a href="javascript:void(0);" class="caseOpen_arrowRi" onclick="caseOpenContents1Show('+')">                             <img src="images/caseOpen_arrowRi.png" /></a>                     </div>                 </div>                 <div class="caseOpenBox" style="display: none;">                     <p>                         <a href="javascript:void(0)" onclick="$(this).parent().parent().hide();">                             <img src="images/caseClose.png" /></a></p>                     <p class="clear">                     </p>                     <div 

转载于:https://www.cnblogs.com/ft-Pavilion/p/4800797.html