js实现动态广告

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>热门推荐</title>
		<style type="text/css">
			body{font-size:12px;font-family:microsoft yahei;margin:0;color:#000}
			*{padding:0;margin:0}
			li,ul{list-style:none}
			a{color:#000;text-decoration:none}
			a:hover{color:#ce2626;text-decoration:none}
			img{border:none}
			/*右侧公告*/
			.right_nav{
				width:280px;
				/*border:1px solid #eee;*/
				border:1px solid red;
				float:right;				
				}
			.notice_title{
				background:#eee;
				line-height:40px;
				font-size:16px;
				text-indent:20px;
				text-align:left;
				}
			.pic_list3 li{margin:5px;float:left;width:83px}
			.pic_list3 li img{border:1px solid #ccc}
			.price2{font-size:12px;font-weight:700;color:red;text-align:center}
		</style>
		
	</head>
	<body>
		<!--右侧热门推荐 start-->
	  <div class="right_nav" id="right_nav">    
	    
	  <h1 class="notice_title">热门推荐</h1>
	  
	    
	  </div>  
  <!--右侧热门推荐 end--> 
  	<script src="js/hotAdvise.js"></script>
	</body>
</html>

js代码

//所有的推荐商品数据
var JSONData={
	name:"热门推荐",
	srcPath:"img/shopshow/",
	data:[{href:"#",src:"s1.jpg",price:56.00},
		{href:"#",src:"s2.jpg",price:97.00},
		{href:"#",src:"s3.jpg",price:89.00},
		{href:"#",src:"s4.jpg",price:69.00},
		{href:"#",src:"s5.jpg",price:35.00},
		{href:"#",src:"s6.jpg",price:18.00},
		{href:"#",src:"s7.jpg",price:76.00},
		{href:"#",src:"s8.jpg",price:82.00},
		{href:"#",src:"s9.jpg",price:60.00},
		{href:"#",src:"yifu1.jpg",price:45.00},
		{href:"#",src:"yifu2.jpg",price:92.00},
		{href:"#",src:"yifu3.jpg",price:16.00},
		{href:"#",src:"yifu4.jpg",price:42.00},
		{href:"#",src:"yifu5.jpg",price:79.00}]
};
//指定窗口加载完毕时，调用的函数
window.onload=function(){
	var adviseContent='<h1 class="notice_title">'
		+JSONData.name+'</h1><ul class="pic_list3">';
	var turnShow=getRandomNum(9,0,14);
	for(var i=0;i<turnShow.length;i++){
		var index=turnShow[i];
		adviseContent=adviseContent+'<li><a href="'+JSONData.data[index].href
				+'"><img src="'+JSONData.srcPath+JSONData.data[index].src
				+'" width="80" height="80"/></a><p class="price2">￥'
				+JSONData.data[index].price+'元</p></li>';
	}
	adviseContent=adviseContent+'</ul>';
	document.getElementsByClassName("right_nav")[0].innerHTML=adviseContent;
};
//设置定时器，定时更新热门推荐信息
window.setInterval("showHotAdvise()",1500);
//显示热门推荐信息
function showHotAdvise(){
	var adviseContent='<h1 class="notice_title">'
		+JSONData.name+'</h1><ul class="pic_list3">';
	var turnShow=getRandomNum(9,0,14);
	for(var i=0;i<turnShow.length;i++){
		var index=turnShow[i];
		adviseContent=adviseContent+'<li><a href="'+JSONData.data[index].href
				+'"><img src="'+JSONData.srcPath+JSONData.data[index].src
				+'" width="80" height="80"/></a><p class="price2">￥'
				+JSONData.data[index].price+'元</p></li>';
	}
	adviseContent=adviseContent+'</ul>';
	document.getElementsByClassName("right_nav")[0].innerHTML=adviseContent;
}
//返回num个不重复的随机数,范围在minNum~maxNum之间
function getRandomNum(num,minNum,maxNum){
	var array=new Array();
	for(var i=0;i<num;i++){
		do{
			var randomNum=Math.floor(Math.random()*maxNum+minNum);
			if(!checkNum(array,randomNum)){
				array.push(randomNum);
				break;
			}
		}while(true);
	}
	return array;
}
//数组array中包含num时返回true；否则返回false
function checkNum(array,num){
	for(var i=0;i<array.length;i++){
		if(array[i]==num){
			return true;
		}
	}
	return false;
}

猜你喜欢