add 关于我们荣誉轮播

Andy
1 parent 4367376a
Showing 11 changed files with 238 additions and 9 deletions
contact.html
css/contact.css
images/cups-1.png
images/cups-2.png
images/cups-3.png
images/cups-4.png
images/cups-5.png
images/cups-6.png
images/cups-7.png
images/cups-8.png
js/contact.js
@@ -53,12 +53,8 @@
 </head>
 <body>
  
-<!-- Header Area -->
-<header id="header" class="header">
-
-</header>
-<!--/ End Header Area -->
-
+<header id="header" class="header"></header>
+<!--topbar 任你停-->
 <div class="contactside-bg" >
     <div class="container">
         <div class="row">
@@ -69,7 +65,7 @@
         </div>
     </div>
 </div>
-
+<!--经典案例-->
 <section id="contact" class="section contact" >
     <div class="container">
         <p class="row">
@@ -127,8 +123,28 @@
         </div>
     </div>
 </section>
+<!--荣誉轮播-->
+<section class="section contact" style="padding-top: 60px;padding-bottom: 0px;">
+    <div class="container">
+        <div class="example-title text-center">服务资质</div>
+        <div class="example-subtitle text-center">打造创新型停车场 轻松停车</div>
+        <div class="box">
+            <dl id="roll">
+                <dd><img src="images/cups-1.png" /></dd>
+                <dd><img src="images/cups-2.png" /></dd>
+                <dd><img src="images/cups-3.png" /></dd>
+                <dd><img src="images/cups-4.png" /></dd>
+                <dd><img src="images/cups-5.png" /></dd>
+                <dd><img src="images/cups-6.png" /></dd>
+                <dd><img src="images/cups-7.png" /></dd>
+                <dd><img src="images/cups-8.png" /></dd>
+            </dl>
+        </div>
  
-<section id="" class="section contact" style="padding-top: 0;padding-bottom: 0;">
+    </div>
+</section>
+<!--联系我们-->
+<section  class="section contact" style="padding-top: 0;padding-bottom: 0;">
     <div class="container">
         <div class="row rnt_pos_rel">
             <div class="contact_msg_cont rnt_pos_abs">
@@ -180,4 +180,22 @@
     font-weight:400;
     color:rgba(0,0,0,1);
     line-height:23px;
-}
 \ No newline at end of file
+}
+
+/* 荣誉 轮播*/
+.box{
+    height: 260px;
+    overflow: hidden;
+    width: 1200px;
+    margin: 60px auto;
+    position: relative;
+}
+#roll{
+    width: 200%;
+}
+#roll dd{
+    width: 382px;
+    height: 260px;
+    float: left;
+    margin-right: 20px;
+}
@@ -442,3 +442,198 @@ option = {
  
 // 使用刚指定的配置项和数据显示图表。
 myChart.setOption(option);
+
+
+/**
+
+ * parallelRoll 左右无缝滚动
+
+ * boxName : 最外层盒子类名
+
+ * tagName : 滚动标签元素
+
+ * time : 滚动间隔时间
+
+ * direction : 滚动方向  right-->向右    left-->向左
+
+ * visual : 可视数
+
+ * prev : 上一张
+
+ * next : 下一张
+
+ * Date: 19-01-24
+
+ * */
+
+(function($){
+
+    $.fn.parallelRoll = function(options){
+
+        var opts = $.extend({}, $.fn.parallelRoll.defaults, options);
+
+        var _this = this;
+
+        var l = _this.find(opts.tagName).length;
+
+        var autoRollTimer;
+
+        var flag = true; // 防止用户快速多次点击上下按钮
+
+        var arr = new Array();
+
+        /**
+
+         * 如果当  (可视个数+滚动个数 >滚动元素个数)  时  为不出现空白停顿   将滚动元素再赋值一次
+
+         * 同时赋值以后的滚动元素个数是之前的两倍  2 * l.
+
+         * */
+
+        if(opts.amount + opts.visual > l){
+
+            _this[0].innerHTML += _this[0].innerHTML;
+
+            l = 2 * l;
+
+        }else{
+
+            l = l;
+
+        }
+
+        var w = $(opts.tagName).outerWidth(true); //计算元素的宽度  包括补白+边框
+
+        _this.css({width: (l * w) + 'px'}); // 设置滚动层盒子的宽度
+
+        return this.each(function(){
+
+            _this.closest('.'+opts.boxName).hover(function(){
+
+                clearInterval(autoRollTimer);
+
+            },function(){
+
+                switch (opts.direction){
+
+                    case 'left':
+
+                        autoRollTimer = setInterval(function(){
+
+                            left();
+
+                        },opts.time);
+
+                        break;
+
+                    case 'right':
+
+                        autoRollTimer = setInterval(function(){
+
+                            right();
+
+                        },opts.time);
+
+                        break;
+
+                    default :
+
+                        alert('参数错误！');
+
+                        break;
+
+                }
+
+            }).trigger('mouseleave');
+
+            $('.'+opts.prev).on('click',function(){
+
+                flag ? left() : "";
+
+            });
+
+            $('.'+opts.next).on('click',function(){
+
+                flag ? right() : "";
+
+            });
+
+        });
+
+        function left(){
+
+            flag = false;
+
+            _this.animate({marginLeft : -(w*opts.amount)},1000,function(){
+
+                _this.find(opts.tagName).slice(0,opts.amount).appendTo(_this);
+
+                _this.css({marginLeft:0});
+
+                flag = true;
+
+            });
+
+        };
+
+        function right(){
+
+            flag = false;
+
+            arr = _this.find(opts.tagName).slice(-opts.amount);
+
+            for(var i = 0; i<opts.amount; i++){
+
+                $(arr[i]).css({marginLeft : -w*(i+1)}).prependTo(_this);
+
+            }
+
+            _this.animate({marginLeft : w*opts.amount},1000,function(){
+
+                _this.find(opts.tagName).removeAttr('style');
+
+                _this.css({marginLeft:0});
+
+                flag = true;
+
+            });
+
+        };
+
+    };
+
+    //插件默认选项
+
+    $.fn.parallelRoll.defaults = {
+
+        boxName : 'box',
+
+        tagName : 'dd',
+
+        time : 3000,  //
+
+        direction : 'left', // 滚动方向
+
+        visual : 3 , //可视数
+
+        prev : 'prev',
+
+        next : 'next',
+
+        amount : 1   // 滚动数  默认是1
+
+    };
+
+})(jQuery);
+
+
+
+$(document).ready(function(){
+
+    $("#roll").parallelRoll({
+
+        amount : 1
+
+    });
+
+});