基于jQuery的新闻图片

三

2010

基于jQuery的新闻图片

发布者: seasun

基于jquery的新闻图片，支持自动切换，图片序号，左右切换

/**
  *	auto		是否自动切换
  *	autoTime	自动切换时间，毫秒单位
  *	lt			是否支持左右切换
**/
function handoverImg(auto, autoTime, lt){
	var isCan = true, numHtml = '', numBottom = $("#numBottom"), lis = $("#showImgDiv li"),
	//切换动作
	handoverIO = function(){
		if(isCan){
			isCan = false;
			var numBottomLis = $("#numBottom li"), lnum = 0;
			//判断切换方向
			if(this == window){
				lnum = autoHandover();
			}else if(this.tagName == "LI"){
				lnum = this.innerHTML - 1;
			}else if(this.id == "left"){
				lnum = leftHandover();
			}else if(this.id == "right"){
				lnum = rightHandover();
			}

			for(var i=0, ci; ci=lis[i]; i++){
				numBottomLis[i].className = "nli"
				if(i != lnum) $(ci).hide();
			}
			numBottomLis[lnum].className = "oli";
			$(lis[lnum]).fadeIn(1000, function(){isCan = true});
		}
	},
	//自动切换的LI序号
	autoHandover = function(){
		var numBottomLis = $("#numBottom li");
		for(var i=0, ci; ci=numBottomLis[i]; i++){
			if(ci.className == "oli") {
				return i == numBottomLis.length-1 ? 0 : i+1;
			}
		}
	},
	//向左切换的LI序号
	leftHandover = function(){
		var numBottomLis = $("#numBottom li");
		for(var i=0, ci; ci=numBottomLis[i]; i++){
			if(ci.className == "oli") {
				return i == numBottomLis.length-1 ? 0 : i+1;
			}
		}
	},
	//向右切换的LI序号
	rightHandover = function(){
		var numBottomLis = $("#numBottom li");
		for(var i=0, ci; ci=numBottomLis[i]; i++){
			if(ci.className == "oli") {
				return i == 0 ? numBottomLis.length-1 : i-1;
			}
		}
	};

	//生成数字标识
	for(var i=0, ci; ci=lis[i]; i++){
		if(i > 0) $(ci).hide();
		numHtml += "<li " + (i==0 ? "class='oli'" : "class='nli'") + ">" + (i+1) + "</li>";
	}
	numBottom.html(numHtml);

	numBottom.find("li").each(function(i){
		this.onmousemove = handoverIO;
	})
	if(lt && lt == true){
		$("#left").click(handoverIO);
		$("#right").click(handoverIO);
	}
	if(auto && auto == true){
		setInterval(handoverIO, autoTime ? autoTime : 1500);
	}
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
.numB_ul{width:200px; height:20px;}
.numB_ul li{width:5px;padding-right:15px;float:left; cursor:pointer}
.oli{color:red;}
.nli{color:#000;}
</style>
</HEAD>

<BODY>
<div id="left">LEFT</div>
<div>
	<ul id="numBottom">
	</ul>
</div>
<div id="showImgDiv" style="height:170px; overflow:hidden">
	<ul>
		<li><img src="imags/1.jpg" width="200" height="170" /></li>
		<li><img src="imags/2.jpg" width="200" height="170" /></li>
		<li><img src="imags/3.jpg" width="200" height="170" /></li>
		<li><img src="imags/4.jpg" width="200" height="170" /></li>
		<li><img src="imags/5.jpg" width="200" height="170" /></li>
	</ul>
</div>
<div id="right">RIGHT</div>
</BODY>
</HTML>