红色简洁风格的健身教练培训企业网站源码下载



19 72 25



模板描述:红色简洁风格 健身教练培训 企业网站,红色简洁风格的健身教练培训企业网站源码下载html模板下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/swiper-3.2.7.min.css" />
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/master.css">
<link rel="stylesheet" href="css/bannerList.css">

2. 引入JS

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/bannerList.js"></script>
<script type="text/javascript" src="js/swiper-3.4.0.jquery.min.js" ></script>

3. HTML代码

    <div class="header">
        <div class="w1200">
            <div class="logo">
                <a href=""><img src="images/logo.png" width="378" height="82" alt=""></a>
            </div>
            <div class="nav">
                <ul class="nav-list">
                    <li><a href='/'>首页</a><span></span></li>
                    <li><a href='/'>课程</a><span></span></li>
                    <li><a href='/'>教练</a><span></span></li>
                    <li><a href='/'>培训证书</a><span></span></li>
                    <li><a href='/'>优势</a><span></span></li>
                    <li><a href='/'>报名优惠</a><span></span></li>
                    <li><a href='/'>新闻动态</a><span></span></li>
                    <li><a href='/'>成绩查询</a><span></span></li>
                    <li><a href='/'>关于我们</a><span></span></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="banner">
        <ul class="">
            <li><a href=""><img src="images/banner/banner1.jpg" alt=""></a></li>
            <li><a href=""><img src="images/banner/banner1.jpg" alt=""></a></li>
            <li><a href=""><img src="images/banner/banner1.jpg" alt=""></a></li>
        </ul>
        <div class="left-btn"></div>
        <div class="right-btn"></div>
        <div class="img-btn-list"></div>
    </div>
    <!--course start-->
    <div class="course">
        <div class="course-head">
            <h2>全新私人教练课程</h2>
            <p>实力导师激情塑造   不只是帮你打造完美身材</p>
        </div>
        <div class="w1200">
            <div class="content-four">
                <ul class="contentbox-four">
                    <li class="con-four">
                        <img src="images/photo/photo_03.png"/>
                        <div class="txt-four">
                            <h3>私教CPT认证</h3>
                            <p>私人健身教练的专业知识要建立在市场需求的基础上,将体适能要素、运动营养学、运动生理学、运动解剖学、生物力学、基础运动损伤学融合运用来解决实质问题。只有深度学习了以上知识并能熟悉掌握其原理,才能有效避免身体在运动中的潜在危险,最后根据客户实际身体状态制..</p>
                            <a href="">立即报名</a>
                        </div>
                    </li>
                    <li class="con-four">
                        <img src="images/photo/photo_03.png"/>
                        <div class="txt-four">
                            <h3>私教CPT认证</h3>
                            <p>私人健身教练的专业知识要建立在市场需求的基础上,将体适能要素、运动营养学、运动生理学、运动解剖学、生物力学、基础运动损伤学融合运用来解决实质问题。只有深度学习了以上知识并能熟悉掌握其原理,才能有效避免身体在运动中的潜在危险,最后根据客户实际身体状态制..</p>
                            <a href="">立即报名</a>
                        </div>
                    </li>
                    <li class="con-four">
                        <img src="images/photo/photo_03.png"/>
                        <div class="txt-four">
                            <h3>私教CPT认证</h3>
                            <p>私人健身教练的专业知识要建立在市场需求的基础上,将体适能要素、运动营养学、运动生理学、运动解剖学、生物力学、基础运动损伤学融合运用来解决实质问题。只有深度学习了以上知识并能熟悉掌握其原理,才能有效避免身体在运动中的潜在危险,最后根据客户实际身体状态制..</p>
                            <a href="">立即报名</a>
                        </div>
                    </li>
                    <li class="con-four">
                        <img src="images/photo/photo_03.png"/>
                        <div class="txt-four">
                            <h3>私教CPT认证</h3>
                            <p>私人健身教练的专业知识要建立在市场需求的基础上,将体适能要素、运动营养学、运动生理学、运动解剖学、生物力学、基础运动损伤学融合运用来解决实质问题。只有深度学习了以上知识并能熟悉掌握其原理,才能有效避免身体在运动中的潜在危险,最后根据客户实际身体状态制..</p>
                            <a href="">立即报名</a>
                        </div>
                    </li>
                    <li class="con-four">
                        <img src="images/photo/photo_03.png"/>
                        <div class="txt-four">
                            <h3>私教CPT认证</h3>
                            <p>私人健身教练的专业知识要建立在市场需求的基础上,将体适能要素、运动营养学、运动生理学、运动解剖学、生物力学、基础运动损伤学融合运用来解决实质问题。只有深度学习了以上知识并能熟悉掌握其原理,才能有效避免身体在运动中的潜在危险,最后根据客户实际身体状态制..</p>
                            <a href="">立即报名</a>
                        </div>
                    </li>
                    <li class="con-four">
                        <img src="images/photo/photo_03.png"/>
                        <div class="txt-four">
                            <h3>私教CPT认证</h3>
                            <p>私人健身教练的专业知识要建立在市场需求的基础上,将体适能要素、运动营养学、运动生理学、运动解剖学、生物力学、基础运动损伤学融合运用来解决实质问题。只有深度学习了以上知识并能熟悉掌握其原理,才能有效避免身体在运动中的潜在危险,最后根据客户实际身体状态制..</p>
                            <a href="">立即报名</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--course end-->
    <!--team start-->
    <div id="team">
        <div class="team_head">
            <h2>行业顶级导师团队</h2>
            <p>全面的课程开设    为您的人生梦想添翼</p>
        </div>
        <div class="w1200">
            <div class="btnMode" id="slider">
                <a href="javascript:void(0);" class="prev btn"></a>
                <div class="scroll">
                    <ul class="scrollContainer">
                        <li class="panel" id="panel_1">
                            <a href="" class="inside" target="_blank">
                                <img width="230" height="295" alt="Alexander McQueen秋季" src="images/photo/team.png" />
                                <span>王威</span>
                                <p>亚洲形体健身学院资深培训导师
                                    亚洲形体健身学院基础理论课程导师
                                    亚洲形体健身学院资深培训导师</p>
                            </a>
                            <a href="/" class="panel_more">查看更多</a>
                        </li>
                        <li class="panel" id="panel_2">
                            <a href="" class="inside" target="_blank">
                                <img width="230" height="295" alt="Alexander McQueen秋季" src="images/photo/team.png" />
                                <span>王威</span>
                                <p>亚洲形体健身学院资深培训导师
                                    亚洲形体健身学院基础理论课程导师
                                    亚洲形体健身学院资深培训导师</p>
                            </a>
                            <a href="/" class="panel_more">查看更多</a>
                        </li>
                        <li class="panel current" id="panel_3">
                            <a href="" class="inside " target="_blank">
                                <img width="230" height="295" alt="Alexander McQueen秋季" src="images/photo/team.png" />
                                <span>王威</span>
                                <p>亚洲形体健身学院资深培训导师
                                    亚洲形体健身学院基础理论课程导师
                                    亚洲形体健身学院资深培训导师</p>
                            </a>
                            <a href="/" class="panel_more">查看更多</a>
                        </li>
                        <li class="panel" id="panel_4">
                            <a href="" class="inside" target="_blank">
                                <img width="230" height="295" alt="Alexander McQueen秋季" src="images/photo/team.png" />
                                <span>王威</span>
                                <p>亚洲形体健身学院资深培训导师
                                    亚洲形体健身学院基础理论课程导师
                                    亚洲形体健身学院资深培训导师</p>
                            </a>
                            <a href="/" class="panel_more">查看更多</a>
                        </li>
                        <li class="panel" id="panel_5">
                            <a href="" class="inside" target="_blank">
                                <img width="230" height="295" alt="Alexander McQueen秋季" src="images/photo/team.png" />
                                <span>王威</span>
                                <p>亚洲形体健身学院资深培训导师
                                    亚洲形体健身学院基础理论课程导师
                                    亚洲形体健身学院资深培训导师</p>
                            </a>
                            <a href="/" class="panel_more">查看更多</a>
                        </li>
                        <li class="panel" id="panel_6">
                            <a href="" class="inside" target="_blank">
                                <img width="230" height="295" alt="Alexander McQueen秋季" src="images/photo/team.png" />
                                <span>王威</span>
                                <p>亚洲形体健身学院资深培训导师
                                    亚洲形体健身学院基础理论课程导师
                                    亚洲形体健身学院资深培训导师</p>
                            </a>
                            <a href="/" class="panel_more">查看更多</a>
                        </li>
                    </ul>
                </div>
                <a href="javascript:void(0);" class="next btn"></a>
            </div>
        </div>
    </div>
    <!--team end-->
    <!--cert start-->
    <div class="cert">
        <div class="cert-head">
            <h2>四大类、7种权威证书一次获得</h2>
            <p>在您的职业生涯开始,R-STAR助您获得国家职业资格认证</p>
        </div>
        <div class="w1200">
            <div class="container cert_list">
                <div class="swiper-container swiper1">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide selected">证书</div>
                        <div class="swiper-slide">国职证书</div>
                        <div class="swiper-slide">国专证书</div>
                        <div class="swiper-slide">康复训练证书</div>
                        <div class="swiper-slide">普拉提证书</div>
                        <div class="swiper-slide">功能性证书</div>
                        <div class="swiper-slide">高级私教证书</div>
                        <div class="swiper-slide">训练营证书</div>
                    </div>
                </div>
                <!-- swiper2 -->
                <div class="swiper-container swiper2">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide swiper-no-swiping">
                            <img src="images/bg/bg_06.png" alt="">
                        </div>
                        <div class="swiper-slide swiper-no-swiping">
                            <img src="images/bg/bg_09.jpg" alt="">
                        </div>
                        <div class="swiper-slide swiper-no-swiping">
                            <img src="images/bg/bg_06.png" alt="">
                        </div>
                        <div class="swiper-slide swiper-no-swiping">
                            <img src="images/bg/bg_06.png" alt="">
                        </div>
                        <div class="swiper-slide swiper-no-swiping">
                            <img src="images/bg/bg_06.png" alt="">
                        </div>
                        <div class="swiper-slide swiper-no-swiping">
                            <img src="images/bg/bg_06.png" alt="">
                        </div>
                        <div class="swiper-slide swiper-no-swiping">
                            <img src="images/bg/bg_06.png" alt="">
                        </div>
                        <div class="swiper-slide swiper-no-swiping">
                            <img src="images/bg/bg_06.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--cert end-->
    <!--jiuye start-->
    <div class="jiuye">
        <div class="jiuye-head">
            <h2>专业的团队    就业保障</h2>
            <p>教学团队经过重重筛选,具有丰富的经验和专业知识,三大保障,为您提供贴心的就业服务</p>
        </div>
        <div class="w1200">
            <div class="jiuye_info">
                <h2>全国就业网络</h2>
                <p>
                    覆盖全国的就业网络<br>
                    全国600多个城市的上万家<br>
                    健身品牌建立长期合作关系
                </p>
            </div>
            <div class="jiuye_img">
                <img src="images/photo/jiuye_img1.png" alt="">
            </div>
            <div class="jiuye_info">
                <h2>毕业针对推荐工作</h2>
                <p>
                    100%签订就业协议<br>
                    毕业根据个人意愿及素质测评<br>
                    针对性推荐工作
                </p>
            </div>
            <div class="jiuye_img">
                <img src="images/photo/jiuye_img2.png" alt="">
            </div>
            <div class="jiuye_info">
                <h2>毕业跟踪指导</h2>
                <p>
                    解答就业难题<br>
                    入职前开设就业指导课程,<br>
                    入职后定期联络回访
                </p>
            </div>
        </div>
    </div>
    <!--jiuye end-->
    <!--sign-up start-->
    <div class="sign-up">
        <div class="w1200">
            <div class="sign-up-head">
                <h2>现在报名</h2>
                <p>更享四重好礼</p>
            </div>
            <div class="ih-item circle effect5">
                <a href="#">
                    <div class="img"><img src="images/photo/sign1.png" alt="img"></div>
                    <div class="info">
                        <div class="info-back">
                            <h3>凡12月25日 前报名<br>
                                即可免费
                                赠送<br>《产后功能恢复课程》</h3>
                        </div>
                    </div>
                </a>
            </div>
            <div class="ih-item circle effect5">
                <a href="#">
                    <div class="img"><img src="images/photo/sign2.png" alt="img"></div>
                    <div class="info">
                        <div class="info-back">
                            <h3><br>
                                同时享受<br>
                                学费优惠1000元
                            </h3>
                        </div>
                    </div>
                </a>
            </div>
            <div class="ih-item circle effect5">
                <a href="#">
                    <div class="img"><img src="images/photo/sign3.png" alt="img"></div>
                    <div class="info">
                        <div class="info-back">
                            <h3>
                                前100名报名<br>
                                免费考取价值2000<br>元的
                                中国健美协会(CBBA)高级证书
                            </h3>
                        </div>
                    </div>
                </a>
            </div>
            <div class="ih-item circle effect5">
                <a href="#">
                    <div class="img"><img src="images/photo/sign4.png" alt="img"></div>
                    <div class="info">
                        <div class="info-back">
                            <h3>
                                前100名报名<br>
                                免费考取价值2000<br>元的
                                中国健美协会(CBBA)高级证书
                            </h3>
                        </div>
                    </div>
                </a>
            </div>
        </div>
        <a href="" class="sign-up-more">查看更多</a>
    </div>
    <!--sign-up end-->
    <!--three_icon start-->
    <div class="three_icon">
        <div class="w1200">
            <div class="three_icon_list">
                <span><img src="images/icon/icon1.png" alt=""></span>
                <span>0元入学 百度钱包随意分期付款</span>
            </div>
            <div class="three_icon_list">
                <span><img src="images/icon/icon2.png" alt=""></span>
                <span>入学3天不满意 无条件全额退款</span>
            </div>
            <div class="three_icon_list">
                <span><img src="images/icon/icon3.png" alt=""></span>
                <span>零基础包教会 终身免费重修</span>
            </div>
        </div>
    </div>
    <!--three_icon end-->
    <!--news start-->
    <div class="news">
        <div class="news_head">
            <h2>健身相关资讯</h2>
            <p>健身知识、健身心得、行业资讯一手新鲜</p>
        </div>
        <div class="w1200 news_list">
            <dl>
                <dt>2017-07-25</dt>
                <dd>
                    <a href="">
                        <h2>费恩莱斯形象代言人,功夫影星元武教你泰拳实战技击</h2>
                        <p>泰拳实战技击课堂精彩回顾,简单实用的技击招式,可以防身 可以健身,热血沸腾的课堂一起操练一起呐喊,拳脚到肉的实战演练感触泰拳技击的魅力/p>
                    </a>
                </dd>
            </dl>
            <dl>
                <dt>2017-07-25</dt>
                <dd>
                    <a href="">
                        <h2>费恩莱斯形象代言人,功夫影星元武教你泰拳实战技击</h2>
                        <p>泰拳实战技击课堂精彩回顾,简单实用的技击招式,可以防身 可以健身,热血沸腾的课堂一起操练一起呐喊,拳脚到肉的实战演练感触泰拳技击的魅力/p>
                    </a>
                </dd>
            </dl>
            <dl>
                <dt>2017-07-25</dt>
                <dd>
                    <a href="">
                        <h2>费恩莱斯形象代言人,功夫影星元武教你泰拳实战技击</h2>
                        <p>泰拳实战技击课堂精彩回顾,简单实用的技击招式,可以防身 可以健身,热血沸腾的课堂一起操练一起呐喊,拳脚到肉的实战演练感触泰拳技击的魅力/p>
                    </a>
                </dd>
            </dl>
            <dl>
                <dt>2017-07-25</dt>
                <dd>
                    <a href="">
                        <h2>费恩莱斯形象代言人,功夫影星元武教你泰拳实战技击</h2>
                        <p>泰拳实战技击课堂精彩回顾,简单实用的技击招式,可以防身 可以健身,热血沸腾的课堂一起操练一起呐喊,拳脚到肉的实战演练感触泰拳技击的魅力/p>
                    </a>
                </dd>
            </dl>
            <dl>
                <dt>2017-07-25</dt>
                <dd>
                    <a href="">
                        <h2>费恩莱斯形象代言人,功夫影星元武教你泰拳实战技击</h2>
                        <p>泰拳实战技击课堂精彩回顾,简单实用的技击招式,可以防身 可以健身,热血沸腾的课堂一起操练一起呐喊,拳脚到肉的实战演练感触泰拳技击的魅力/p>
                    </a>
                </dd>
            </dl>
            <dl>
                <dt>2017-07-25</dt>
                <dd>
                    <a href="">
                        <h2>费恩莱斯形象代言人,功夫影星元武教你泰拳实战技击</h2>
                        <p>泰拳实战技击课堂精彩回顾,简单实用的技击招式,可以防身 可以健身,热血沸腾的课堂一起操练一起呐喊,拳脚到肉的实战演练感触泰拳技击的魅力/p>
                    </a>
                </dd>
            </dl>
        </div>
        <a href="" class="news_more">查看更多</a>
    </div>
    <!--news end-->
    <div class="footer">
        <div class="w1200">
            <div class="footer_left">
                <h2>联系我们</h2>
                <div class="footer_left_contact">
                    <span>
                        <p>上海市浦东新区川周公路2788号</p>
                    </span>
                    <span>
                        <p>4006 586 486</p>
                    </span>
                    <span>
                        <p>ruixing@rstarfit.com</p>
                    </span>
                </div>
                <div class="footer_left_ewm">
                    <span>微信公众号:</span>
                    <span><img src="images/photo/footer_ewm1.png" alt=""></span>
                    <span><img src="images/photo/footer_ewm2.png" alt=""></span>
                </div>
            </div>
            <div class="footer_right">
                <h2 class="text-right">留言</h2>
                <form class="myform" action="" method="post" name="myform">
                    <div class="form-control">
                        <label for="txtname">您的姓名:</label>
                        <input type="text" id="txtname" name="txtname" required="required" placeholder="请输入您的姓名">
                    </div>
                    <div class="form-control">
                        <label for="txttel">您的电话:</label>
                        <input type="tel" id="txttel" name="txttel" required="required" placeholder="请输入您的电话">
                    </div>
                    <div class="form-control">
                        <label for="txtmail">您的邮箱:</label>
                        <input type="email" id="txtmail" name="txtmail" required="required" placeholder="请输入您的邮箱">
                    </div>
                    <div class="form-control">
                        <label for="txtadd">您的地址:</label>
                        <input type="address" id="txtadd" name="txtadd" required="required" placeholder="请输入您的地址">
                    </div>
                    <div class="form-control">
                        <label for="txtcontent">请您留言:</label>
                        <textarea  id="txtcontent" name="txtcontent" cols="30" rows="10" placeholder="请输入您的姓名"></textarea>
                    </div>
                    <div class="form-control">
                        <label>&nbsp;</label>
                        <button type="submit" name="submit">
                            提交信息
                        </button>
                    </div>
                </form>
            </div>
            <div class="clearfix"></div>
            <p class="text-center">版权所有©2016-2020 上海锐星健身咨询有限公司 COPYRIGHT 2013-2017 WWW.RSTARFIT.COM 网站建设备案号:沪ICP备12002834号-1</p>
        </div>
    </div>
    <!--head js-->
    <script type="text/javascript">
        $(function(){
            $('.nav li').hover(function(){
                $('span',this).stop().css('height','2px');
                $('span',this).animate({
                    left:'0',
                    width:'100%',
                    right:'0'
                },200);
            },function(){
                $('span',this).stop().animate({
                    left:'50%',
                    width:'0'
                },200);
            });
        });
    </script>
    <!--banner-->
    <script>
        bannerListFn(
            $(".banner"),
            $(".img-btn-list"),
            $(".left-btn"),
            $(".right-btn"),
            2000,
            true
        );
    </script>
    <!--team-->
    <script type="text/javascript">
        $(function(){
            /*未元素的首尾添加补白*/
            var $panels				= $('#slider .scrollContainer > li');
            var $parent=$panels.parent();//或许当前li的最近一级的父元素
            var $length=$panels.length;//获取指定length值
            var $first=$panels.eq(0).clone().addClass("panel cloned").attr("id",'panel_'+($length+1));//获取第一个元素并复制
            var $last=$panels.eq($length-1).clone().addClass("cloned").attr("id",'panel_0');;//获取最后一个元素并复制
            $parent.append($first);//将li序列中的第一个添加到ul元素中的最后一个  $("#slide02").scrollLeft(0);
            $parent.prepend($last);//将li序列中的最后一个添加到ul元素中的第一个
            var totalPanels			= $(".scrollContainer").children().size();//所有子元素的数字,滚动元素的个数 7
            var regWidth			= $(".panel").css("width");//获取li元素的宽度
            var regImgWidth			= $(".panel img").css("width");//获取其中图片的宽度
            var movingDistance	    = 205;//每次移动的距离
            var curWidth			= 220;//当前中间li的宽度为350px
            var curHeight         =442;//当前中间li的高度未312
            var curImgWidth  =220;
            var curImgHeight  =220;
            var othersW           =200;//其他li的宽度
            var othersH           =380;//高度
            var othersImgW           =200;//其他li的宽度
            var othersImgH           =200;//高度
            var $panels				= $('#slider .scrollContainer > li');//此处作用是将复制进来补白的元素重新赋值
            var $container			= $('#slider .scrollContainer');
            $panels.css({'float' : 'left','position' : 'relative'});
            $("#slider").data("currentlyMoving", false);//是否正在运动中
            $container.css('width', (($panels[0].offsetWidth+25) * $panels.length) + 60 ).css('left','0');//计算容器的总的宽度 PS:25为margin值 offsetWidth
            var scroll = $('#slider .scroll').css('overflow', 'hidden');
            function returnToNormal(element) {//li元素返回到正常状态
                $(element).animate({ width: othersW,height: othersH}).find("img").animate({width:othersImgW,height:othersImgH});
            };
            function growBigger(element) {//当前元素之间变大
                $(element).addClass("current").animate({ width: curWidth,height:curHeight}).siblings().removeClass("current")
                    .end().find("img").animate({width:curImgWidth,height:curImgHeight})
            }
            //direction true = right, false = left
            function change(direction) {
                //if not at the first or last panel
                if((direction && !(curPanel < totalPanels-2)) || (!direction && (curPanel <= 1))) {
                    return false;
                }
                //if not currently moving
                if (($("#slider").data("currentlyMoving") == false)) {
                    $("#slider").data("currentlyMoving", true);
                    var next         = direction ? curPanel + 1 : curPanel - 1;
                    var leftValue    = $(".scrollContainer").css("left");
                    var movement	 = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
                    $(".scrollContainer").stop().animate({"left": movement}, function() {
                        $("#slider").data("currentlyMoving", false);
                    });
                    returnToNormal("#panel_"+curPanel);
                    growBigger("#panel_"+next);
                    curPanel = next;
                    //remove all previous bound functions
                    $("#panel_"+(curPanel+1)).unbind();
                    //go forward
                    $("#panel_"+(curPanel+1)).click(function(){ change(true); });
                    //remove all previous bound functions
                    $("#panel_"+(curPanel-1)).unbind();
                    //go back
                    $("#panel_"+(curPanel-1)).click(function(){ change(false); });
                    //remove all previous bound functions
                    $("#panel_"+curPanel).unbind();
                }
            }
            // Set up "Current" panel and next and prev 设置当前元素和上下
            growBigger("#panel_2");
            var curPanel = 2;
            $("#panel_"+(curPanel+1)).click(function(){ change(true);return false;});
            $("#panel_"+(curPanel-1)).click(function(){ change(false);return false;});
            //when the prev/next arrows are clicked
            $("#slider .next").click(function(){ change(true);});
            $("#slider .prev").click(function(){ change(false);});
            $(window).keydown(function(event){//键盘方向键控制
                switch (event.keyCode) {
                    case 13: //enter
                        $(".next").click();
                        break;
                    case 37: //prev arrow
                        $(".prev").click();
                        break;
                    case 39: //next arrow
                        $(".next").click();
                        break;
                }
            });
        });
    </script>
    <!--cert-->
    <script>
        $(function() {
            function setCurrentSlide(ele, index) {
                $(".swiper1 .swiper-slide").removeClass("selected");
                ele.addClass("selected");
            }
            var swiper1 = new Swiper('.swiper1', {
                slidesPerView: 8,
                paginationClickable: true,
                spaceBetween: 10,
                freeMode: true,
                loop: false,
                onTab: function(swiper) {
                    var n = swiper1.clickedIndex;
                }
            });
            swiper1.slides.each(function(index, val) {
                var ele = $(this);
                ele.on("click", function() {
                    setCurrentSlide(ele, index);
                    swiper2.slideTo(index, 500, false);
                });
            });
            var swiper2 = new Swiper('.swiper2', {
                direction: 'horizontal',
                loop: false,
    //			effect : 'fade',//淡入
                //effect : 'cube',//方块
                //effect : 'coverflow',//3D流
                effect : 'flip',//3D翻转
                autoHeight: true,
                onSlideChangeEnd: function(swiper) {
                    var n = swiper.activeIndex;
                    setCurrentSlide($(".swiper1 .swiper-slide").eq(n), n);
                    swiper1.slideTo(n, 500, false);
                }
            });
        });
    </script>
    <script>
        $(function () {
            $(".con-four").hover(function() {
                $(this).find(".txt-four").stop().animate({"left": 0});
            }, function() {
                $(this).find(".txt-four").stop().animate({"left":-380});
            })
        });
    </script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 行业 企业 公司 工厂 分类 响应式 自适应 设备 风格 颜色 企业 行业 公司 工厂 pc 电脑 普通自适应 html+css自适应 html+css响应式 红色 简洁 简约 简单 大气 霸气 健身房

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到