您的位置：首页 > 其它

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

2015-10-09 13:24 429 查看

<!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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航