shopp
/
fashion.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="shortcut icon" href="favicon.ico"/>
    <link rel="stylesheet" href="css/base.css"/>
    <link rel="stylesheet" href="css/fashion.css"/>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/base.js"></script>
    <script src="js/fashion.js"></script>
    <script>
        $(function(){
            // $(".fashion-play").find("li").children(1).css("margin-left","10px");

            var $ul = $(".fashion-play").find("ul");
            var $ulis = $ul.children();
            var width = $(".fashion-play").width();

            // alert(width);
            // alert($ulis.length);
            var $ol = $(".fashion-play").find("ol");
            for(var i=0; i<$ulis.length; i++){
                $ol.append("<li></li>")
            }
            var $olis = $ol.children();
            $olis.eq(0).addClass("current");


            $ol.children("li").mouseenter(function(){
                $(this).addClass("current").siblings("li").removeClass("current");
                var index = $(this).index();
                // alert(index);
                $ul.stop().animate({
                    left:-index*width
                })
                pic = index;
                square =index;
                // pic1 = index;
            })

            var pic = 0;
            $(".play-span-right").click(function(){
                if(pic<$ulis.length-1){
                    pic++;
                }

                $ul.stop().animate({
                    left:-width*pic+'px'
                })

                $ol.children().eq(pic).addClass("current").siblings().removeClass("current");
            })

            $(".play-span-left").click(function(){
                if(pic>0){
                    pic--;
                }
                $ul.stop().animate({
                    left:-width*pic
                })

                $ol.children().eq(pic).addClass("current").siblings().removeClass("current");
            })

            $ul.append($ul.find("li").eq(0).clone());

            var timer = null;
            var square = 0;
            // var pic1 = 0;
            timer = setInterval(autoplay,1500);
            $(".fashion-play").mouseenter(function(){
                $(".fashion-play-span").find("span").css("display","block");
                clearInterval(timer);
            })

            $(".fashion-play").mouseleave(function(){
                $(".fashion-play-span").find("span").css("display","none");
                timer = setInterval(autoplay,1500);

            })

            function autoplay(){
                if(pic<$ulis.length){
                    pic++;
                }else{
                    pic = 1;
                    $ul[0].style.left = 0;
                }
                $ul.animate({
                    left:-pic*width
                })

                if(square<$olis.length-1){
                    square++;
                }else{
                    square = 0;
                }
                $ol.find("li").eq(square).addClass("current").siblings().removeClass("current");
            }
        })
    </script>
</head>
<body>
    <!-- site-top-nav部分 start-->
    <div class="site-top-nav w">
        <div class="w clearfix">
            <div class="fl top-nav-left">
                <i></i>
                <a href="#">购物街首页</a>
                <b class="line"></b>
                <span>贵宾专线：400-660-5610</span>
                <em></em>
            </div>
            <div class="fr top-nav-right">
                <ul>
                    <li>
                        <a href="#">登录</a>
                        <b class="line"></b>
                    </li>
                    <li>
                        <a href="#">注册</a>
                        <b class="line"></b>
                    </li>
                    <li class="about-me">
                        <a class="triangle" href="#">我的购物街
                            <ol>
                                <li>我的购物街</li>
                                <li>我的订单</li>
                                <li>我的收藏</li>
                                <li>已购商品</li>
                                <li>我的礼券</li>
                                <li>我的积分</li>
                            </ol>
                            <i></i>
                        </a>
                        <b class="line"></b>
                    </li>
                    <li>
                        <a href="#">帮助中心</a>
                        <b class="line"></b>
                    </li>
                    <li class="download">
                        <a class="qr-code" href="#">
                        <span>手机下载</span>
                        <i></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- site-top-nav部分 end-->

    <!--search部分 start-->
        <div class="w search clearfix">
            <div class="fl search-logo">
                <a href="#"><img class="logo" src="images/logo.jpg" title="购物街网"></a>
                <a href="#"><img class="good-life" src="images/logo_d.gif" title="购物街网"></a>
            </div>
            <div class="search-input">
                <input type="text" value="爱马氏铂金包"/>
                <button>搜 索</button>
            </div>
            <div class="search-car">
                <a href="#">购物袋</a>
                <i class="search-car-icon1"></i>
                <i class="search-car-icon2">(<span>0</span>)</i>
                <i class="search-car-icon3">&gt;</i>
            </div>
            <div class="search-more">
                <a href="#">腕表</a>
                <a href="#">箱包</a>
                <a href="#">阿玛尼</a>
                <a href="#">T恤</a>
            </div>
        </div>
    <!--search部分 end-->

    <!--shortcut部分 start-->
    <div class="shortcut clearfix">
        <div class="w">
            <div class="shortcut-nav">
                <ul>
                    <li class="category"><a href="#">商品分类</a></li>
                    <li><a href="index.html">首页</a></li>
                    <li><a href="brand.html">品牌</a></li>
                    <li><a href="wMadam.html">女士</a></li>
                    <!--<li><a href="#">男士</a></li>-->
                    <li><a href="life.html">生活馆</a></li>
                    <li><a href="n-index.html">海外馆</a></li>
                    <li><a href="fashion.html">时尚</a></li>
                    <li class="reach-store">
                        <i></i>
                        <a href="arriveshop.html">到店</a>
                    </li>
                </ul>
            </div>
            <div class="shortcut-others">
                <ul>
                    <li class="quality-goods">
                        <i></i>
                        <!-- <a class="text1" href="#">品牌授权，官方验真</a> -->
                    </li>
                    <li class="vip">
                        <i></i>
                        <!-- <a href="#">尊享品牌会员服务</a> -->
                    </li>
                    <li class="integrity">
                        <i></i>
                        <!-- <a href="#">商务部诚信示范企业</a> -->
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--shortcut部分 end-->


    <!-- fashion head S-->
    <div class="fashion-head x">
        <ul>
            <span>专题类型：</span>
            <li class="unify else">首页</li>
            <li class="unify">所有专题</li>
            <li class="unify">往期专题</li>
            <li class="unify">5lux进化论</li>
            <li class="unify">5lux精明选</li>
            <li class="unify">5lux时尚指南</li>
            <li class="unify">品牌专场</li>
        </ul>
    </div>
    <!-- fashion head E-->

    <!-- fashion play S-->
    <div class="fashion-play x">
        <ul>
            <li>
                <img src="images/14352010691161.jpg" alt=""/>
                <img class="l-child" src="images/14351183713471.jpg" alt=""/>
            </li>
            <li>
                <img src="images/14310759805433.jpg" alt=""/>
                <img class="l-child" src="images/14327063775087.jpg" alt=""/>
            </li>
            <li>
                <img src="images/14338127363419.jpg" alt=""/>
                <img class="l-child" src="images/14340801137994.jpg" alt=""/>
            </li>
            <li>
                <img src="images/14343488925723.jpg" alt=""/>
                <img class="l-child" src="images/14344221957417.jpg" alt=""/>
            </li>
            <li>
                <img src="images/14351313787402.jpg" alt=""/>
                <img class="l-child" src="images/14356426679596.jpg" alt=""/>
            </li>
            <li>
                <img src="images/14357358131958.jpg" alt=""/>
                <img class="l-child" src="images/14399655126876.jpg" alt=""/>
            </li>
            <li>
                <img src="images/14406613268861.jpg" alt=""/>
                <img class="l-child" src="images/14419372769439.jpg" alt=""/>
            </li>
            <li>
                <img src="images/14430773857422.jpg" alt=""/>
                <img class="l-child" src="images/14460274577113.jpg" alt=""/>
            </li>
        </ul>

        <ol></ol>

        <div class="fashion-play-span">
            <span class="play-span-left"></span>
            <span class="play-span-right"></span>
        </div>
    </div>
    <!-- fashion play E-->

    <!-- fashion pro S -->
    <div class="fashion-pro x">
        <ul>
            <li><img src="images/pro_jhl_bg.jpg" alt="" class="bbt"/></li>
            <li><img src="images/14521667038619.jpg" alt=""/></li>
            <li><img src="images/14460274577113.jpg" alt=""/></li>
        </ul>
        <div class="gap"></div>
        <ul>
            <li><img src="images/pro_jmx_bg.jpg" alt="" class="bbt"/></li>
            <li><img src="images/14357358131958.jpg" alt=""/></li>
            <li><img src="images/14352010691161.jpg" alt=""/></li>
        </ul>
        <div class="gap"></div>
        <ul>
            <li><img src="images/pro_ppzc_bg.jpg" alt="" class="bbt"/></li>
            <li><img src="images/14419372769439.jpg" alt=""/></li>
            <li><img src="images/14406613268861.jpg" alt=""/></li>
        </ul>
        <div class="gap"></div>
        <ul>
            <li><img src="images/pro_sszn_bg.jpg" alt="" class="bbt"/></li>
            <li><img src="images/14399655126876.jpg" alt=""/></li>
            <li><img src="images/14310759805433.jpg" alt=""/></li>
        </ul>
        <div class="gap">
        </div>
    </div>
    <!-- fashion pro E -->

<!-- t-side-start -->
    <div class="t-side">
        <h2>购物袋 <span>×</span></h2>
        <div class="t-side-b">
            <img src="images/t-shopping_bag.png" alt=""/>
            <p>您的购物袋还没有商品再去逛逛吧！</p>
        </div>
        <div class="t-btn">
            <span class="t-btn1"></span>
            <span class="t-btn2"><i>我的资产</i></span>
            <span class="t-btn3"><i>我喜欢的商品</i></span>
            <span class="t-btn4"><i>联系客服</i></span>
            <span class="t-btn5"><i><img src="images/weixin.jpg"></i></span>
            <span class="t-btn6"><i>意见反馈</i></span>
            <span class="t-btn7" id = btn7><i>返回顶部</i></span>
        </div>
    </div>
    <!-- t-side-end -->

    <!-- footerm-top start-->
    <div class="footer-message">
        <div class="w">
            <!-- footerm-top start-->

            <div class="footerm-top">
                <ul>
                    <li>
                        <a href="javascript:;">
                            <img src="images/footer_message01.jpg" alt=""/>
                        </a>
                        <div>
                            <p>正品保障</p>
                            <p><a href="javascript:;">品牌授权,官方验真</a></p>
                        </div>
                    </li>
                    <li><a href="javascript:;"><img src="images/footer_message02.jpg" alt=""/></a>
                        <div>
                            <p>专柜发货</p>
                            <p><a href="javascript:;">专柜直接或到店自提</a></p>
                        </div></li>
                    <li><a href="javascript:;"><img src="images/footer_message03.jpg" alt=""/></a>
                        <div>
                            <p>无忧售后</p>
                            <p><a href="javascript:;">7天无理由退换货</a></p>
                        </div>
                    </li>
                    <li><a href="javascript:;"><img src="images/footer_message04.jpg" alt=""/></a>
                        <div>
                            <p>VIP服务</p>
                        <p><a href="javascript:;">享品牌会员售前售后服务</a></p>
                        </div>
                    </li>
                    <li><a href="javascript:;"><img src="images/footer_message05.jpg" alt=""/></a>
                        <div>
                            <p>权威荣誉</p>
                            <p><a href="javascript:;">商务部授予诚信示范企业</a></p>
                        </div>
                    </li>
                </ul>
            </div>
            <!-- footerm-top end-->

            <!-- footerm-middle start-->
            <div class="footerm-middle">
                <div class="footerm-middle-left clearfix">
                    <dl>
                        <dt>服务保障</dt>
                        <dd><a href="javascript:;">品牌授权正品</a></dd>
                        <dd><a href="javascript:;">品牌客服</a></dd>
                        <dd><a href="javascript:;">预约到店体验</a></dd>
                        <dd><a href="javascript:;">7天无理由退换</a></dd>
                    </dl>
                    <dl>
                        <dt>使用帮助</dt>
                        <dd><a href="javascript:;">常见问题</a></dd>
                        <dd><a href="javascript:;">会员制度</a></dd>
                        <dd><a href="javascript:;">集团采购</a></dd>
                        <dd><a href="javascript:;">礼品卡</a></dd>
                    </dl>
                    <dl>
                        <dt>支付方式</dt>
                        <dd><a href="javascript:;">到店付款</a></dd>
                        <dd><a href="javascript:;">货到付款</a></dd>
                        <dd><a href="javascript:;">在线支付</a></dd>
                        <dd><a href="javascript:;">余额支付</a></dd>
                        <dd><a href="javascript:;">分期付款</a></dd>
                    </dl>
                    <dl>
                        <dt>配送方式</dt>
                        <dd><a href="javascript:;">配送说明</a></dd>
                        <dd><a href="javascript:;">到店自提</a></dd>
                        <dd><a href="javascript:;">运费说明</a></dd>
                        <dd><a href="javascript:;">验货签收</a></dd>
                    </dl>
                    <dl>
                        <dt>售后服务</dt>
                        <dd><a href="javascript:;">品牌售后</a></dd>
                        <dd><a href="javascript:;">售后咨询</a></dd>
                        <dd><a href="javascript:;">退换政策</a></dd>
                        <dd><a href="javascript:;">发票保障</a></dd>
                    </dl>
                <div class="footerm-middle-right clearfix">
                    <ul>
                        <li class="fmr-left">
                            <span>第五大道APP</span>
                            <img src="images/footer_message06.png" />
                        </li>
                        <li class="fmr-right">
                            <span>第五大道微博</span>
                            <img src="images/footer_message06.png" />
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <!-- footerm-middle end-->

        <!-- footerm-bottom start-->
        <div class="footerm-bottom">
            <div class="footerm-bottom-tp">
                <a href="javascript:;">箱包</a>|
                <a href="javascript:;">美妆</a>|
                <a href="javascript:;">服饰</a>|
                <a href="javascript:;">腕表</a>|
                <a href="javascript:;">配饰</a>|
                <a href="javascript:;">鞋靴</a>|
                <a href="javascript:;">特惠</a>|
                <a href="javascript:;">名品闪购</a>|
                <a href="javascript:;">礼品区</a>
            </div>
            <div class="footerm-bottom-md">
                <a href="javascript:;">关于购物街</a>|
                <a href="javascript:;">网站地图</a>|
                <a href="javascript:;">品牌合作专区</a>|
                <a href="javascript:;">媒体聚焦</a>|
                <a href="javascript:;">商务合作</a>|
                <a href="javascript:;">商家合作</a>|
                <a href="javascript:;">加入购物街</a>|
                <a href="javascript:;">友情链接</a>|
                <a href="javascript:;">奢尚志</a>
                <p>&nbsp Copyright © 2008-2019 MODULE_ID吉他世界网 Guitarworld.com.cn All Rights Reserved 沪ICP备12023735号-1
                </p>
            </div>
            <div class="footerm-bottom-bm">
                <a href="javascript:;"><img src="images/footer_message08.jpg" /></a>
                <a href="javascript:;"><img src="images/footer_message08.jpg" /></a>
                <a href="javascript:;"><img src="images/footer_message08.jpg" /></a>
                <a href="javascript:;"><img src="images/footer_message08.jpg" /></a>
            </div>

        </div>
        <!-- footerm-bottom end-->

    </div>
    </div>


</body>
</html>