From 0295c38f8007f6069a5872004e03e9cd33271135 Mon Sep 17 00:00:00 2001 From: chenbiao Date: Wed, 23 Jan 2019 19:59:27 +0800 Subject: [PATCH] add 首页新增新闻中心 --- images/news/index_news_1.jpg | Bin 0 -> 35995 bytes images/news/index_news_2.jpg | Bin 0 -> 128753 bytes images/news/index_news_3.jpg | Bin 0 -> 198020 bytes images/news/point.png | Bin 0 -> 90 bytes index.html | 46 ++++++++++++++++++++++++++++++++++++++++++++++ js/main.js | 118 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---- newsdata/newslistdata.json | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ newsdata/swipernewsdata.json | 20 ++++++++++++++++++++ style.css | 110 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 352 insertions(+), 4 deletions(-) create mode 100644 images/news/index_news_1.jpg create mode 100644 images/news/index_news_2.jpg create mode 100644 images/news/index_news_3.jpg create mode 100644 images/news/point.png create mode 100644 newsdata/newslistdata.json create mode 100644 newsdata/swipernewsdata.json diff --git a/images/news/index_news_1.jpg b/images/news/index_news_1.jpg new file mode 100644 index 0000000..fa1fb43 Binary files /dev/null and b/images/news/index_news_1.jpg differ diff --git a/images/news/index_news_2.jpg b/images/news/index_news_2.jpg new file mode 100644 index 0000000..3f6c188 Binary files /dev/null and b/images/news/index_news_2.jpg differ diff --git a/images/news/index_news_3.jpg b/images/news/index_news_3.jpg new file mode 100644 index 0000000..7cf0789 Binary files /dev/null and b/images/news/index_news_3.jpg differ diff --git a/images/news/point.png b/images/news/point.png new file mode 100644 index 0000000..957a275 Binary files /dev/null and b/images/news/point.png differ 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; +} + + + + -- libgit2 0.21.4