海角不转弯

代码是梦想的砖
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
Jquery学习之——图片轮播

最近学习Jquery，一直想做一个图片轮播模块，参照了网上的一些教程。简单的做了一下。现在只做到了点击图片切换的部分，余下部分待更新。

<html>
<head>
<title>jquery测试</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
    count=$("li").length;
    
    $("ul li").click(function(){
      var i=$(this).text()-1;
      $("img").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(100);
});

})
</script>
<style>
#banner{width:200px;height:300px;border:1px solid #ccc;position:relative;overflow:hidden;}
  ul{ list-style-type:none;width:100px;height:20px;position:absolute;left:30px;filter: Alpha(Opacity=80);opacity:0.8;border:1px solid #fff;}
  ul li{width:20px;height:20px;magin-left:3px;text-align:center;display:block;float:left;}
  ul li:hover{cursor:pointer;background:orange;}
</style>
</head>

<body>

<div id="banner">
<div class="banner_img">
<img  src="images/1.jpg" style="width:200px;height:300px;"/>
<img  src="images/2.jpg" style="width:200px;height:300px;"/>
<img  src="images/3.jpg" style="width:200px;height:300px;"/>

</div>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>

由于CSS方面有欠缺，希望将来能够修改得更好。

posted on 2013-03-09 21:22  海角不转弯  阅读(161)  评论(0)    收藏  举报