jquery那点事之写轮播图

最新推荐文章于 2024-08-27 19:30:26 发布

undefined001

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量515

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/undefined001/article/details/39554759

版权

JS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#outer{ margin:50px auto; position:relative; width:400px; height:210px; overflow:hidden;  }
#inner{ width:2000px; position:absolute; top:0; left:0; height:210px; }
#inner div{ width:400px; height:210px; float:left; background:darkBlue; text-align:center; line-height:210px; font-size:38px; font-weight:bold; color:#fff;}
#outer ul{ width:160px; list-style:none; height:20px; line-height:20px; position:absolute; right:30px; bottom:20px;}
#outer ul li{ float:left; margin:0 5px; width:20px; height:20px; background:orange; font-size:16px; font-weight:bold; text-align:center; cursor:pointer; }
</style>
</head>

<body>
<div id="outer">
	<div id="inner">
    	<div >一一一一一红红</div>
        <div style="background:green;" >二二二二红红</div>
        <div style="background:black" >三三三三三红红</div>
        <div style="background:red"  >四四四四四红红</div>
        <div  style="background:purple" >五五五五五红红</div>   
    </div>
    <ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div>
</body>
</html>
<script src="jquery-1.7.1.js"></script>
<script>
$("#outer>ul>li").click(function(){
	var index=$(this).index();
	$("#inner").stop().animate({left:index*-400},1500);
	
	}

)

</script>