|
|
@@ -20,11 +20,6 @@
|
|
|
<!--====== Style css ======-->
|
|
|
<link rel="stylesheet" href="../assets/css/style.css" />
|
|
|
|
|
|
- <!-- 走马灯 -->
|
|
|
- <link rel="stylesheet" type="text/css" href="https://www.jq22.com/demo/jqswipepmd202005102134/css/swiper.css" />
|
|
|
- <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.3.8/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
|
|
|
-
|
|
|
-
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
@@ -205,40 +200,23 @@
|
|
|
</div>
|
|
|
<div class="row">
|
|
|
|
|
|
- <div class="swiper-container" id="case4">
|
|
|
- <div class="swiper-wrapper">
|
|
|
- <div class="col-md-3 col-3 swiper-slide">
|
|
|
- <img src="../assets/img/about/honor1.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="col-md-3 col-3 swiper-slide">
|
|
|
- <img src="../assets/img/about/honor2.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="col-md-3 col-3 swiper-slide">
|
|
|
- <img src="../assets/img/about/honor3.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="col-md-3 col-3 swiper-slide">
|
|
|
- <img src="../assets/img/about/honor4.png" alt="">
|
|
|
+ <div id="marquee_box">
|
|
|
+ <div id="marquee_img">
|
|
|
+ <div id="marquee_img1">
|
|
|
+ <img src="../assets/img/about/honor1.png" />
|
|
|
+ <img src="../assets/img/about/honor2.png" />
|
|
|
+ <img src="../assets/img/about/honor3.png" />
|
|
|
+ <img src="../assets/img/about/honor4.png" />
|
|
|
+ <img src="../assets/img/about/honor1.png" />
|
|
|
+ <img src="../assets/img/about/honor2.png" />
|
|
|
+ <img src="../assets/img/about/honor3.png" />
|
|
|
+ <img src="../assets/img/about/honor4.png" />
|
|
|
</div>
|
|
|
+ <div id="marquee_img2"></div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
- <!-- <div class="col-md-3 col-3">
|
|
|
- <img src="../assets/img/about/honor1.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="col-md-3 col-3">
|
|
|
- <img src="../assets/img/about/honor2.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="col-md-3 col-3">
|
|
|
- <img src="../assets/img/about/honor3.png" alt="">
|
|
|
- </div>
|
|
|
- <div class="col-md-3 col-3">
|
|
|
- <img src="../assets/img/about/honor4.png" alt="">
|
|
|
- </div> -->
|
|
|
</div>
|
|
|
|
|
|
- <!-- <img src="../assets/img/about/honor.png" onclick="javascript: window.open('../assets/img/about/honor.png')" /> -->
|
|
|
</div>
|
|
|
</section>
|
|
|
<!--====== CREDENTIAL END======-->
|
|
|
@@ -401,23 +379,29 @@
|
|
|
<script src="../assets/js/exampleinfo.js"></script>
|
|
|
<!--====== Vue js======-->
|
|
|
<script src="../assets/js/vue.min.js"></script>
|
|
|
- <script>
|
|
|
- $(function() {
|
|
|
- var swiper = new Swiper('#case4', {
|
|
|
- loop: true, //允许从第一张到最后一张，或者从最后一张到第一张 循环属性
|
|
|
- slidesPerView: 4, // 设置显示三张
|
|
|
- //centeredSlides : true, //使当前图片居中显示
|
|
|
- slidesPerGroup: 1, //定义1张图片为一组
|
|
|
- autoplay: true, //可选选项，自动滑动
|
|
|
- speed: 2000, //设置过度时间
|
|
|
- grabCursor: true, //鼠标样式根据浏览器不同而定
|
|
|
- autoplay: {
|
|
|
- delay: 1,
|
|
|
- disableOnInteraction: false,
|
|
|
- },
|
|
|
- /* 设置每隔3000毫秒切换 */
|
|
|
- });
|
|
|
- })
|
|
|
+
|
|
|
+ <script language="javascript">
|
|
|
+ // 走马灯
|
|
|
+ var speed = 10; //数字越大速度越慢
|
|
|
+ var tab = document.getElementById("marquee_box");
|
|
|
+ var tab1 = document.getElementById("marquee_img1");
|
|
|
+ var tab2 = document.getElementById("marquee_img2");
|
|
|
+ tab2.innerHTML = tab1.innerHTML;
|
|
|
+
|
|
|
+ function Marquee() {
|
|
|
+ if (tab2.offsetWidth - tab.scrollLeft <= 0)
|
|
|
+ tab.scrollLeft -= tab1.offsetWidth
|
|
|
+ else {
|
|
|
+ tab.scrollLeft++;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var MyMar = setInterval(Marquee, speed);
|
|
|
+ tab.onmouseover = function() {
|
|
|
+ clearInterval(MyMar)
|
|
|
+ };
|
|
|
+ tab.onmouseout = function() {
|
|
|
+ MyMar = setInterval(Marquee, speed)
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
|
ming