• 点击小图轮播,点击显示大图


     <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
            {
                 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="displaynone;">
                        <p>
                            <href="javascript:void(0);" onclick="$(this).parent().parent().hide();">
                                <img src="images/caseClose.png" /></a></p>
                        <class="clear">
                        </p>
                        <div class="caseOpenBox00">
                            <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><href="javascript:void(0);">
                                                <img src="/Files/HeatPump/<%# Eval("Bigpic") %>style="width807pxheight485px;" /></a></li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <href="javascript:void(0);" class="caseOpen_arrowRi" onclick="caseOpenContents1Show('+')">
                                <img src="images/caseOpen_arrowRi.png" /></a>
                        </div>
                    </div>
                    <div class="caseOpenBox" style="displaynone;">
                        <p>
                            <href="javascript:void(0)" onclick="$(this).parent().parent().hide();">
                                <img src="images/caseClose.png" /></a></p>
                        <class="clear">
                        </p>
                        <div class="caseOpenBox00">
                            <href="javascript:void(0);" class="caseOpen_arrowLe" onclick="caseOpenContents2Show('-')">
                                <img src="images/caseOpen_arrowLe.png" /></a>
                            <div class="caseOpenContents" id="caseOpenContents2">
                                <ul>
                                    <asp:Repeater ID="rptBigPic2" runat="server">
                                        <ItemTemplate>
                                            <li><href="javascript:void(0);">
                                                <img src="/Files/HeatPump/<%# Eval("Bigpic") %>style="width807pxheight485px;" /></a></li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <href="javascript:void(0);" class="caseOpen_arrowRi" onclick="caseOpenContents2Show('+')">
                                <img src="images/caseOpen_arrowRi.png" /></a>
                        </div>
                    </div>
                    <div class="caseBox">
                        <h3>
                            <img src="images/caseTitle00.jpg" /></h3>
                        <div class="caseBox00">
                            <href="javascript:" class="arrowLe" id="caseContents1_left">
                                <img src="images/arrowLe.png" onclick="firstShow('-')" /></a>
                            <div class="caseContents" id="caseContents1">
                                <ul>
                                    <asp:Repeater ID="rptCase" runat="server">
                                        <ItemTemplate>
                                            <li onclick="showScrollPic1(this);"><href="javascript:void(0);">
                                                <img src="/Files/HeatPump/<%# Eval("Smallpic") %>style="width259pxheight155px;" /></a>
                                                <class="caseDetails">
                                                    安装地点:<%# Eval("InstallationAddress")%><br />
                                                    用户户型:<%# Eval("InstallDoor")%><br />
                                                    产品型号:<%# Eval("ProductModel")%><br />
                                                    使用人数:日常<%# Eval("UserNum")%>人用水
                                                </p>
                                            </li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <href="javascript:" class="arrowRi" id="caseContents1_right">
                                <img src="images/arrowRi.png" onclick="firstShow('+')" /></a>
                        </div>
                    </div>
                    <div class="caseBox">
                        <h3>
                            <img src="images/caseTitle01.jpg" /></h3>
                        <div class="caseBox00">
                            <href="javascript:" class="arrowLe" id="caseContents2_left">
                                <img src="images/arrowLe.png" onclick="secondShow('-')" /></a>
                            <div class="caseContents" id="caseContents2">
                                <ul>
                                    <asp:Repeater ID="rptCase2" runat="server">
                                        <ItemTemplate>
                                            <li onclick="showScrollPic2(this);"><href="javascript:void(0);">
                                                <img src="/Files/HeatPump/<%# Eval("Smallpic") %>style="width259pxheight155px;" /></a>
                                                <class="caseDetails">
                                                    安装地点:<%# Eval("InstallationAddress")%><br />
                                                    用户户型:<%# Eval("InstallDoor")%><br />
                                                    产品型号:<%# Eval("ProductModel")%><br />
                                                    使用人数:日常<%# Eval("UserNum")%>人用水
                                                </p>
                                            </li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <href="javascript:" class="arrowRi" id="caseContents2_right">
                                <img src="images/arrowRi.png" onclick="secondShow('+')" /></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    <div class="ContentBox07">
            <h2 id="anchor04" class="title04">
                应用案例</h2>
            <div class="ContentBox07_Contents">
                <div class="caseContents">
                    <div class="caseOpenBox" style="displaynone;">
                        <p>
                            <href="javascript:void(0);" onclick="$(this).parent().parent().hide();">
                                <img src="images/caseClose.png" /></a></p>
                        <class="clear">
                        </p>
                        <div class="caseOpenBox00">
                            <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><href="javascript:void(0);">
                                                <img src="/Files/HeatPump/<%# Eval("Bigpic") %>style="width807pxheight485px;" /></a></li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <href="javascript:void(0);" class="caseOpen_arrowRi" onclick="caseOpenContents1Show('+')">
                                <img src="images/caseOpen_arrowRi.png" /></a>
                        </div>
                    </div>
                    <div class="caseOpenBox" style="displaynone;">
                        <p>
                            <href="javascript:void(0)" onclick="$(this).parent().parent().hide();">
                                <img src="images/caseClose.png" /></a></p>
                        <class="clear">
                        </p>
                        <div class="caseOpenBox00">
                            <href="javascript:void(0);" class="caseOpen_arrowLe" onclick="caseOpenContents2Show('-')">
                                <img src="images/caseOpen_arrowLe.png" /></a>
                            <div class="caseOpenContents" id="caseOpenContents2">
                                <ul>
                                    <asp:Repeater ID="rptBigPic2" runat="server">
                                        <ItemTemplate>
                                            <li><href="javascript:void(0);">
                                                <img src="/Files/HeatPump/<%# Eval("Bigpic") %>style="width807pxheight485px;" /></a></li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <href="javascript:void(0);" class="caseOpen_arrowRi" onclick="caseOpenContents2Show('+')">
                                <img src="images/caseOpen_arrowRi.png" /></a>
                        </div>
                    </div>
                    <div class="caseBox">
                        <h3>
                            <img src="images/caseTitle00.jpg" /></h3>
                        <div class="caseBox00">
                            <href="javascript:" class="arrowLe" id="caseContents1_left">
                                <img src="images/arrowLe.png" onclick="firstShow('-')" /></a>
                            <div class="caseContents" id="caseContents1">
                                <ul>
                                    <asp:Repeater ID="rptCase" runat="server">
                                        <ItemTemplate>
                                            <li onclick="showScrollPic1(this);"><href="javascript:void(0);">
                                                <img src="/Files/HeatPump/<%# Eval("Smallpic") %>style="width259pxheight155px;" /></a>
                                                <class="caseDetails">
                                                    安装地点:<%# Eval("InstallationAddress")%><br />
                                                    用户户型:<%# Eval("InstallDoor")%><br />
                                                    产品型号:<%# Eval("ProductModel")%><br />
                                                    使用人数:日常<%# Eval("UserNum")%>人用水
                                                </p>
                                            </li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <href="javascript:" class="arrowRi" id="caseContents1_right">
                                <img src="images/arrowRi.png" onclick="firstShow('+')" /></a>
                        </div>
                    </div>
                    <div class="caseBox">
                        <h3>
                            <img src="images/caseTitle01.jpg" /></h3>
                        <div class="caseBox00">
                            <href="javascript:" class="arrowLe" id="caseContents2_left">
                                <img src="images/arrowLe.png" onclick="secondShow('-')" /></a>
                            <div class="caseContents" id="caseContents2">
                                <ul>
                                    <asp:Repeater ID="rptCase2" runat="server">
                                        <ItemTemplate>
                                            <li onclick="showScrollPic2(this);"><href="javascript:void(0);">
                                                <img src="/Files/HeatPump/<%# Eval("Smallpic") %>style="width259pxheight155px;" /></a>
                                                <class="caseDetails">
                                                    安装地点:<%# Eval("InstallationAddress")%><br />
                                                    用户户型:<%# Eval("InstallDoor")%><br />
                                                    产品型号:<%# Eval("ProductModel")%><br />
                                                    使用人数:日常<%# Eval("UserNum")%>人用水
                                                </p>
                                            </li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <href="javascript:" class="arrowRi" id="caseContents2_right">
                                <img src="images/arrowRi.png" onclick="secondShow('+')" /></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
     <div class="ContentBox07">
            <h2 id="anchor04" class="title04">
                应用案例</h2>
            <div class="ContentBox07_Contents">
                <div class="caseContents">
                    <div class="caseOpenBox" style="displaynone;">
                        <p>
                            <href="javascript:void(0);" onclick="$(this).parent().parent().hide();">
                                <img src="images/caseClose.png" /></a></p>
                        <class="clear">
                        </p>
                        <div class="caseOpenBox00">
                            <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><href="javascript:void(0);">
                                                <img src="/Files/HeatPump/<%# Eval("Bigpic") %>style="width807pxheight485px;" /></a></li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <href="javascript:void(0);" class="caseOpen_arrowRi" onclick="caseOpenContents1Show('+')">
                                <img src="images/caseOpen_arrowRi.png" /></a>
                        </div>
                    </div>
                    <div class="caseOpenBox" style="displaynone;">
                        <p>
                            <href="javascript:void(0)" onclick="$(this).parent().parent().hide();">
                                <img src="images/caseClose.png" /></a></p>
                        <class="clear">
                        </p>
                        <div class="caseOpenBox00">
                            <href="javascript:void(0);" class="caseOpen_arrowLe" onclick="caseOpenContents2Show('-')">
                                <img src="images/caseOpen_arrowLe.png" /></a>
                            <div class="caseOpenContents" id="caseOpenContents2">
                                <ul>
                                    <asp:Repeater ID="rptBigPic2" runat="server">
                                        <ItemTemplate>
                                            <li><href="javascript:void(0);">
                                                <img src="/Files/HeatPump/<%# Eval("Bigpic") %>style="width807pxheight485px;" /></a></li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <href="javascript:void(0);" class="caseOpen_arrowRi" onclick="caseOpenContents2Show('+')">
                                <img src="images/caseOpen_arrowRi.png" /></a>
                        </div>
                    </div>
                    <div class="caseBox">
                        <h3>
                            <img src="images/caseTitle00.jpg" /></h3>
                        <div class="caseBox00">
                            <href="javascript:" class="arrowLe" id="caseContents1_left">
                                <img src="images/arrowLe.png" onclick="firstShow('-')" /></a>
                            <div class="caseContents" id="caseContents1">
                                <ul>
                                    <asp:Repeater ID="rptCase" runat="server">
                                        <ItemTemplate>
                                            <li onclick="showScrollPic1(this);"><href="javascript:void(0);">
                                                <img src="/Files/HeatPump/<%# Eval("Smallpic") %>style="width259pxheight155px;" /></a>
                                                <class="caseDetails">
                                                    安装地点:<%# Eval("InstallationAddress")%><br />
                                                    用户户型:<%# Eval("InstallDoor")%><br />
                                                    产品型号:<%# Eval("ProductModel")%><br />
                                                    使用人数:日常<%# Eval("UserNum")%>人用水
                                                </p>
                                            </li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <href="javascript:" class="arrowRi" id="caseContents1_right">
                                <img src="images/arrowRi.png" onclick="firstShow('+')" /></a>
                        </div>
                    </div>
                    <div class="caseBox">
                        <h3>
                            <img src="images/caseTitle01.jpg" /></h3>
                        <div class="caseBox00">
                            <href="javascript:" class="arrowLe" id="caseContents2_left">
                                <img src="images/arrowLe.png" onclick="secondShow('-')" /></a>
                            <div class="caseContents" id="caseContents2">
                                <ul>
                                    <asp:Repeater ID="rptCase2" runat="server">
                                        <ItemTemplate>
                                            <li onclick="showScrollPic2(this);"><href="javascript:void(0);">
                                                <img src="/Files/HeatPump/<%# Eval("Smallpic") %>style="width259pxheight155px;" /></a>
                                                <class="caseDetails">
                                                    安装地点:<%# Eval("InstallationAddress")%><br />
                                                    用户户型:<%# Eval("InstallDoor")%><br />
                                                    产品型号:<%# Eval("ProductModel")%><br />
                                                    使用人数:日常<%# Eval("UserNum")%>人用水
                                                </p>
                                            </li>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </ul>
                            </div>
                            <href="javascript:" class="arrowRi" id="caseContents2_right">
                                <img src="images/arrowRi.png" onclick="secondShow('+')" /></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    
    
    
    


  • 相关阅读:
    6th week blog3
    6th week blog2(颜色)
    6th week blog1(CSS单位)
    布局—一侧固定宽度,一侧自适应
    布局—两侧固定,中间自适应
    九宫格
    选项卡
    缓冲运动框架
    封装一些常用的js工具函数-不定时更新(希望大家积极留言,反馈bug^_^)
    在一定[min,max]区间,生成n个不重复的随机数的封装函数
  • 原文地址:https://www.cnblogs.com/ft-Pavilion/p/4800797.html
Copyright © 2020-2023  润新知