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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

48 191 64



模板描述:红色简洁风格 健身教练培训 企业网站。红色简洁风格的健身教练培训企业网站源码下载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>[email protected]</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>



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


热门标签: 扁平化 养生会馆 植物花草 游戏 黑色 bootstrap自适应 IT网络科技 蓝色 普通自适应 欧美风 旅游 红色 中国风 金融理财保险 绿色 韩系 高校 灰色 日系 简洁简约 工业产品 黄色 炫酷 家居装饰 紫色 卡通动画 橙色 招聘猎头 精美 实用通用 艺术创意 粉色 政府 婚庆 大气 白色 新闻资讯 婚纱摄影 棕色 清新 教育培训 彩色 绘画 设计 餐饮美食 其他风格 外贸 服装服饰 建筑 化工企业 医药器械 美容美发 动漫 电影视频 包装印刷 机械 汽车4S店 农业产品 咨询管理 酒店 健身房 化妆品 食品 花卉 房地产 协会组织 快递货运 数码电器 搬家 珠宝首饰 酒业 文化传媒 装修装饰 医院医疗 律师 酒吧音乐 图书 动物宠物 航空航天 股票 能源 公益 饮品 生活用品 家政保洁 体育 房屋租赁 商务 电力公司 打车租车 环保 宗教寺庙 工具文具 企业行业 自适应响应式 风格类型 颜色色彩

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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