网页简单的上下切换轮播
来源:互联网 发布:网络机柜内的设备布置 编辑:程序博客网 时间:2024/05/06 23:44
<!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;
margin-top: 25px;
}
p {
font-size: 14px;
margin-top: 50px;
/*margin-left: 50px;*/
}
</style>
<script>
$(function () {
window.setInterval(function () {//计时器
var lis = $("li:last");//找到最后一个li
lis.css({//
height: 0
}).prependTo($(".d1")).animate({
height: 149
}, 600)//设置动画时间
}, 1000)//设置计时器切换时间
})
</script>
</head>
<body>
<div class="d1">
<ul class="u1">
<li>
<img src="http://img.blog.csdn.net/20160609153454549?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[插入]
" alt=""/>
<p>测试数据</p>
</li>
<li>
<img src="http://img.blog.csdn.net/20160609153433373?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[插入]
" alt=""/>
<p>测试数据</p>
</li>
<li>
<img src="http://img.blog.csdn.net/20160609153337638?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/>
<p>测试数据</p>
</li>
<li>
<img src="http://img.blog.csdn.net/20160609153433373?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[插入]
" alt=""/>
<p>测试数据</p>
</li>
<li>
<img src="http://img.blog.csdn.net/20160609153454549?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[插入]
" alt=""/>
<p>测试数据</p>
</li>
</ul>
</div>
</body>
</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;
margin-top: 25px;
}
p {
font-size: 14px;
margin-top: 50px;
/*margin-left: 50px;*/
}
</style>
<script>
$(function () {
window.setInterval(function () {//计时器
var lis = $("li:last");//找到最后一个li
lis.css({//
height: 0
}).prependTo($(".d1")).animate({
height: 149
}, 600)//设置动画时间
}, 1000)//设置计时器切换时间
})
</script>
</head>
<body>
<div class="d1">
<ul class="u1">
<li>
<img src="http://img.blog.csdn.net/20160609153454549?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[插入]
" alt=""/>
<p>测试数据</p>
</li>
<li>
<img src="http://img.blog.csdn.net/20160609153433373?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[插入]
" alt=""/>
<p>测试数据</p>
</li>
<li>
<img src="http://img.blog.csdn.net/20160609153337638?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt=""/>
<p>测试数据</p>
</li>
<li>
<img src="http://img.blog.csdn.net/20160609153433373?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[插入]
" alt=""/>
<p>测试数据</p>
</li>
<li>
<img src="http://img.blog.csdn.net/20160609153454549?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center[插入]
" alt=""/>
<p>测试数据</p>
</li>
</ul>
</div>
</body>
</html>
0 0
- 网页简单的上下切换轮播
- 简单的图片、文字轮播,及切换动画
- jQuery实现简单的图片轮播(二)-增加左右(或上下)翻页功能
- 文字上下轮播
- 简单的轮播
- 上下轮播控件TextSwitcher
- viewpager+handler轮播;xlistview上下拉刷新;webView显示一个网页
- JavaScript实现简单的图片轮播(通过点击数字切换)
- JavaScript实现简单的图片轮播(通过点击左右焦点切换)
- 带数字的图片切换+轮播
- 最简单的网页繁体简体切换
- 利用js实现简单的图片切换(上下张切换)
- 简单的轮播效果
- 简单的图片轮播
- 简单轮播的实现
- 简单的图片轮播
- 一个简单的轮播
- 轮播图片切换
- Html中的form对象
- java笔记
- eclipse:清除eclipse中 Runnable JAR file 的历史记录
- scikti-learn学习
- composer安装
- 网页简单的上下切换轮播
- Codeforces Round #356 (Div. 2)-D- Bear and Tower of Cubes
- 代理模式
- 如有需要跟我学习 触摸精灵软件的朋友请加我QQ 811037998 备注来源 CSDN
- Android Material Design 之 基础知识
- ITOO学生端—动态拼接试卷(1)
- 【OS】动态分区分配算法的比较
- 关于C语言中的extern关键字
- Python中的sorted函数以及operator.itemgetter函数