js 模拟淘宝商品广告的效果

效果图大致如下：

代码如下：

<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	*{
	margin: 0;
	padding: 0;
	list-style: none;
	}

	#box{
	width: 500px;
	height: 342px;
	margin: 50px auto;
	border: 1px blue solid;
	text-align: center;
	}
	#box .listL{
	float: left;
	margin-left: 5px;
	}
	#box .listR{
	float: right;
	margin-right: 5px;
	}
	#box li{
	width: 80px;
	height: 40px;
	border: 1px pink solid;
	background: rgb(250,250,100);
	color: #666;
	line-height: 40px;

	margin-top: 6px;
	cursor: pointer;
	}
	#box img{
	margin-top: 6px;
	width: 310px;
	height: 328px;
	background: url(img/1.jpg) no-repeat center center;
	}
	#box .active{
	background: #ff8494;
	color: #fff;
	}
	</style>

	<script type="text/javascript">
	window.onload=function(){
	var oDiv=document.getElementById('box');
	var oUl=oDiv.getElementsByTagName('ul');
	var oImg=oDiv.getElementsByTagName('img')[0];

	var arrImg=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg','img/10.jpg','img/11.jpg','img/12.jpg','img/13.jpg','img/14.jpg'];
	var arrSpan=['连衣裙','雪纺','T恤','铅笔裤','婚纱','外套','连体裤','包包','凉鞋','单鞋','太阳镜','丝袜','帆布鞋','情侣装'];
	/var arrP=['60元起','30元起','30元起','50元起','180元起','60元起','60元起','40元起','30元起','30元起','20元起','20元起','40元起','60元起'];/
	var len=arrImg.length;
	var old=0;
	var num=0;
	var timer=null;
	var speed=1;
	//创建添加左右两侧li
	for(var i=0;i<len/2;i++){
	oUl[0].innerHTML+='<li>'+arrSpan[i]+'</li>';
	oUl[1].innerHTML+='<li>'+arrSpan[i+len/2]+'</li>';
	}
	var listL=oUl[0].getElementsByTagName('li');
	var listR=oUl[1].getElementsByTagName('li');
	var arrLi=[];//将遍历的所有li添加到数组arrLi中
	for(var i=0;i<listL.length;i++){
	arrLi.push(listL[i]);
	}
	for(var i=0;i<listR.length;i++){
	arrLi.push(listR[i]);
	}

	//函数初始化
	function fn1(num){
	oImg.src=arrImg[num];
	arrLi[old].className='';
	arrLi[num].className='active';
	old=num;
	}
	fn1(0);
	//鼠标经过li,图片切换
	for(var i=0;i<len;i++){
	arrLi[i].index=i;
	arrLi[i].onmouseover=function(){
	fn1(this.index);
	}
	}
	function fn(num){
	timer=setInterval(function(){

	//倒序切换
	if(num==len-1){
	speed=-1;
	}else if(num==0){
	speed=1;
	}
	num+=speed;
	fn1(num);
	},1000);
	}
	fn(0);
	//鼠标移入，清除定时器
	oDiv.onmouseover=function(){
	clearInterval(timer);
	}
	//鼠标移出，开启定时器
	oDiv.onmouseout=function(){
	fn(old);
	}

	}

	</script>
	</head>
	<body>
	<div id="box">
	<ul class="listL">
	<!-- <li class="active"></li> -->
	</ul>
	<a href="#"><img src=""></a>
	<ul class="listR">
	</ul>

	</div>

	</body>
	</html>

js 模拟淘宝商品广告的效果

猜你喜欢