原生原生js和和jQuery实现淡入淡出轮播效果实现淡入淡出轮播效果
本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码，分享给大家供大家参考，具体内容如下：
基本原理：基本原理：将所有图片绝对定位在同一位置，透明度设为0，然后通过jQuery的淡入淡出实现图片的切换效果。
html代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个轮播</title>
<style>
#scrollPlay{
width: 730px;
height: 336px;
/*overflow: hidden;*/
}
#pre{
position: absolute;
margin-top: 150px;
width:30px;
height: 30px;
background: #000;
color:#fff;
opacity: 0.7;
text-align: center;
line-height: 30px;
font-size: 20px;
z-index: 10;
}
img{
opacity: 0;
position: absolute;
}
#next{
position: absolute;
margin-left:700px;
margin-top: 150px;
width:30px;
height: 30px;
background: #000;
color:#fff;
opacity: 0.7;
text-align: center;
line-height: 30px;
font-size: 20px;
z-index: 10;
}
span{
display: block;
width: 15px;
height: 15px;
float: left;
border: 1px solid #fff;
}
#buttons{
position: absolute;
background: #000;
margin-top: 300px;
margin-left: 300px;
z-index: 10;
}
.onactive{
background: green;
}
</style>
<script src='jquery.js'></script>
<script src='index.js'></script>
</head>
<body>
<div id='scrollPlay'>
<div id='buttons'>
下载后可阅读完整内容，剩余4页未读，立即下载
weixin_38632247
- 粉丝: 8
- 资源: 1000
我的内容管理
展开
最新资源
- OptiX传输试题与SDH基础知识
- C++Builder函数详解与应用
- Linux shell (bash) 文件与字符串比较运算符详解
- Adam Gawne-Cain解读英文版WKT格式与常见投影标准
- dos命令详解：基础操作与网络测试必备
- Windows 蓝屏代码解析与处理指南
- PSoC CY8C24533在电动自行车控制器设计中的应用
- PHP整合FCKeditor网页编辑器教程
- Java Swing计算器源码示例：初学者入门教程
- Eclipse平台上的可视化开发：使用VEP与SWT
- 软件工程CASE工具实践指南
- AIX LVM详解：网络存储架构与管理
- 递归算法解析：文件系统、XML与树图
- 使用Struts2与MySQL构建Web登录验证教程
- PHP5 CLI模式：用PHP编写Shell脚本教程
- MyBatis与Spring完美整合：1.0.0-RC3详解
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
