学做网站培训课程介绍

当前位置:

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

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

图片滚动展示横向二级导航菜单效果图

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

方法/步骤

  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.net/1.jpg"><p>S60 Lite</p></a></li>

                <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.net/1.jpg"><p>S60 Lite</p></a></li>
                <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.net/1.jpg"><p>S60 Lite</p></a></li>
                <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.net/1.jpg"><p>S60 Lite</p></a></li>
                <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.net/1.jpg"><p>S60 Lite</p></a></li>
                <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.net/1.jpg"><p>S60 Lite</p></a></li>
                <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.net/1.jpg"><p>S60 Lite</p></a></li>
                <li class="cur"><a href="#"><img class="img-responsive" src="https://www.xuewangzhan.net/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.net/wenti/18516.html

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

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽
  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 很多企业网站的首页都会做一种动态滚动展示企业产品的效果,是企业网站建设常用的方法。既展示了企业的产品,又让整个网站动静结合,不再毫无生气。
  • 我们在学习网站制作过程,发现很多网站都采用tab切换菜单来显示不同栏目的内容,这样即可以节省网站版面,也可以更多的显示网站的栏目内容。如何在自
  • 感谢VIP学员西宁伍婷无私分享,此模板已通过自己做网站论坛网的审核,大家可放心使用。展示一个桶装水送水公司网站,这也是我第二次提交作业了,
  • 自加入学做网站 论坛VIP学员至今,已有几个月的时间了,一直忙于工作,没什么时间去认真的学习,自从看到论坛中设了这个学员网站模板展示板快,那么多
  • 我们在浏览一些大型商城网站时,经常会看到一些特别漂亮的二级导航菜单。它的二级导航菜单并不是常见的网站导航的二级下拉菜单,而是图片展示列表,并
  • 默认情况下,我们在一个DIV里写了大量的LI标签之后,如果LI标签的宽度超过了DIV的宽度,就会自动换一行显示。但在制作手机网站时,由于导航菜单界面较
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。
  • 感谢VIP学员:卓新红  的无私分享,此模板已通过学做网站论坛网的审核,大家可放心使用。分享一个网址导航站模板,这个网址导航模板可以制作图片
  • Dreamweaver跳转菜单制作 视频教程 (1123736 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web