jquery实现图片轮播器实现图片轮播器
主要为大家详细介绍了jquery实现图片轮播器的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一
下
一、轮播器
1、HTML框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>图片轮播器</title>
<link rel="stylesheet" type="text/css" href="slider.css" rel="external nofollow" />
<script src="Jquery.js"></script>
<script src="slider.js"></script>
</head>
<body>
<div class="wrap">
<!--快捷键 .wrap>(ul>li*4>img[src=$.jpg])+ol>li*4 -->
<ul>
<li><img src="1.jpg" alt="11" /></li>
<li><img src="2.jpg" alt="22" /></li>
<li><img src="3.jpg" alt="33" /></li>
<li><img src="4.jpg" alt="44" /></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<p class="introduce"></p>
</div>
</body>
</html>
2、css的样式
/*清除列表前默认黑点*/
*{
margin: 0;
padding: 0;
}
img{
border:0;
}
ol, ul ,li{list-style: none;}
body{
margin: 50px;
}
.wrap{
width: 500px;/*一张图片的高和宽*/
height: 350px;
border: 1px solid red;
position: relative;/*以这一张图的边框为基准位置*/
overflow: hidden;/* 将超过这个长宽高的部分隐藏 */
}
.wrap ul{
width: 2000px;/*列表的行是四张图片的宽度*/
position: absolute;/* 防止图片溢出 */
left: 0;
top: 0;
}
.wrap ul li {
float: left;/* 将四张图片紧挨着横着排列 */
width: 500px;
}
.wrap ol{
position: absolute;
bottom: 10px;
right:10px;
}
.wrap ol li{
float: left;/* 达到 横着排列 的目的*/
width: 16px;
height: 16px;
资源评论
weixin_38529397
- 粉丝: 5
- 资源: 938
