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
最新资源
- C基于Qt的学生成绩管理系统.zip毕业设计
- 基于深度卷积神经网络（CNN）模型的图像着色研究与应用系统实现
- Java Web实验报告五：基于JSP的留言本
- Java Web实验报告四：基于AJAX的级联下拉菜单
- springboot洗衣店订单管理系统(代码+数据库+LW)
- Javaweb仓库管理系统项目源码.zip
- 爱普生Epson L3210打印机（打印+扫描）驱动下载
- 2023-04-06-项目笔记 - 第三百二十四阶段 - 4.4.2.322全局变量的作用域-322 -2025.11.21
- 全国计算机等级python二级考试.zippython
- qq和微信抢红包插件.zip学习资料程序资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
