一个简单地jqery图片轮播实例

来源：互联网发布：哈尔滨工程大学知乎编辑：程序博客网时间：2024/05/16 23:42

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="jhf" content="轮播">  <meta name="Keywords" content="图片轮播">  <meta name="Description" content="">  <title>Banner 轮播图</title>  <style>  *{margin:0;padding:0px;  }.con{width:100%;height:400px;position:relative;}.con .pic{width:100%;height:400px;overflow:hidden;}.con .xyd{width:200px;height:30px;position:absolute;bottom:0px;left:600px;}.con .xyd ul li{width:16px;height:16px;list-style-type:none;float:left;margin:5px;border-radius:50px;background:white;cursor:pointer;}.con .xyd ul li.ac{background:blue;}  </style> </head> <body><div class="con"><!--banner 图片开始--><div class="pic"><img src="images/1.jpg " /><img src="images/2.jpg " /><img src="images/3.jpg " /><img src="images/4.jpg " /><img src="images/5.jpg " /><img src="images/6.jpg " /></div><!--banner 图片结束--><!--小圆点开始--><div class="xyd"><ul><li class="ac"></li><li></li><li></li><li></li><li></li><li></li></ul></div><!--小圆点结束-->    <script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/responsiveslides.min.js"></script><script type="text/javascript" src="js/responsiveslides.js"></script><script type="text/javascript">var i=0$(".con .xyd ul li").click(function(){i=$(this).index();$(this).addClass("ac").siblings().removeClass("ac"); //点击时将小点里的绿色重新赋给你点击的点$(".con .pic img").eq(i).fadeIn(400).siblings().fadeOut(400);//图片选择跳转});function jump(){i++if(i>5)i=0$(".xyd ul li").eq(i).addClass("ac").siblings().removeClass("ac");$(".con .pic img").eq(i).fadeIn(400).siblings().fadeOut(400);}setInterval("jump()",3700);</script><!--1、如何在浏览器中添加内容2、div便签布局结构3、css层叠样式给div盒子添加宽高--></div> </body></html>

如果需要相关素材和代码，请到我的csdn下载。群殴已经上传到资源管理！ http://download.csdn.net/detail/pro_jhf/9165909

0 0