如何制作图片滚动展示横向二级导航菜单

我们在浏览一些大型商城网站时，经常会看到一些非常漂亮的二级导航菜单。它的二级导航菜单并不是常见的网站导航的二级下拉菜单，而是图片展示列表，并且可以进行滚动展示。效果如下图：

怎么在自己做网站时也能做出这样的图片滚动展示横向二级导航菜单呢？下面学做网站论坛就来讲一下方法。

方法/步骤

1. 制作滚动展示版块，用于显示图片横向列表；HTML代码如下：

   
   <div class="Box">
   
   ?      <div class="content">       
   
   
   
   ?          <div class="Box_con clearfix">
   
   ?              <span class="btnl btn" id="btnl"></span>
   
   ?              <span class="btnr btn" id="btnr"></span>
   
   
   
   ?              <div class="conbox" id="BoxUl">
   
                       <ul>
   
   
   
                           <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
   
   
               <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
               <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
               <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
               <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
               <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
               <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
               <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.com/1.jpg"><p>S60 Lite</p></a></li>
   
   
   
   ?                  </ul>
   
   ?              </div>
   
   
   
   ?          </div>
   
   
   
   ?      </div>
   
   ?   </div>
   
   

2. 再给图片展示区域添加CSS样式；CSS样式如下：

   
   .Box {position: fixed;right: 0;left: 0;z-index: 1031;background:#fff;box-shadow: 0 0 10px rgba(0,0,0,0.15);}
   
   .Box .content {width: 1170px;margin: 0 auto;}
   
   .Box h2 {text-align: center;margin-bottom: 35px;padding-top: 250px;}
   
   .Box .Box_con {position: relative;}
   
   .Box .Box_con .btnl {position: absolute;}
   
   .Box .Box_con .btn {display: block;width: 41px;height: 41px;position: absolute;top: 50px;cursor: pointer;}
   
   .Box .Box_con .btnl {background: url(images/jtl02.png) no-repeat center;left: -72px;}
   
   .Box .Box_con .btnr {background: url(images/jtr02.png) no-repeat center;right: -72px;}
   
   .Box .Box_con .btnl:hover {background: url(images/jtl03.png) no-repeat center;}
   
   .Box .Box_con .btnr:hover {background: url(images/jtr03.png) no-repeat center;}
   
   .Box .Box_con .conbox {position: relative;overflow: hidden;}
   
   .Box .Box_con .conbox ul {position: relative;}
   
   .Box .Box_con .conbox ul li {float: left;width: 155px;height: 180px;margin-left: 40px;text-align:center;overflow: hidden;}
   
   .Box .Box_con .conbox ul li:first-child {margin-left: 20px;}
   
   .Box .Box_con .conbox ul li img {display: block;width: 100px;height: 123px;margin:15px auto 10px;transition: all 0.5s;}
   
   .Box .Box_con .conbox ul li:hover img {transform: scale(1.1);}
   
   

3. 通过上面的HTML和CSS就可以制作出图片展示区块。但如果想让它们滚动起来，还需要加上JS代码，放在整个页面代码的底部。代码如下：

   
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   
   <script type="text/javascript">
   
   ?      //滚动元素id，左切换按钮，右切换按钮，切换元素个数id,滚动方式，切换方向，是否自动滚动，滚动距离，滚动时间，滚动间隔，显示个数
   
   ?      LbMove('BoxUl','btnr','btnl','BoxSwitch',true,'left',true,195,1000,3000,6);
   
   
   
   ?   </script>
   
   

4. 下载一个控制图片滚动的JQUERY插件，下载地址：sub.js，并用以下的代码引用到自己的网站上。放在</head>标签上面；

   
   <script src="sub.js"></script>//记得修改JS的路径
   
   

5. 这样一个可以滚动图片展示的区域就制作好了。（为了防止一些新手学建网站不懂代码，这里也提示了演示网页的下载。下载地址：https://pan.baidu.com/s/1JMhxLjHZPR2JWO_V7DU7Bw
6. 制作好展示区域之后，就是实现当鼠标指向菜单时，才显示这个图片展示横向二级导航菜单，当鼠标离开时，自动隐藏。方法见：https://www.xuewangzhan.com/wenti/18516.html

通过以上步骤的操作，就可以在自己建网站时，在自己的网站导航上制作这样的图片滚动展示横向二级导航菜单了。

标签： isp 代码 建网站 学建网站

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。