左右可点击导航菜单
左右可点击导航菜单
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及以上。
效果：
