add 首页新增新闻中心

Andy
1 parent 85c3efcc
Showing 9 changed files with 352 additions and 4 deletions
images/news/index_news_1.jpg
images/news/index_news_2.jpg
images/news/index_news_3.jpg
images/news/point.png
index.html
js/main.js
newsdata/newslistdata.json
newsdata/swipernewsdata.json
style.css
@@ -201,7 +201,52 @@
         </div>
     </div>
 </section>
+<section  class="section index-news-section" style="background: #fff;">
+    <div class="container">
+        <div class="row">
+            <div class="col-md-12">
+                <div class="section-title">
+                    <h2>新闻中心</h2>
+                </div>
+            </div>
+        </div>
+        <div class="news-bd">
+            <div class="focus swiper-container" id="swiper-container-news">
+                <div class="swiper-wrapper index_slide_list">
+
+                    <!--<div class="swiper-slide">
+                        <a href="https://mp.weixin.qq.com/s/NcWXfcxjy5t-sqG2yFg6JQ" class="swiper-slide news_a">
+                            <div class="news_title">
+                                <p>中兴智能交通助力西部大发展，建设甘肃省周边“一带一路”沿线城市的智慧停车</p>
+                            </div>
+                            <img class="banner" src="images/news/index_news_1.jpg" alt="" width="100%">
+                        </a>
+                    </div>
+                    <div class="swiper-slide swiper-slide-new2">
+                        <a href="https://mp.weixin.qq.com/s/bO_1as7-8enGR7g4sI_6lw" class="swiper-slide news_a">
+                            <div class="news_title">
+                                <p>年度盘点丨2018，中兴智能交通铸就辉煌</p>
+                            </div>
+                            <img class="banner" src="images/news/index_news_2.jpg" alt="" width="100%">
+                        </a>
+                    </div>
+                    <div class="swiper-slide swiper-slide-new3">
+                        <a href="https://mp.weixin.qq.com/s/ZJCdWCWCkrxtmOCep9fvwQ" class="swiper-slide news_a">
+                            <div class="news_title">
+                                <p>中兴智能交通荣获”2018中国城市无人化停车十大创新方案”称号</p>
+                            </div>
+                            <img class="banner" src="images/news/index_news_3.jpg" alt="" width="100%">
+                        </a>
+                    </div>-->
+                </div>
+            </div>
+            <div class="newslist">
+                <ul></ul>
+            </div>
+        </div>
+    </div>
+</section>
 <!-- Footer Area -->
@@ -227,6 +272,7 @@
 <!--<script type="text/javascript" src="js/particle-code.js"></script>-->
 <script type="text/javascript" src="js/jquery.counterup.min.js"></script>
 <script type="text/javascript" src="js/swiper.js"></script>
+<!--<script type="text/javascript" src="js/idangero.swiper.js"></script>-->
 <script type="text/javascript" src="js/gmaps.min.js"></script>
 <script type="text/javascript" src="js/nav-footer.js?a=2"></script>
 <script type="text/javascript" src="js/main.js?a=1"></script>
@@ -170,8 +170,6 @@
 		});
-
-
 		// Preloader
 		$(window).on('load', function() {
 				$('.loader').fadeOut('slow', function(){
@@ -179,6 +177,92 @@
 			});
 		});
+        /*
+        @	chenbiao
+        @   2018-01-23
+        @   首页新闻列表 轮播
+        */
+        // 首页新闻图片轮播数据渲染
+        function indexImgSlide(){
+            var indexSlideList = $('.index_slide_list');
+            var imgList= [];
+            //直接使用ajax访问
+            $.ajax({
+                type:'get',
+                url:'newsdata/swipernewsdata.json',
+                dataType:'json',
+                success:function(data){
+                    $.each(data, function(i, obj){
+                        imgList.push(
+                            '<div class="swiper-slide red-slide">',
+                            '<a href="'+obj.href+'" class="swiper-slide news_a">',
+                            '<div class="news_title">',
+                            '<p>' + obj.newsTitle + '</p>',
+                            '</div>',
+                            '<img class="banner" src="'+obj.imgUrl+'" alt="" width="100%">',
+                            '</a>',
+                            '</div>'
+                        )
+                    });
+                    indexSlideList.html(imgList.join(' '));
+                    var mySwipernews = new Swiper ('#swiper-container-news', {
+                        direction: 'horizontal',
+                        loop: true,
+                        speed: 500, //设置轮播时长 可以不设置 会有个默认值
+                        autoplay: true,//可选选项，自动滑动
+                        // 如果需要分页器
+                        pagination: {
+                            el: '.swiper-pagination',
+                            clickable:true
+                        },
+                        autoplay: {
+                            disableOnInteraction: false,  //点击后继续轮播(这个很重要)
+                            delay: 3000,                       //自动轮播的每次的时间 可以不设置 会有个默认值
+                        },
+                        // 如果需要前进后退按钮
+
+
+                    });
+                }
+            });
+
+        }
+
+        indexImgSlide();
+
+
+        /*
+        @	chenbiao
+        @   2018-01-23
+ 		@   首页新闻列表 右侧
+ 		*/
+        function indexNewsList(){
+            var newslist = $('.newslist ul');
+            var list= [];
+            //直接使用ajax访问
+            $.ajax({
+                type:'get',
+                url:'newsdata/newslistdata.json',
+                dataType:'json',
+                success:function(data){
+                    $.each(data, function(i, obj){
+                        list.push(
+                            '<li>',
+                            '<p class="pos-rel">',
+                            '<a href="'+obj.href+'">' + commonStrandNum.cutString(obj.newsTitle, 26) +'</a>',
+                            '<span class="pos-abs" style="bottom: 0px;right: 2px;color: rgba(0,0,0,0.5)">'+obj.time+'</span>',
+                            '</p>',
+                            '</li>'
+                        )
+                    });
+                    newslist.html(list.join(' '));
+                }
+            })
+        }
+        indexNewsList();
+
+
+
     var mySwiper = new Swiper ('#swiper-container-index', {
       direction: 'horizontal',
       loop: true,
@@ -196,5 +280,31 @@
       // 如果需要前进后退按钮
-    })
-
+    });
+
+
+
+        /*
+		@	cb
+        @   2018-01-23
+        @   切割字符串方法  commonStrandNum.cutString(str, 25)
+        */
+
+        var commonStrandNum = {
+            /*
+             @切割字符串
+             @str原字符串
+             @num字符位数
+             */
+            cutString: function (str, num) {
+                var _str = "";
+                if (str.length >= num) {
+                    var strN = str.substring(0, num);
+                    strN += "...";
+                    _str = strN;
+                } else {
+                    _str = str;
+                }
+                return _str;
+            },
+        }
 \ No newline at end of file
+[
+    {
+      "href":"https://mp.weixin.qq.com/s/NcWXfcxjy5t-sqG2yFg6JQ",
+      "newsTitle":"中兴智能交通助力西部大发展，建设甘肃省周边“一带一路”沿线城市的智慧停车",
+      "img":"http://www.zte-its.com/Upload/2019-01/20190107134910953.jpg",
+      "time":"2019-01-06"
+    },
+    {
+      "href":"https://mp.weixin.qq.com/s/bO_1as7-8enGR7g4sI_6lw",
+      "newsTitle":"年度盘点丨2018，中兴智能交通铸就辉煌",
+      "img":"http://www.zte-its.com/Upload/2019-01/20190107120328342.jpg",
+      "time":"2018-12-30"
+    },
+    {
+      "href":"https://mp.weixin.qq.com/s/ZJCdWCWCkrxtmOCep9fvwQ",
+      "newsTitle":"中兴智能交通荣获”2018中国城市无人化停车十大创新方案”称号",
+      "img":"http://www.zte-its.com/Upload/2019-01/20190114111641907.jpg",
+      "time":"2019-01-14"
+    },
+    {
+      "href":"https://mp.weixin.qq.com/s/ilplSVvIBUt0sDtqTgsgbw",
+      "newsTitle":"赤峰智慧停车项目正式上线运营",
+      "img":"http://www.zte-its.com/ckfinder/userfiles/images/Snap2(34).jpg",
+      "time":"2018-12-26"
+    },
+    {
+      "href":"https://mp.weixin.qq.com/s/j4FJmW-dAMAKK8WBilHSzw",
+      "newsTitle":"物联网下的智慧停车，中兴智能交通应邀出席“2018第三届中国物联网国际峰会”",
+      "img":"http://www.zte-its.com/Upload/2018-05/20180529172415999.jpg",
+      "time":"2018-05-15"
+    },
+    {
+      "href":"https://mp.weixin.qq.com/s/Q3V4F0PHm0cS7a-zlXx6OA",
+      "newsTitle":"【行业动态】贵州机动车停放收费新规5月起试行 小区停车费由业主大会决定",
+      "img":"http://www.zte-its.com/Upload/2018-08/20180808173733771.jpg",
+      "time":"2018-04-24"
+    },
+    {
+      "href":"https://mp.weixin.qq.com/s/BEyfUDkfrZqLokZxoKp04Q",
+      "newsTitle":"【行业动态】广州停车场条例10月起施行 小区停车收费标准先议价",
+      "img":"http://www.zte-its.com/Upload/2018-09/20180918095140370.jpg",
+      "time":"2018-04-24"
+    },
+    {
+      "href":"https://mp.weixin.qq.com/s/-ltsBzboxdeCzwz4-nOy0Q",
+      "newsTitle":"【行业动态】2018雄安新区停车设备设施投资建设高峰论坛暨博览会在雄安新区隆重召开！",
+      "img":"https://mmbiz.qpic.cn/mmbiz_jpg/eRs8EuRTNC1tBsAtYFuuFx3SgKrPpkMYib3bP9kBKnxqcwcosVOUc5iaF4hQ9JkHfZib0SWuANXAuzI8u4vzWgDFA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1",
+      "time":"2018-04-20"
+    },
+    {
+      "href":"https://mp.weixin.qq.com/s/3tWOAvnXl5T78TzBPgWszA",
+      "newsTitle":"【行业动态】滴滴发布企业公民报告：让城市交通更智慧 运行更高效",
+      "img":"https://mmbiz.qpic.cn/mmbiz_jpg/uWQ5Iz1kD2bHvLt6DEdN4ib00PeTsmxiaTye2BHMuxXSD7Z51HnBicxNc53FeZceD2ZiaJ4Eq4ft9cHY9Uib1CXNzIA/640?wx_fmt=jpeg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1",
+      "time":"2018-04-20"
+    }, {
+      "href":"https://mp.weixin.qq.com/s/ZrDwirjt0JTntmcCI5L4Ag",
+      "newsTitle":"【行业动态】昆明停车管理新规 力图破解“圈地收费”乱象",
+      "img":"http://www.zte-its.com/Upload/2018-05/20180529173902781.jpg",
+      "time":"2018-04-20"
+    }
+
+  ]
+[
+  {
+    "href":"https://mp.weixin.qq.com/s/NcWXfcxjy5t-sqG2yFg6JQ",
+    "newsTitle":"中兴智能交通助力西部大发展，建设甘肃省周边“一带一路”沿线城市的智慧停车",
+    "imgUrl":"http://www.zte-its.com/Upload/2019-01/20190107134910953.jpg",
+    "time":"2019-01-06"
+  },
+  {
+    "href":"https://mp.weixin.qq.com/s/bO_1as7-8enGR7g4sI_6lw",
+    "newsTitle":"年度盘点丨2018，中兴智能交通铸就辉煌",
+    "imgUrl":"http://www.zte-its.com/Upload/2019-01/20190107120328342.jpg",
+    "time":"2018-12-30"
+  },
+  {
+    "href":"https://mp.weixin.qq.com/s/ZJCdWCWCkrxtmOCep9fvwQ",
+    "newsTitle":"中兴智能交通荣获”2018中国城市无人化停车十大创新方案”称号",
+    "imgUrl":"http://www.zte-its.com/Upload/2019-01/20190114111641907.jpg",
+    "time":"2019-01-14"
+  }
+]
@@ -2538,3 +2538,113 @@ a:hover{
 .slicknav_menu .slicknav_btn{
 	background: #49A4FE !important;
 }
+
+
+/*news 新闻中心*/
+.index-news-section .news-bd{
+	width: 100%;
+	min-width: 1200px;
+	overflow: hidden;
+}
+.index-news-section .focus {
+	width: 476px;
+	height: 289px;
+	float: left;
+	position: relative;
+}
+.index-news-section .newslist {
+	width: 715px;
+	float: left;
+	margin-bottom: 10px;
+}
+.index-news-section .newslist ul {
+	padding: 15px 0;
+	overflow: hidden;
+	list-style: initial;
+	color: #797979;
+}
+.index-news-section .newslist li {
+	width: 286px;
+	height: 45px;
+	line-height: 22px;
+	float: left;
+	margin-left: 70px;
+	list-style: none;
+}
+.index-news-section .newslist li {
+	margin-bottom: 10px;
+	background-image: url(images/news/point.png);
+	background-repeat: no-repeat;
+	background-position: 5px 7px;
+}
+.index-news-section .newslist li p {
+	padding-left: 10px;
+	margin-left: 8px;
+	height: 44px;
+}
+.newslist li a{
+	color: rgba(0,0,0,.6);
+}
+.pos-rel{
+	position: relative;
+}
+.pos-abs{
+	position: absolute;
+}
+/*轮播 */
+.news_a {
+	position: relative;
+	overflow: hidden;
+	display: block;
+	width: 100%;
+	height: 272px;
+}
+.news_title {
+	display: block;
+	position: absolute;
+	bottom: 0;
+	padding: 10px;
+	width: 100%;
+	background: rgba(0,0,0,0.5);
+	color: #fff;
+	font-size: 16px;
+	border-radius: 0 0 5px 5px;
+	text-align: left;
+}
+.news_title p {
+	margin: 0;
+	width: 65%;
+	text-overflow: ellipsis;
+	overflow: hidden;
+	white-space: nowrap;
+}
+.news_a img {
+	width: 100%;
+	height: 272px;
+}
+.pagination{
+	position: absolute;
+	z-index: 20;
+	right: 10px;
+	bottom: 10px;
+	margin: 0;
+	height: 20px;
+}
+.swiper-notification {
+	display: inline-block;
+	width: 28px;
+	height: 6px;
+	border-radius: 0;
+	background: none;
+	margin: 0 5px;
+	opacity: 0.8;
+	border: 1px solid #fff;
+	cursor: pointer;
+}
+.swiper-active-switch {
+	background: #fff;
+}
+
+
+
+