白色简约模板导航菜单美化。

athome 小手牵大手 关注 七级站长 VIP
发表于站长交流区版块
Image



1:根据官方提供的代码,修改了css,增加了轮播图效果。(手动滑动,不是自动)

2:轮播图下部增加导航菜单。默认4个

3:下面是css部分,放在后台—白色简约导航菜单里。

4:图片链接及地址自行更改。

5:于2019/6/11 重新编辑

  1. <script src="http://m.hadsky.com/template/puyuetian_baisejianyue/js/swipe.min.js"></script>
<style type="text/css"> .swipe {overflow: hidden;visibility: hidden;position: relative;} .swipe>div:nth-of-type(2) {position: relative;bottom: 15px;} .swipe>div:nth-of-type(2)>span {display: inline-block;width: 9px;height: 9px;border-radius: 49%;border: solid 1px #fff;margin-right: 8px;} .swipe-wrap {overflow: hidden;position: relative;} .swipe-wrap>div {float: left;width: 100%;position: relative;} .pk-powheight{height:193px;} .pk-height {height:70px;} .pk-rowimg{position:absolute;top:0;left:0;width:100%;height:193px;} .pk-rowsp{text-align:left;position:absolute;bottom:0;left:0;height:43px;line-height: 41px;background: rgba(39,39,39,0.7); color:#fff;width:100%;padding:0 10px 0 10px;overflow: hidden;} </style> <div id='slider' class='swipe'> <div class='swipe-wrap'> <div><div class="pk-row pk-powheight"> <a href=""><img src="/0.jpg" class="pk-rowimg"></a> <a href=""><p class="pk-rowsp pk-text-md">蓝鲸休闲驿站</p></a> </div></div> <div><div class="pk-row pk-powheight"> <a href=""><img src="/0.jpg" class="pk-rowimg"></a> <p class="pk-rowsp pk-text-md"> 待定2</p> </div></div> <div><div class="pk-row pk-powheight"> <a href="#"><img src="/0.jpg" class="pk-rowimg"></a> <p class="pk-rowsp pk-text-md">待定3</p> </div></div> </div><div></div>
  1. <script>
  2. //导航链接的处理,添加定位控制参数
  3. $('#slider .swipe-wrap>div a').each(function() {
  4. var h2;
  5. $(this).attr('href').indexOf('?') == -1 ? h2 = '?' : h2 = '&';
  6. $(this).attr('href', $(this).attr('href') + h2 + 'swipe_div_index=' + $(this).parent().parent().parent().index() + '&swipe_a_index=' + $(this).parent().index());
  7. });
  8. //添加下面的小灰点
  9. $('#slider .swipe-wrap>div').each(function() {
  10. $('#slider>div:eq(1)').append('<span></span>');
  11. });
  12. //跳至并选中导航链接
  13. var swipe_div_index = $_GET('swipe_div_index') || 0;
  14. var swipe_a_index = $_GET('swipe_a_index') || -1;
  15. if(swipe_a_index > -1) {
  16. $('#slider .swipe-wrap>div:eq(' + swipe_div_index + ') a:eq(' + swipe_a_index + ')').css('opacity', 0.2).attr('href', 'javascript:');
  17. }
  18. $('#slider>div:eq(1)>span:eq(' + swipe_div_index + ')').css('background-color', '#777');
  19. window.mySwipe = Swipe($('#slider')[0], {
  20. startSlide: swipe_div_index,
  21. callback: function(index, elem) {
  22. $('#slider>div:eq(1)>span').css('background-color', '#FFF');
  23. $('#slider>div:eq(1)>span:eq(' + index + ')').css('background-color', '#777');
  24. }
  25. });
  26. </script>
<div class="pk-row pk-background-color-white pk-text-center pk-margin-bottom-10"> <div class="pk-w-sm-3"> <a href="/index.php?c=list"> <span class="fa fa-cog fa-2x pk-padding-5" style="display: block;color: #212121;"></span> <span>最新动态</span> </a></div> <div class="pk-w-sm-3"> <a href="/index.php?c=forum"> <span class="fa fa-th fa-2x pk-padding-5" style="display: block;color: #212121;"></span> <span>版块列表</span> </a></div> <div class="pk-w-sm-3"> <a href="javascript:void(0);" onclick="show();"> <span class=" fa fa-bullhorn fa-2x pk-padding-5 " style="display: block;color: #212121;"></span> <span>头条</span> </a></div> <div class="pk-w-sm-3"> <a href="/index.php"> <span class="fa fa-star-o fa-2x pk-padding-5" style="display: block;color: #212121;"></span> <span>反馈建议</span> </a></div> </div></div>
喜欢点赞呀。。。

评论列表 评论
athome 小手牵大手 七级站长 VIP 2#
里面的图片地址都是防盗链,需要自己更换。
共0条回复,点击查看回复
替换原有的css。把原来的删掉
共0条回复,点击查看回复
mmy421 mmy421 五级站长 VIP 4#
zhichil支持了
共0条回复,点击查看回复
luntanooo 萝莉图 二级站长 普通 5#
可以哦
共0条回复,点击查看回复
发布评论

评论: 白色简约模板导航菜单美化。

已有1次打赏
乐天打赏给楼主27天豆,2018-05-18 08:14:16
(11) 分享
分享

请保存二维码或复制链接进行分享

取消