淘宝轮播图

最新推荐文章于 2023-05-31 22:50:19 发布

怪我冷i

最新推荐文章于 2023-05-31 22:50:19 发布

阅读量2.5k

点赞数

分类专栏：大前端文章标签： html css

大前端专栏收录该内容

32 篇文章

订阅专栏

淘宝轮播图

效果图：

实现过程：

话不多说，直接看代码:

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
	<script src="js/lbt.js"></script>
	<link rel="stylesheet" type="text/css" href="css/lbt.css">
	<title>Document</title>
</head>
<body>
<div class="promo">
	<ul>
		<li><img src="images/1.jpg" height="280" width="520"></li>
		<li><img src="images/2.jpg" height="280" width="520"></li>
		<li><img src="images/3.jpg" height="280" width="520"></li>
		<li><img src="images/4.jpg" height="280" width="520"></li>
		<li><img src="images/5.jpg" height="280" width="520"></li>
	</ul>
	<ol>
		<li class="current"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
	<i class="left"></i>
	<i class="right"></i>
</div>
</body>
</html>

注意：左箭头，字体编号为：右为

css:

*{margin:0;padding: 0;}
li{list-style-type:none;}
@font-face {font-family: 'iconfont';
    src: url('../font/iconfont.eot'); /* IE9*/
    src: url('../font/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../font/iconfont.woff') format('woff'), /* chrome、firefox */
    url('../font/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.promo{
	width:520px;
	height: 280px;
	border:3px solid #000;
	margin:20px auto;
	position: relative;
	overflow:hidden;
}
.promo ul{
	width:3200px;
	background: red;
	position: absolute;
	top:0;
	left:0;
}
.promo ul li{
	float:left;
}
.promo ol{
	position: absolute;
	bottom: 15px;
	left:227px;
	border: 1px solid #000;
	background: rgba(255,255,255,0.3);
	border-radius:7px;
}
.promo ol li{
	width: 9px;
	height: 9px;
	background: #B7B7B7;
	margin: 2px;
	float: left;
	border-radius:50%;
	cursor:pointer;
}
.promo ol li.current{background: #f40;}
.promo i{
	font-family: 'iconfont';
	position: absolute;
	top:120px;
	width:40px;
	height:40px;
	background:rgba(0,0,0,0.5);
	font-style:normal;
	color:#FFF;
	line-height: 40px;
	font-size:24px;
	cursor:pointer;
	display: none;
}
.promo i.left{
	left: 5px;
}
.promo i.right{
	right:5px;
}

//利用障眼法实现(如果想不明白，可以去掉样式.promo里的overflow:hidden)
js:

$(function(){
	var dNum=0;//点
	var tNum =0;//图
	var timer;
	$('.promo ul').append($('.promo ul li').eq(0).clone(true))

	function autoPlay(){
		dNum++;
		if(dNum>4){
			dNum=0;
		}
		$('.promo ol li').eq(dNum).addClass('current').siblings().removeClass('current');
		tNum++;
		if(tNum>5){
			tNum=1;
			$('.promo ul').css('left','0px');
		}
		var move = tNum*-520;
		$('.promo ul').animate({'left':''+move+'px'},500)
	}

	$('.promo .right').click(function(event){
		autoPlay();
	})

	$('.promo .left').click(function(event){
		dNum--;
		if(dNum<0){
			dNum=4;
		}
		$('.promo ol li').eq(dNum).addClass('current').siblings().removeClass('current');
		tNum--;
		if(tNum<0){
			tNum=4;
			$('.promo ul').css('left','-2600px');
		}
		var move = tNum*-520;
		$('.promo ul').animate({'left':''+move+'px'},500)
	})

	$('.promo ol li').click(function(event){
		$(this).addClass('current').siblings().removeClass('current');
		var move = $(this).index()*-520;
		$('.promo ul').animate({'left':''+move+'px'},500)
		tNum=$(this).index();
		dNum=$(this).index();
	})

	timer=setInterval(autoPlay,2000)/*autoPlay不加小括号,如果加了的话，一上来就执行*/

	$('.promo').hover(function(){
		clearInterval(timer);
		$('.promo i').show();
	},function(){
		timer=setInterval(autoPlay,2000);
		$('.promo i').hide();
	})

	/*鼠标移上按钮时,按钮颜色变深点,待实现*/
})

font(字体):以下网站取得的 ,淘宝的箭头是用字体实现的