778 lines
30 KiB
HTML
778 lines
30 KiB
HTML
<!doctype html>
|
||
<html class="no-js" lang="zxx">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||
<title>大牧云</title>
|
||
<meta name="keywords" content="智能养殖、碳中和可持续养殖、政府监管、生资监管、保后监管、订单农业认养、活体生资交易等平台及方案">
|
||
<meta name="description" content="企业简介:AIOTAGRO爱农云联是一家专注于智慧农业AI,利用人工智能对农业生产做出决策,IOT物联网技术精准控制农业生产">
|
||
<meta name="author" content="爱农云联">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="apple-touch-icon" href="icon.png">
|
||
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
|
||
<!-- Place favicon.ico in the root directory -->
|
||
|
||
<!-- All css here -->
|
||
<link rel="stylesheet" rel="stylesheet" href="css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="css/fontawesome-all.min.css">
|
||
<link rel="stylesheet" href="css/slick.css">
|
||
<link rel="stylesheet" href="css/magnific-popup.css">
|
||
<link rel="stylesheet" href="css/nice-select.css">
|
||
<link rel="stylesheet" href="css/meanmenu.css">
|
||
<link rel="stylesheet" href="css/linearicons.css">
|
||
<link rel="stylesheet" href="css/animate.css">
|
||
<link rel="stylesheet" href="css/default.css">
|
||
<link rel="stylesheet" href="css/style.css">
|
||
<link rel="stylesheet" href="css/responsive.css">
|
||
</head>
|
||
<style>
|
||
html,
|
||
body {
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
ul,
|
||
ul li {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.box {
|
||
display: flex;
|
||
justify-content: center
|
||
}
|
||
|
||
|
||
|
||
.banner ul {
|
||
position: absolute;
|
||
}
|
||
|
||
.banner ul li {
|
||
float: left;
|
||
}
|
||
|
||
.banner ul li img {
|
||
width: 100%;
|
||
height: 300px;
|
||
}
|
||
|
||
.banner #prevBtn,
|
||
.banner #nextBtn {
|
||
height: 80px;
|
||
width: 30px;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
position: absolute;
|
||
top: 50%;
|
||
margin-top: -40px;
|
||
font-size: 30px;
|
||
line-height: 80px;
|
||
text-align: center;
|
||
text-decoration: none;
|
||
color: white;
|
||
opacity: 0;
|
||
transition: opacity 0.8s ease;
|
||
}
|
||
|
||
.banner #prevBtn {
|
||
left: 0;
|
||
}
|
||
|
||
.banner #nextBtn {
|
||
right: 0;
|
||
}
|
||
|
||
.banner:hover #prevBtn,
|
||
.banner:hover #nextBtn {
|
||
opacity: 1;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.dot {
|
||
height: 10px;
|
||
width: 10px;
|
||
border-radius: 10px;
|
||
background: #2196f3;
|
||
display: inline-block;
|
||
margin: 5px;
|
||
}
|
||
|
||
.on {
|
||
background: #009688;
|
||
}
|
||
</style>
|
||
|
||
<body>
|
||
|
||
|
||
<!--[if lte IE 9]>
|
||
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
|
||
<![endif]-->
|
||
|
||
<!-- Add your site or application content here -->
|
||
<!-- header start -->
|
||
<header>
|
||
<div class="header-bottom-area">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<div class="col-xl-3 col-lg-3">
|
||
<div class="logo">
|
||
<img src="img/logo/logo.png" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-9 col-lg-9">
|
||
<div class="header-button f-right d-none d-lg-block">
|
||
<a href="https://iot.aiotagro.com/services.php">IOT平台</a>
|
||
</div>
|
||
<div class="main-menu f-right">
|
||
<nav id="mobile-menu">
|
||
<ul>
|
||
<li><a class="active" href="index.html">首页</a></li>
|
||
<li><a href="about.html">关于我们</a></li>
|
||
<li><a href="breed.html">解决方案</a>
|
||
<ul class="submenu">
|
||
<li>
|
||
<a href="breed.html">智能养殖解决方案</a>
|
||
</li>
|
||
<li>
|
||
<a href="biocarbon-neutral.html">碳中和可持续养殖</a>
|
||
</li>
|
||
<li>
|
||
<a href="government.html">政府监管解决方案</a>
|
||
</li>
|
||
<li>
|
||
<a href="finance.html">生资监管解决方案</a>
|
||
</li>
|
||
<li>
|
||
<a href="post-insurance.html">保后监管解决方案</a>
|
||
</li>
|
||
<li>
|
||
<a href="order.html">订单农业认养系统</a>
|
||
</li>
|
||
<li>
|
||
<a href="trade.html">活体生资交易平台</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li><a href="hardware.html">智能产品</a></li>
|
||
<li><a href="news.html">公司动态</a></li>
|
||
<li><a href="case.html">成功案例</a></li>
|
||
<li><a href="contact.html">联系我们</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
<div class="mobile-menu">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- header end -->
|
||
|
||
<!-- wrapper-box start -->
|
||
<div class="box">
|
||
<div class="banner">
|
||
<ul id="banner-wrap">
|
||
<li>
|
||
<div class="single-slider slider-height d-flex align-items-center" data-background="img/slider/slider1.jpg">
|
||
<div class="container">
|
||
<div class="row ">
|
||
<div class="col-xl-8 col-lg-10 d-flex align-items-center">
|
||
<div class="slider-content">
|
||
<h1 data-animation="fadeInUp" data-delay=".6s">专注高效、安全、可持续的食品生产</h1>
|
||
<p data-animation="fadeInUp" data-delay=".9s">从生命科学源头解决食品高效、安全、可持续生产</p>
|
||
<div class="slide-btn">
|
||
<a data-animation="fadeInLeft" data-delay="1.2s" href="contact.html" class="btn brand-btn">联系我们
|
||
<span>→</span>
|
||
</a>
|
||
<a data-animation="fadeInRight" data-delay="1.5s" href="about.html" class="btn white-btn">了解详情
|
||
<span>→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="single-slider slider-height d-flex align-items-center" data-background="img/slider/slider3.jpg">
|
||
<div class="container">
|
||
<div class="row ">
|
||
<div class="col-xl-8 col-lg-10 d-flex align-items-center">
|
||
<div class="slider-content">
|
||
<h1 data-animation="fadeInUp" data-delay=".6s">可持续碳中和生态养殖模式</h1>
|
||
<p data-animation="fadeInUp" data-delay=".9s">
|
||
AI智能温室牧草系统搭配精准饲喂系统，实现从养殖源头到智能喂养的全生产链解决方案，帮助养殖企业实现碳中和可持续发展</p>
|
||
<div class="slide-btn">
|
||
<a data-animation="fadeInLeft" data-delay="1.2s" href="contact.html" class="btn brand-btn">联系我们
|
||
<span>→</span>
|
||
</a>
|
||
<a data-animation="fadeInRight" data-delay="1.5s" href="about.html" class="btn white-btn">了解详情
|
||
<span>→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="single-slider slider-height d-flex align-items-center" data-background="img/slider/slider2.jpg">
|
||
<div class="container">
|
||
<div class="row ">
|
||
<div class="col-xl-8 col-lg-10 d-flex align-items-center">
|
||
<div class="slider-content">
|
||
<h1 data-animation="fadeInUp" data-delay=".6s">银行、保险生物资产监管、降低金融监管风险</h1>
|
||
<p data-animation="fadeInUp" data-delay=".9s">生物资产监管系统解决银行和保险公司对生物资产的有效性和安全性实时监管
|
||
</p>
|
||
<div class="slide-btn">
|
||
<a data-animation="fadeInLeft" data-delay="1.2s" href="contact.html" class="btn brand-btn">联系我们
|
||
<span>→</span>
|
||
</a>
|
||
<a data-animation="fadeInRight" data-delay="1.5s" href="about.html" class="btn white-btn">了解详情
|
||
<span>→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wrapper-box p-0">
|
||
<!-- slider start -->
|
||
<!-- <div class="slider-area slider-text-white">
|
||
<div class="slider-active dot-style">
|
||
<div class="single-slider slider-height d-flex align-items-center" data-background="img/slider/slider1.jpg">
|
||
<div class="container">
|
||
<div class="row ">
|
||
<div class="col-xl-8 col-lg-10 d-flex align-items-center">
|
||
<div class="slider-content">
|
||
<h1 data-animation="fadeInUp" data-delay=".6s">专注高效、安全、可持续的食品生产</h1>
|
||
<p data-animation="fadeInUp" data-delay=".9s">从生命科学源头解决食品高效、安全、可持续生产</p>
|
||
<div class="slide-btn">
|
||
<a data-animation="fadeInLeft" data-delay="1.2s" href="contact.html" class="btn brand-btn">联系我们
|
||
<span>→</span>
|
||
</a>
|
||
<a data-animation="fadeInRight" data-delay="1.5s" href="about.html" class="btn white-btn">了解详情
|
||
<span>→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="single-slider slider-height d-flex align-items-center" data-background="img/slider/slider3.jpg">
|
||
<div class="container">
|
||
<div class="row ">
|
||
<div class="col-xl-8 col-lg-10 d-flex align-items-center">
|
||
<div class="slider-content">
|
||
<h1 data-animation="fadeInUp" data-delay=".6s">可持续碳中和生态养殖模式</h1>
|
||
<p data-animation="fadeInUp" data-delay=".9s">
|
||
AI智能温室牧草系统搭配精准饲喂系统，实现从养殖源头到智能喂养的全生产链解决方案，帮助养殖企业实现碳中和可持续发展</p>
|
||
<div class="slide-btn">
|
||
<a data-animation="fadeInLeft" data-delay="1.2s" href="contact.html" class="btn brand-btn">联系我们
|
||
<span>→</span>
|
||
</a>
|
||
<a data-animation="fadeInRight" data-delay="1.5s" href="about.html" class="btn white-btn">了解详情
|
||
<span>→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="single-slider slider-height d-flex align-items-center" data-background="img/slider/slider2.jpg">
|
||
<div class="container">
|
||
<div class="row ">
|
||
<div class="col-xl-8 col-lg-10 d-flex align-items-center">
|
||
<div class="slider-content">
|
||
<h1 data-animation="fadeInUp" data-delay=".6s">银行、保险生物资产监管、降低金融监管风险</h1>
|
||
<p data-animation="fadeInUp" data-delay=".9s">生物资产监管系统解决银行和保险公司对生物资产的有效性和安全性实时监管
|
||
</p>
|
||
<div class="slide-btn">
|
||
<a data-animation="fadeInLeft" data-delay="1.2s" href="contact.html" class="btn brand-btn">联系我们
|
||
<span>→</span>
|
||
</a>
|
||
<a data-animation="fadeInRight" data-delay="1.5s" href="about.html" class="btn white-btn">了解详情
|
||
<span>→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
<!-- slider end -->
|
||
<!-- services-area start -->
|
||
<div class="services-area pb-70">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-xl-4 col-lg-4 col-md-6">
|
||
<div class="service-box service-3 mb-50">
|
||
<img src="img/service/01.jpg" alt="">
|
||
<h3 class="heading-no-border">
|
||
智能佩戴设备
|
||
</h3>
|
||
<p>高性能物联网芯片，助力科学生产</p>
|
||
<a class="service-link" href="./hardware.html" target="_blank">查看详情</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 col-lg-4 col-md-6">
|
||
<div class="service-box service-3 mb-50">
|
||
<img src="img/service/02.jpg" alt="">
|
||
<h3 class="heading-no-border">
|
||
精准饲喂设备
|
||
</h3>
|
||
<p>智能饲喂，杜绝变质、浪费，减少人工对生猪产生的应激反应刺激</p>
|
||
<a class="service-link" href="./hardware.html" target="_blank">查看详情</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 col-lg-4 col-md-6">
|
||
<div class="service-box service-3 mb-50">
|
||
<img src="img/service/03.jpg" alt="">
|
||
<h3 class="heading-no-border">
|
||
温室牧草培养设备
|
||
</h3>
|
||
<p> 所产牧草洁净无尘,降低了动物患呼吸系统疾病的风险</p>
|
||
<a class="service-link" href="./hardware.html" target="_blank">查看详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- services-area start -->
|
||
<!-- intro-area start -->
|
||
<div class="intro-area pt-120 pb-120 gray-bg">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-xl-12">
|
||
<div class="intro-text text-center">
|
||
<h1>生物资产抵押贷款服务</h1>
|
||
<p>新牛云生物资产抵押服务借助新牛云贷款监管平台和智能硬件 <br>满足养殖企业扩大产业规模的融资需求，解决银行贷后有效监管、风控等痛点</p>
|
||
<a href="contact.html" class="btn brand-btn" style="animation-delay: 1.2s;" tabindex="0">联系我们
|
||
<span>→</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- intro-area end -->
|
||
<!-- services-area start -->
|
||
<div class="services-area pt-120 pb-90">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-6 offset-lg-3">
|
||
<div class="section-title text-center mb-50">
|
||
<h2>解决方案</h2>
|
||
<p>运动记录 体重数据 环境监测 远程管理 预警风险 智能分析</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-xl-4 col-lg-4 col-md-6">
|
||
<div class="service-wrapper text-center mb-30">
|
||
<img src="img/icon/s-1.png" alt="">
|
||
<h2>智能养殖</h2>
|
||
<p>领先的智能养殖IOT设备,精确到个体的实时监测，精准饲喂、降低料重比</p>
|
||
<a href="breed.html">了解详情</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 col-lg-4 col-md-6">
|
||
<div class="service-wrapper text-center mb-30">
|
||
<img src="img/icon/s-2.png" alt="">
|
||
<h2>可持续碳中和养殖</h2>
|
||
<p>AI智能温室牧草系统帮助企业持续可循环碳中和养殖解决方案</p>
|
||
<a href="biocarbon-neutral.html">了解详情</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 col-lg-4 col-md-6">
|
||
<div class="service-wrapper text-center mb-30">
|
||
<img src="img/icon/s-3.png" alt="">
|
||
<h2>政府监管</h2>
|
||
<p>实时监管养殖数量、防疫、运输、屠宰全流程，保障食品安全</p>
|
||
<a href="government.html">了解详情</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 col-lg-4 col-md-6">
|
||
<div class="service-wrapper text-center mb-30">
|
||
<img src="img/icon/s-4.png" alt="">
|
||
<h2>生物资产监管</h2>
|
||
<p>实时动态监管抵押生物资产，实现全流程动态数据风控模型</p>
|
||
<a href="finance.html">了解详情</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 col-lg-4 col-md-6">
|
||
<div class="service-wrapper text-center mb-30">
|
||
<img src="img/icon/s-5.png" alt="">
|
||
<h2>保后监管解决</h2>
|
||
<p>实时监管参保生资，避免道德风险，为保险产品创新提供数据支撑</p>
|
||
<a href="post-insurance.html">了解详情</a>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 col-lg-4 col-md-6">
|
||
<div class="service-wrapper text-center mb-30">
|
||
<img src="img/icon/s-6.png" alt="">
|
||
<h2>订单认养系统</h2>
|
||
<p>区块链实时监管认养物健康状态、位置等，实现真实可实施的订单农业新模式</p>
|
||
<a href="order.html">了解详情</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- services-area start -->
|
||
<!-- counter-area start t-->
|
||
<div class="counter-area pt-150 pb-120" data-background="img/bg/bg-counter.jpg">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-xl-4 col-lg-4 col-md-4">
|
||
<div class="single-couter text-center mb-30">
|
||
<span class="lnr lnr-users"></span>
|
||
<div class="banks">100+ <span style="font-size: 20px;">家</span> </div>
|
||
<p>累计合作银行</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 col-lg-4 col-md-4">
|
||
<div class="single-couter text-center mb-30">
|
||
<span class="lnr lnr-thumbs-up"></span>
|
||
<div class="banks">500+ <span style="font-size: 20px;">万头</span> </div>
|
||
<p>生资监管累计数量</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 col-lg-4 col-md-4">
|
||
<div class="single-couter text-center mb-30">
|
||
<span class="lnr lnr-apartment"></span>
|
||
<div class="banks">800+ <span style="font-size: 20px;">亿</span> </div>
|
||
<p>生资价值累计</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- counter-area end -->
|
||
|
||
<!-- brand area start -->
|
||
<div class="brand-area pt-70 pb-70">
|
||
<div class="container">
|
||
<div class="brand-active">
|
||
<div class="single-brand">
|
||
<img src="img/brand/brand1.png" alt="">
|
||
</div>
|
||
<div class="single-brand">
|
||
<img src="img/brand/brand2.png" alt="">
|
||
</div>
|
||
<div class="single-brand">
|
||
<img src="img/brand/brand3.png" alt="">
|
||
</div>
|
||
<div class="single-brand">
|
||
<img src="img/brand/brand4.png" alt="">
|
||
</div>
|
||
<div class="single-brand">
|
||
<img src="img/brand/brand5.png" alt="">
|
||
</div>
|
||
<div class="single-brand">
|
||
<img src="img/brand/brand6.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- brand area end -->
|
||
<!-- footer start -->
|
||
<footer class="black-bg">
|
||
<div class="widget-area pt-70 pb-30">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-xl-4 col-lg-4 col-md-6 mb-30">
|
||
<div class="footer-widget">
|
||
<img class="mb-30" src="img/logo/logo-white.png" alt="">
|
||
<p>从生命科学源头解决食品高效、安全、可持续生产</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-2 col-lg-3 col-md-6 mb-30">
|
||
<div class="footer-widget">
|
||
<h3>友情链接</h3>
|
||
<ul class="footer-link">
|
||
<li><a href="https://www.ainongyoupin.com/" target="_blank">爱农优品</a></li>
|
||
<li class="code">智慧牧场<div class="code1"></div>
|
||
</li>
|
||
<li class="code">云检疫<div class="code2"></div>
|
||
</li>
|
||
<li class="code">畜牧贷<div class="code3"></div>
|
||
</li>
|
||
<li class="code">智慧养殖管理<div class="code4"></div>
|
||
</li>
|
||
<li><a href="https://gxs.damuyun.com/home/" target="_blank">供销科技产业集团</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-2 col-lg-2 col-md-6 mb-30 d-lg-none d-xl-block">
|
||
<div class="footer-widget">
|
||
<h3>快速导航</h3>
|
||
<ul class="footer-link">
|
||
<li><a href="index.html">首页</a></li>
|
||
<li><a href="about.html">关于我们</a></li>
|
||
<li><a href="breed.html">解决方案</a></li>
|
||
<li><a href="hardware.html">智能产品</a></li>
|
||
<li><a href="news.html">公司动态</a></li>
|
||
<li><a href="case.html">成功案例</a></li>
|
||
<li><a href="contact.html">联系我们</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-4 col-lg-5 col-md-6 mb-30">
|
||
<div class="footer-widget">
|
||
<h3>联系我们</h3>
|
||
<ul class="footer-info">
|
||
<li>成都爱农云联科技有限公司</li>
|
||
<li>15927219038 何经理 </li>
|
||
<li> 四川省成都市锦江区东大街芷泉段8号时代1号35A15</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="copyright-area pt-25 pb-25">
|
||
<div class="copyright-text text-center">
|
||
<p>Copyright © 2019.成都爱农云联科技有限公司 All rights reserved <a href="https://beian.miit.gov.cn/"
|
||
target="_blank">蜀ICP备2022022932号-2</a></p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!-- footer end -->
|
||
</div>
|
||
<!-- wrapper-box end -->
|
||
|
||
|
||
|
||
<!-- All js here -->
|
||
<script type="text/javascript" src='http://libs.baidu.com/jquery/2.0.0/jquery.js'></script>
|
||
<script src="js/vendor/modernizr-3.5.0.min.js"></script>
|
||
<script src="js/vendor/jquery-1.12.4.min.js"></script>
|
||
<script src="js/popper.min.js"></script>
|
||
<script src="js/bootstrap.min.js"></script>
|
||
<script src="js/isotope.pkgd.min.js"></script>
|
||
<script src="js/jquery.magnific-popup.min.js"></script>
|
||
<script src="js/jquery.nice-select.min.js"></script>
|
||
<script src="js/jquery.meanmenu.min.js"></script>
|
||
<script src="js/jquery.counterup.min.js"></script>
|
||
<script src="js/waypoints.min.js"></script>
|
||
<script src="js/slick.min.js"></script>
|
||
<script src="js/plugins.js"></script>
|
||
<script src="js/main.js"></script>
|
||
<script>
|
||
(function ($, window, document, undefinen) {
|
||
$.fn.bannerSwiper = function (option) {
|
||
this.default = {
|
||
boxWrap: null,//必填
|
||
nextBtn: false,//是否往下启动按钮
|
||
prevBtn: false,//是否往上启动按钮
|
||
autoPlay: false,//是否启动自动播放
|
||
times: 6000,//自动轮播的时间间隔,
|
||
speed: 400,//点击按钮是切换的速度
|
||
circle: false,//是否启动小圆点
|
||
circleAlign: "center",//小圆点的对其方式
|
||
circleClick: false//小圆点是否可以点击
|
||
}
|
||
var self = this;
|
||
this.time = null;
|
||
this.options = $.extend({}, this.default, option);
|
||
self.flag = true;
|
||
// 插件入口
|
||
this.init = function () {
|
||
this.bulid();
|
||
}
|
||
this.bulid = function () {
|
||
var self = this;
|
||
var wrap = self.options.boxWrap;
|
||
self.num = 1;
|
||
self.nowTime = +new Date();
|
||
self.width = $(window).width();
|
||
var firstImg = $(wrap).find('li').first();
|
||
var lastImg = $(wrap).find('li').last();
|
||
$(wrap).append(firstImg.clone());
|
||
$(wrap).prepend(lastImg.clone());
|
||
self.length = $(wrap).find('li').length;
|
||
$(wrap).width(self.width * self.length);
|
||
$(wrap).find('li').width(self.width)
|
||
$(wrap).parent().height(480);
|
||
$(wrap).parent().width(self.width);
|
||
$(wrap).css({ 'left': -self.width * self.num })
|
||
// 是否启动自动轮播
|
||
if (self.options.autoPlay) {
|
||
self.plays();
|
||
}
|
||
// 是否启动按钮
|
||
if (self.options.nextBtn) {
|
||
self.NextBtn();
|
||
}
|
||
// 是否启动按钮
|
||
if (self.options.prevBtn) {
|
||
self.prevBtn();
|
||
}
|
||
// 是否启动小圆点
|
||
if (self.options.circle) {
|
||
self.circle()
|
||
}
|
||
if (self.options.circleClick) {
|
||
self.clickCircle();
|
||
}
|
||
}
|
||
// // 鼠标移入时
|
||
self.on('mouseenter', function () {
|
||
self.stops();
|
||
})
|
||
// 鼠标移出时
|
||
self.on('mouseleave', function () {
|
||
self.plays(1);
|
||
})
|
||
// 开始计时器，自动轮播
|
||
this.plays = function () {
|
||
var self = this;
|
||
// self.stops();
|
||
console.log('play')
|
||
this.time = setInterval(function () {
|
||
self.go(-self.width)
|
||
}, self.options.times);
|
||
}
|
||
// 停止计时器
|
||
this.stops = function () {
|
||
console.log('stop');
|
||
clearInterval(self.time)
|
||
}
|
||
// 手动创建按钮元素
|
||
this.prevBtn = function () {
|
||
var self = this;
|
||
var ele = $("<a id='prevBtn'><</a>");
|
||
self.append(ele);
|
||
$('#prevBtn').bind("click", function () {
|
||
self.go(self.width);
|
||
})
|
||
}
|
||
// 手动创建按钮元素
|
||
this.NextBtn = function () {
|
||
var self = this;
|
||
var ele = $("<a id='nextBtn'>></a>");
|
||
self.append(ele)
|
||
$('#nextBtn').bind("click", function () {
|
||
self.go(-self.width);
|
||
})
|
||
}
|
||
// 手动创建小圆点
|
||
this.circle = function () {
|
||
var self = this;
|
||
var ele = $('<div id="circle-wrap"></div>');
|
||
for (var i = 0; i < self.length - 2; i++) {
|
||
$('<a class="dot" rel="external nofollow" ></a>').appendTo(ele)
|
||
}
|
||
ele.css({
|
||
"position": "absolute",
|
||
'bottom': '0',
|
||
'right': '0',
|
||
'left': '0',
|
||
'height': '20px',
|
||
"padding": "0 10px",
|
||
'text-align': self.options.circleAlign
|
||
});
|
||
self.append(ele);
|
||
self.playCircle(this.num - 1);
|
||
}
|
||
//小圆点指定当前项
|
||
this.playCircle = function (num) {
|
||
$('#circle-wrap').find('.dot').eq(num).addClass('on').siblings().removeClass('on');
|
||
}
|
||
// 点击小圆点
|
||
this.clickCircle = function () {
|
||
var self = this;
|
||
$('#circle-wrap').find('.dot').on('click', function () {
|
||
self.num = $(this).index() + 1;
|
||
self.circlePlay()
|
||
})
|
||
}
|
||
// 点击小圆点，图片切换
|
||
this.circlePlay = function () {
|
||
self.flag = true;
|
||
if (self.flag) {
|
||
self.flag = false;
|
||
$(self.options.boxWrap).stop().animate({
|
||
'left': -self.num * self.width
|
||
}, self.options.speed, function () {
|
||
self.flag = true;
|
||
});
|
||
}
|
||
self.playCircle(this.num - 1);
|
||
}
|
||
// 点击按钮，进行轮播,以及自动轮播
|
||
this.go = function (offset) {
|
||
var self = this;
|
||
if (self.flag) {
|
||
self.flag = false;
|
||
if (offset < 0) {
|
||
self.num++;
|
||
if (self.num > self.length - 2) {
|
||
self.num = 1;
|
||
}
|
||
}
|
||
if (offset > 0) {
|
||
self.num--;
|
||
if (self.num <= 0) {
|
||
self.num = self.length - 2
|
||
}
|
||
}
|
||
if (Math.ceil($(self.options.boxWrap).position().left) < -(self.length - 2) * self.width) {
|
||
$(self.options.boxWrap).css({
|
||
'left': -self.width
|
||
});
|
||
}
|
||
if (Math.ceil($(self.options.boxWrap).position().left) > -self.length) {
|
||
$(self.options.boxWrap).css({
|
||
'left': -self.width * (self.length - 2)
|
||
})
|
||
}
|
||
self.playCircle(this.num - 1);
|
||
$(self.options.boxWrap).stop().animate({
|
||
'left': $(self.options.boxWrap).position().left + offset
|
||
}, self.options.speed, function () {
|
||
self.flag = true;
|
||
});
|
||
}
|
||
}
|
||
this.init();
|
||
}
|
||
})(jQuery, window, document)
|
||
$('.banner').bannerSwiper({
|
||
boxWrap: "#banner-wrap",
|
||
nextBtn: true,
|
||
prevBtn: true,
|
||
autoPlay: true,
|
||
circle: true,
|
||
circleClick: true
|
||
})
|
||
var _hmt = _hmt || [];
|
||
(function () {
|
||
var hm = document.createElement("script");
|
||
hm.src = "https://hm.baidu.com/hm.js?0f0e06c3447c284d5513c74759d17cb9";
|
||
var s = document.getElementsByTagName("script")[0];
|
||
s.parentNode.insertBefore(hm, s);
|
||
})();
|
||
</script>
|
||
</body>
|
||
|
||
</html> |