Javascript特效之轮播焦点广告图片

Javascript特效之轮播焦点广告图片

我们经常会在一些网站上看到一些广告图片会自动切换而且会有广告标题。今天我们来看看怎么实现这种轮播广告。

效果图：

可以看到每一张图下面都有标题，而且如果一开始进入页面鼠标没移上去，是会自动切换图片的。

实现思路：

首先初始化每一张图片的图片地址、图片标题、还有注册好每个图片连接的鼠标移上事件，这样可以判断移上的是哪一个图片对应来显示出来。

jquery代码：

function $(x){
    return document.getElementById(x);
}
rnd.today=new Date(); 
rnd.seed=rnd.today.getTime(); 
function rnd(){ 
	rnd.seed = (rnd.seed*9301+49297) % 233280; 
	return rnd.seed/(233280.0); 
}
function rand(number){ 
	return Math.ceil(rnd()*number)-1; 
}
//标题 .title
var pushName=["Photo1","Photo2","Photo3","Photo4","Photo5","Photo6","Photo7"];
//图片 .image
var pushSrc=["images/01.jpg","images/02.jpg","images/03.jpg","images/04.jpg","images/05.jpg","images/06.jpg","images/07.jpg",];
//链接 .link
var pushLink=["http://www.sharejs.com/#1","http://www.sharejs.com/#2","http://www.sharejs.com/#3","http://www.sharejs.com/#4","http://www.zcool.com.cn/#5","http://www.sharejs.com/#6","http://www.sharejs.com/#7"]
var pushShow="";
function showPushLink(num){
	if(!num&&num!=0){
		mainPushNum++;
		if(mainPushNum>6) mainPushNum=0;
		num=mainPushNum;
	}
	for(i=0;i<7;i++){
		$("linkPush"+i).className="";
		$("linkPush"+i).innerHTML="<img src='images/push"+i+".gif'>";
	}
	$("linkPush"+num).className="linkPushHere";
	$("linkPush"+num).innerHTML="<strong class='fontOrange'>"+(num+1)+".</strong>"+pushName[num];
	$("pushImg").src=pushSrc[num];
	$("pushImgLink").href=pushLink[num];
	$("pushImg").alt=pushName[num];
}
//初始化
for(i=0;i<7;i++){
	pushShow+='<a href="'+pushLink[i]+'" onmouseover="showPushLink('+i+');clearInterval(rollId)" id="linkPush'+i+'" target="_blank"><img src="images/push'+i+'.gif"></a>';
}
$("linkPush").innerHTML=pushShow;
var mainPushNum=rand(7);
$("linkPush"+mainPushNum).className="linkPushHere";
$("linkPush"+mainPushNum).innerHTML="<strong class='fontOrange'>"+(mainPushNum+1)+".</strong>"+pushName[mainPushNum];
$("mainPush").innerHTML='<a href="'+pushLink[mainPushNum]+'" target="_blank" id="pushImgLink" onmouseover="clearInterval(rollId)" onmouseout="showAtTime()"><img src="'+pushSrc[mainPushNum]+'" name="pushImg" width="293" height="316" id="pushImg" alt="'+pushName[mainPushNum]+'" /></a>';
var rollId=setInterval("showPushLink()",5000);
function showAtTime(){
	showPushLink();
	rollId=setInterval("showPushLink()",5000);
}