Jquery实现动态导航栏和轮播导航栏

动态导航栏和轮播导航栏的实现思想：

利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定，在利用$getJSON(url,data,function)请求方法实现获取springmvc传递的list<map<String,Object>>的值。其中还遇到了浏览器兼容问题，主要是Mozilla Firefox兼容margin属性的值的问题，最后解决办法是：创建2（IE和FireFox）种类型的css样式，根据myBrowser()自定义方法判断当前浏览器的类型，分配不同的css样式。

轮播的思想：

设定2个下标变量，一个控制获取list<map<String,Object>>值的起始位，一个控制list<map<String,Object>>值的结束位置。根据下标变量的值控制轮播按钮的显示。

遇到的bind()循环添加值添加最后一次循环值的问题，不过已经解决。解决办法是将bind()里执行的function不要写在循环里，值传递选好的值给functions就可以了。具体的看实现代码。

以下代码css部分是在项目中集成的样式，如果要测试需要自己在修改下。

jquery代码：

$(function () {
    /*获取标签的长度*/
    $("#main_center ul").width();
    /*获取li标签的个数
     var linum=$("#main_center ul li").length;
     //设定ul标签的宽度
     var ulwidth=linum*100+50;

     $("#main_center ul").css("width",ulwidth);
     */
    navBar();
    function navBar() {
        //获取json的导航栏数据信息
        $.getJSON("/Mybatis/navJson",function(data){
            /*总共导航栏的个数*/
            var linum=data.length;
            /*显示的下标，balcknum代表结束位置，nonenum代表起始位置*/
            var blacknum=12;
            var nonenum=0;
            var gbutton=‘‘;
            var bbution=‘‘;
            if (myBrowser()==‘FF‘){
                gbutton="<button id=\"ff_goup\">>></button>";
                bbution="<button id=\"ff_back\"><<</button>";
            }
            if(myBrowser()==‘IE‘){
                gbutton="<button id=\"goup\">>></button>";
                bbution="<button id=\"back\"><<</button>";
            }
            /*添加导航栏信息显示向后*/
            if(linum>12){

                //给按钮绑定修改小标事件
                $("#main_center").append($(gbutton).bind("click",
                    function () {
                        //alert(blacknum+"  "+nonenum);
                        if (12 <= blacknum && blacknum < linum) {
                            /*下标同时加1*/
                            blacknum++;
                            nonenum++;
                        }
                        //控制按钮的显示和隐藏操作
                        backgoupHidden(blacknum,linum,nonenum);
                        //情况ul标签里的信息
                        $("#main_center ul").empty();
                        //alert(blacknum+"  "+nonenum);
                        addNavBar(blacknum, nonenum);
//                //刷新当前页面
//                window.location.reload();

                    }));

                //导航栏信息显示的向前
                //给按钮绑定修改小标事件
                $("#main_center").append($(bbution).bind("click",
                    function () {
                        //alert(blacknum+"  "+nonenum);
                        if(1<=nonenum && nonenum<linum){
                            /*下标同时加1*/
                            blacknum--;
                            nonenum--;
                        }

                        //控制按钮的显示和隐藏操作
                        backgoupHidden(blacknum,linum,nonenum);
                        //情况ul标签里的信息
                        $("#main_center ul").empty();
                        //alert(blacknum+"  "+nonenum);
                        addNavBar(blacknum,nonenum);
//                //刷新当前页面
//                window.location.reload();

                    }));
            }

            //导航栏初始化，必须执行第一次
            addNavBar(blacknum,nonenum);
            //按钮初始化，必须先执行一次
            backgoupHidden(blacknum,linum,nonenum);
            //添加导航栏
            function addNavBar(blacknum,nonenum) {
                for(var i=0;i<=linum;i++){

                    if(nonenum<i && i<=blacknum){

                        var j=i-1;
                        var li=$("<li class=‘licss‘>"+data[j].name+"</li>");
                        li.bind("click",{j:j},liBind);

                        /*显示前10个li标签*/
                        $("#main_center ul").append(li);
                    }
                }
            }

            //绑定事件,必须这样写，如果防止for循环里因为作用域的原因，会值执行最后一次的结果
            function liBind(event){
                var k=event.data.j;
                $("#main_bottom").empty();
                $("#main_bottom").append(data[k].url);
            }

            //控制导航栏两边的前进按钮和后退按钮的函数
            function backgoupHidden(blacknum,linum,nonenum) {
                /*必须使用visibility的css属性，不可以使用display。因为display会消除按钮占用的空间，
                 * visibility属性不会消除按钮占用的空间，执行隐藏和禁用了事件*/
                if(myBrowser()==‘IE‘){
                    if(blacknum==linum){
                        //隐藏goup
                        $("#goup").css("visibility","hidden");
                    }else {
                        //显示goup
                        $("#goup").css("visibility","visible");
                    }
                    if(nonenum==0){
                        //隐藏back
                        $("#back").css("visibility","hidden");
                    }else {
                        //显示back
                        $("#back").css("visibility","visible");
                    }
                }

                if(myBrowser()==‘FF‘){
                    if(blacknum==linum){
                        //隐藏goup
                        $("#ff_goup").css("visibility","hidden");
                    }else {
                        //显示goup
                        $("#ff_goup").css("visibility","visible");
                    }
                    if(nonenum==0){
                        //隐藏back
                        $("#ff_back").css("visibility","hidden");
                    }else {
                        //显示back
                        $("#ff_back").css("visibility","visible");
                    }
                }
            }
        });

    }
    //判断浏览器的类型解决兼容性问题
    function myBrowser(){
        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
        var isOpera = userAgent.indexOf("Opera") > -1;
        if (isOpera) {
            return "Opera"
        }; //判断是否Opera浏览器
        if (userAgent.indexOf("Firefox") > -1) {
            return "FF";
        } //判断是否Firefox浏览器
        if (userAgent.indexOf("Chrome") > -1){
            return "Chrome";
        }
        if (userAgent.indexOf("Safari") > -1) {
            return "Safari";
        } //判断是否Safari浏览器
        if (!!window.ActiveXObject || "ActiveXObject" in window) {
            return "IE";
        }; //判断是否IE浏览器
    }

});

springmvc响应java代码：

/**
         * 查询导航栏信息
         * @return List<Map<String,Object>>
         */
        @ResponseBody
        @RequestMapping("/navJson")
        public List<Map<String,Object>>  getNavJson(){
            //声明map集合
            List<Map<String,Object>> mlist=new ArrayList<Map<String,Object>>();
            //添加map数据
            Map<String,Object> map=new HashMap<String,Object>();
            map.put("name", "流程申请");
            map.put("url", "<iframe src=\"/Mybatis/query1\" width=\"100%\" height=\"100%\"></iframe>");
            mlist.add(map);
            Map<String,Object> map1=new HashMap<String,Object>();
            map1.put("name", "用户查询");
            map1.put("url", "<iframe src=\"/Mybatis/query2\" width=\"100%\" height=\"100%\"></iframe>");
            mlist.add(map1);
            Map<String,Object> map2=new HashMap<String,Object>();
            map2.put("name", "流程查询");
            map2.put("url", "<iframe src=\"/Mybatis/query3\" width=\"100%\" height=\"100%\"></iframe>");
            mlist.add(map2);

            //多添加几个，测试轮播
            for(int i=0;i<20;i++){
                Map<String,Object> map3=new HashMap<String,Object>();
                map3.put("name", "导航栏测试");
                map3.put("url", "<iframe src=\"/Mybatis/query3\" width=\"100%\" height=\"100%\"></iframe>");
                mlist.add(map3);
            }

            return mlist;
        }

jsp页面代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>主页面</title>
</head>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<style type="text/css">
    @import url(css/main.css);
</style>

<body>
<div id="mian_top">
    <span>欢迎使用网上缴费系统！</span>
    <div id="main_top_login">
    <img id="head" src="img/01.jpg"/><br/>
        <span>欢迎${cname}</span>
    </div>
</div>
<div id="main_center">
    <ul>
    </ul>
</div>
<div id="main_bottom">

</div>
<p id="comp">@大中华科技有限公司@</p>
</body>

<script type="text/javascript" src="js/jquery.js">
</script>
<script type="text/javascript" src="js/main_navBar.js">
</script>
<script type="text/javascript">
</script>
</html>

css样式代码：

@import url(html.css);
body{
    height: 98%;
    margin: 0px;
    padding: 0px;
}

#mian_top{
    border: 1px solid #b82929;
    width: 95%;
    margin: 0px auto;
    height: 15%;
    background:linear-gradient(#b82929, #62ec37);
    background: -webkit-linear-gradient(top,#b82929,#62ec37);
    background: -moz-linear-gradient(top,#b82929,#62ec37);
}
#mian_top span:first-child{
    font-size: 40px;
    margin-top: 30px;
    position: absolute;
}
#main_top_login{
    width: 200px;
    position:absolute;
    margin-left: 85%;
    margin-top: 6px;
}
#main_center{
    height: 5%;
    width: 95%;
    margin: 0px auto;
    border: 1px solid #b82929;
    background:linear-gradient(#b82929,#e4e8ec);
    background: -webkit-linear-gradient(top,#b82929,#e4e8ec);
    background: -moz-linear-gradient(top,#b82929,#e4e8ec);

}
#main_center ul{
    margin-left: 3px;
    margin-right: 15px;

}
/*导航栏前进按钮的css样式*/
#goup{
    position: absolute;
    margin-left: 1253px; ;
    margin-top: -13px;
    color: #030515;
    border: 0px;
    background:linear-gradient(#b82929,#e4e8ec);
    background: -webkit-linear-gradient(top,#b82929,#e4e8ec);
    background: -moz-linear-gradient(top,#b82929,#e4e8ec);
}
/*支持火狐浏览器*/
#ff_goup{
    position: absolute;
    margin-left: 3px;
    margin-top: -13px;
    color: #030515;
    border: 0px;
    background:linear-gradient(#b82929,#e4e8ec);
    background: -webkit-linear-gradient(top,#b82929,#e4e8ec);
    background: -moz-linear-gradient(top,#b82929,#e4e8ec);
}
/*导航栏后退按钮的css样式*/
#back{
    position: absolute;
    margin-left: 3px; ;
    margin-top: -13px;
    color: #030515;
    border: 0px;
    background:linear-gradient(#b82929,#e4e8ec);
    background: -webkit-linear-gradient(top,#b82929,#e4e8ec);
    background: -moz-linear-gradient(top,#b82929,#e4e8ec);
}

/*支持火狐浏览器*/
#ff_back{
    position: absolute;
    margin-left: -1240px;
    margin-top: -13px;
    color: #030515;
    border: 0px;
    background:linear-gradient(#b82929,#e4e8ec);
    background: -webkit-linear-gradient(top,#b82929,#e4e8ec);
    background: -moz-linear-gradient(top,#b82929,#e4e8ec);

}

/*导航栏里li标签的css样式*/
.licss{
    float: left;
    position: relative;
    margin-top: -10px;
    margin-bottom: 5px;
    width: 100px;
    height: 20px;
    text-align: left;
    list-style: none;
    color:#2820B8;
}
#main_bottom{
    height: 75%;
    width: 95%;
    margin: 0px auto;
    border: 1px solid #b82929;
}
#comp{
    position: relative;
    margin-left: 40%;
}
#head{
    height: 65px;
    width: 65px;

}

上面css代码引用的html.css

/*判断客户机的屏幕大小来确定html的宽度*/
@media  screen and(min-width:1000px){
    html{
        /*设定好html的高度这样就可以避免div的高度自动变化*/
        width: 1300px;
    }
}
/*判断客户机的屏幕大小来确定html的宽度*/
@media  screen and(min-width:800px){
    html{
        /*设定好html的高度这样就可以避免div的高度自动变化*/
        width: 1300px;
    }
}
html{
    height: 650px;
    width: 1360px;
    margin: 0px auto;
    position: absolute;
}

效果图片：

轮播效果：

第一个导航栏显示情况

中间导航栏显示

到达最后一个导航栏显示

不需要轮播显示的情况：

时间： 2024-10-27 09:10:30

Jquery实现动态导航栏和轮播导航栏的相关文章

jQuery 简易版的无缝图片轮播切换

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> *{padding:0;margin:0;} ul,li{list-style:none;} .wrap{position: relative;width:200px;height:1

分享jquery实现百叶窗特效的图片轮播

首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好了,其他建议不需要修改.2.引用js2个文件,一个jquery库,一个本特效插件jquery.nivo.slider.pack.js3.引用html里面代码,代码很少,吧body里面代码全部拷贝,注意id重名,head里面还有一段插件调用的js 4.如果需要显示改图片介绍,可以在img里title里

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE html><html>

Android中使用ImageViewSwitcher实现图片切换轮播导航效果

前面写过了使用ViewFlipper和ViewPager实现屏幕中视图切换的效果(未实现轮播)附链接: Android中使用ViewFlipper实现屏幕切换 Android中使用ViewPager实现屏幕页面切换和页面切换效果 今天我们在换一种实现方式ImageViewSwitcher. ImageSwitcher是Android中控制图片展示效果的一个控件,如:幻灯片效果 ImageSwitcher粗略的理解就是ImageView的选择器. ImageSwitcher的原理:ImageSwi

基于jquery带时间轴的图片轮播切换代码

基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="decoroll2" class="imgfocus"> <div id="decoimg_a2" class="imgbox"> <div class="decoimg_b2"> <a href=&q

动态添加的无缝轮播

一般的前段都会写百叶窗的无缝轮播,但那种一般局限于静态页面,就是在html后面添加多一屏的图片.但这种遇到程序员后台添加的时候就产生问题,所以我们不能在html页面中直接添加第一屏的图了,那就在jq中获取html中第一屏的内容再添加到最后

可以动态添加图片的轮播插件

http://www.jq22.com/jquery-info70 官网:http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/ 官网下载的demo包里默认的CSS和页面中引用了Google的api导致加载很慢,可以去掉或者加载国内的jQueryCDN <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></scri

Jquery基础（动画效果的轮播图特效）

jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jquery选择器 基本选择器 $('*') / $('.div') / $('div') / $('#first') / 多项选择器 $('#first, div, .second') 层级选择器 $('aside summary') //aside的子元素summary $('aside > det

用jquery实现带左右按键的轮播图

成品如下: 简单来说就是点击"右"按钮时,转换到右边的下一幅图片,同时上面的小方块颜色也跟着改变,如果已经是最后一幅图片,再点击"右",则转换到第一幅图片,是直接向左移找到第一幅图的,明天再做一下无缝切换的效果,即最后一幅图放完了以后第一幅图从右滑进来跟上.点击"左"同理. 下面是html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &