本文通过HTML和jQuery展示了如何创建一个简单的上下切换轮播效果。利用CSS样式和JavaScript定时器，动态改变li元素的高度，实现内容的平滑切换。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery.10.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.d1 {
width: 300px;
height: 300px;
border: 1px solid #cccccc;
overflow: hidden;
}
/*.d2 {*/
/*width: 100%;*/
/*height: 149px;*/
/*overflow: hidden;*/
/*border: 1px solid #cccccc;*/
/*border-bottom: none;*/
/*}*/
li {
width: 100%;
height: 149px;
list-style: none;
border: 1px solid #cccccc;
border-bottom: none;
overflow: hidden;
}
img {
width: 100px;
height: 100px;
float: left;
margin-right: 50px;
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery.10.js"></script>
<style>
* {
padding: 0;
margin: 0;
}
.d1 {
width: 300px;
height: 300px;
border: 1px solid #cccccc;
overflow: hidden;
}
/*.d2 {*/
/*width: 100%;*/
/*height: 149px;*/
/*overflow: hidden;*/
/*border: 1px solid #cccccc;*/
/*border-bottom: none;*/
/*}*/
li {
width: 100%;
height: 149px;
list-style: none;
border: 1px solid #cccccc;
border-bottom: none;
overflow: hidden;
}
img {
width: 100px;
height: 100px;
float: left;
margin-right: 50px;
最低0.47元/天 解锁文章
扫一扫
894
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
