diff --git a/images/news/index_news_1.jpg b/images/news/index_news_1.jpg new file mode 100644 index 0000000..fa1fb43 --- /dev/null +++ b/images/news/index_news_1.jpg diff --git a/images/news/index_news_2.jpg b/images/news/index_news_2.jpg new file mode 100644 index 0000000..3f6c188 --- /dev/null +++ b/images/news/index_news_2.jpg diff --git a/images/news/index_news_3.jpg b/images/news/index_news_3.jpg new file mode 100644 index 0000000..7cf0789 --- /dev/null +++ b/images/news/index_news_3.jpg diff --git a/images/news/point.png b/images/news/point.png new file mode 100644 index 0000000..957a275 --- /dev/null +++ b/images/news/point.png diff --git a/index.html b/index.html index c6f732b..e4fe85f 100755 --- a/index.html +++ b/index.html @@ -201,7 +201,52 @@ +
+
+
+
+
+

新闻中心

+
+
+
+
+
+
+ + +
+
+
+
    +
    +
    +
    +
    @@ -227,6 +272,7 @@ + diff --git a/js/main.js b/js/main.js index abed61e..b1a0a9d 100755 --- a/js/main.js +++ b/js/main.js @@ -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( + '
    ', + '', + '
    ', + '

    ' + obj.newsTitle + '

    ', + '
    ', + '', + '    ', + '
    ' + ) + }); + 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( + '
  • ', + '

    ', + '' + commonStrandNum.cutString(obj.newsTitle, 26) +'', + ''+obj.time+'', + '

    ', + '
    • ' + ) + }); + 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 diff --git a/newsdata/newslistdata.json b/newsdata/newslistdata.json new file mode 100644 index 0000000..3a56638 --- /dev/null +++ b/newsdata/newslistdata.json @@ -0,0 +1,62 @@ +[ + { + "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" + } + + ] diff --git a/newsdata/swipernewsdata.json b/newsdata/swipernewsdata.json new file mode 100644 index 0000000..39ff485 --- /dev/null +++ b/newsdata/swipernewsdata.json @@ -0,0 +1,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" + } +] diff --git a/style.css b/style.css index 08ad15e..75b1de4 100755 --- a/style.css +++ b/style.css @@ -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; +} + + + +