你的位置:首页 > 网页设计

[网页设计]左右可点击导航菜单


左右可点击导航菜单

 

Html:

Index.jsp

<!doctype html>

<html lang="cn">

<meta charset="UTF-8">

<meta name="Generator" content="EditPlus®">

<meta name="Author" content="">

<meta name="Keywords" content="">

<meta name="Description" content="">

<title>Document</title>

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

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

<style>

.objImgFrame{

    border: #000000 1px solid;

    padding: 4px;

    width: 50px;

}

 

.simple_slider_hover{

    cursor:pointer;

    cursor:hand

}

.simple_slider_disabled {

opacity : 0.2;

filter: alpha(opacity=20);

    zoom: 1;

}

ul{

    list-style:none;

}

ul li{

    float:left;

    display:block;

    padding:0 10px;

}

</style>

<script>

$(document).ready(function(){

    $('#holder').show();

    var sumWidth=0;

    $('#test').find('li').each(function(event){

        sumWidth+=$(this).width();

    });

    $('#test').simple_slider({

                'leftID': 'leftNav',

                'rightID': 'rightNav',

                'display': 6

                });

});

</script>

</head>

<body>

 

<div id='holder' style='display:none;'>

    

    <ul id='test'>

        <li><a href="">首页1</a></li>

        <li><a href="">首页2</a></li>

        <li><a href="">首页3等等</a></li>

        <li><a href="">首页434</a></li>

        <li><a href="">首页5</a></li>

        <li><a href="">首页ava6</a></li>

        <li><a href="">首页啊的7</a></li>

        <li><a href="">首页阿斯钢8</a></li>

        <li><a href="">首页9</a></li>

        <li><a href="">首页10</a></li>

        <li><a href="">首页11</a></li>

    </span>

    <a id='leftNav'>←</a><a id='rightNav'>→</a>

</div>

</body>

</html>

 

jquery.simple_slider.js,编写成了一个简单的插件:

;(function($) {

 

    var totalCount = 0,selector,options,firstPos = 0,isRunning = false;

 

    $.fn.simple_slider = function(settings) {

        settings = $.extend({}, $.fn.simple_slider.defaults, settings);

        selector = this.selector;

        options = settings;

        //get the number of images

        totalCount = $(selector + " li").size();

        //init

        _init();

 

        function _init(){

            //hide them all (with the exception of the first X images)

            $(selector + " li").each(function(i){

                if (i >= options.display){

                    this.style.display = "none";

                }

            });

            //put actions (onclick) on the buttons for navigation

            //left

            $("#" + options.leftID).click(function (){

                if (isRunning == false){

                    _goLeft();

                }

            });

            $("#" + options.leftID).hover(function (){

                $(this).addClass("simple_slider_hover");

                }, function (){

                $(this).removeClass("simple_slider_hover");

            });

            //right

            $("#" + options.rightID).click(function (){

                if (isRunning == false){

                    _goRight();

                }

            });

            $("#" + options.rightID).hover(function (){

                $(this).addClass("simple_slider_hover");

                }, function (){

                $(this).removeClass("simple_slider_hover");

            });

            $("#" + options.leftID).addClass("simple_slider_disabled");

            _checkNavigation();

        }

        

        function _goLeft(){

            isRunning = true;

            if (firstPos > 0){

                //remove the last one

                $(selector + " li:eq("+ (firstPos + options.display - 1) + ")").fadeOut("normal", function (){

                    firstPos--;

                    //add one from the beginning

                    $(selector + " li:eq("+ (firstPos) +")").fadeIn("normal",function(){

                        isRunning = false;

                        _checkNavigation();

                    });

                });                

            } else {

                isRunning = false;

            }

        }

        

        function _goRight(){

            isRunning = true;

            if (firstPos + options.display < totalCount){

                //remove the first one

                $(selector + " li:eq("+ firstPos +")").fadeOut("normal", function (){

                    firstPos++;

                    //add one from the end

                    $(selector + " li:eq("+ (firstPos + options.display - 1) +")").fadeIn("normal",function(){

                        isRunning = false;

                        _checkNavigation();

                    });

                });                

            } else {

                isRunning = false;

            }

        }

        

        function _checkNavigation(){

            //left

            if (firstPos == 0){

                $("#" + options.leftID).addClass("simple_slider_disabled");

            } else {

                $("#" + options.leftID).removeClass("simple_slider_disabled");

            }

            //right

            if ( (firstPos + options.display) >= totalCount){

                $("#" + options.rightID).addClass("simple_slider_disabled");

            } else {

                $("#" + options.rightID).removeClass("simple_slider_disabled");

            }

        }

        

    }

 

    $.fn.simple_slider.defaults = {

        display                :    2,

        leftID                :    null,

        rightID                :    null

    };

 

})(jQuery);

 

另外还需要jquery 1.3及以上。

效果: