文字轮播与图片轮播

最新推荐文章于 2024-05-30 10:16:04 发布

lqy136362687

最新推荐文章于 2024-05-30 10:16:04 发布

阅读量3.6k

点赞数

分类专栏： web总结记录文章标签：图片动画轮播

本文链接：https://blog.csdn.net/lay136362687/article/details/53463769

版权

web总结记录专栏收录该内容

15 篇文章 0 订阅

订阅专栏

图片轮播逻辑：按顺序通过@keyframes动画隐藏图片，小标签，小圆点通过定时调用函数进行变色。

具体代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播</title>
<style>

.rotation{
width:1000px;
height:500px;
background:#f1f1f1;
}
.ro{/*为什么一定要加这个！！！！！！！！*/
position:absolute;
}
#ro1{
animation:rota1 10s infinite ;
}
#ro2{
animation:rota2 10s infinite ;
}
#ro3{
animation:rota3 10s infinite;
}
#ro4{
animation:rota4 10s infinite ;
}
#ro5{
animation:rota5 10s infinite ;
}
@keyframes rota1{
0% {opacity:0;z-index:4}
1% {opacity:1;z-index:5}
19% {opacity:1;z-index:5}
20% {opacity:0;z-index:4}
100% {opacity:0;z-index:4}
}
@keyframes rota2{
0% {opacity:0;z-index:4}
20% {opacity:0;z-index:4}
21% {opacity:1;z-index:5}
39% {opacity:1;z-index:5}
40% {opacity:0;z-index:4}
100% {opacity:0;z-index:4}
}
@keyframes rota3{
0% {opacity:0;z-index:4}
40% {opacity:0;z-index:4}
41% {opacity:1;z-index:5}
59% {opacity:1;z-index:5}
60% {opacity:0;z-index:4}
100% {opacity:0;z-index:4}
}
@keyframes rota4{
0% {opacity:0;z-index:4}
60% {opacity:0;z-index:4}
61% {opacity:1;z-index:5}
79% {opacity:1;z-index:5}
80% {opacity:0;z-index:4}
100% {opacity:0;z-index:4}
}
@keyframes rota5{
0% {opacity:0;z-index:4}
80% {opacity:0;z-index:4}
81% {opacity:1;z-index:5}
99% {opacity:1;z-index:5}
100% {opacity:0;z-index:4}
}

</style>
</head>
<body>
<div class="rotation">
<a href="http://www.baidu.com"><img src="img/ro1.jpg"class="ro"id="ro1"></a>
<a href="http://www.uestc.edu.cn"><img src="img/ro2.jpg"class="ro"id="ro2"></a>
<img src="img/ro3.jpg"class="ro"id="ro3">
<img src="img/ro4.jpg"class="ro"id="ro4">
<img src="img/ro5.jpg"class="ro"id="ro5">
</div>
</body>
</html>

js判断代码

文字轮播：

逻辑：使用absolute固定每一个li的位置，调用函数对位置信息进行更改，每次只减小1px，构造动画效果。

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>轮播2</title>
<style>
.sidebar{
width:370px;
height:660px;
overflow:hidden;
float:left;
background:#dd5e5e;
padding:0;
margin:0;
}
.tabs{
width:100%;
height:42px;
}
div{
margin:0;
padding:0;
}
.tabs p{
margin:0 30px;
height:42px;
line-height:42px;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
}
ul{
list-style-type: none;
padding:0;
margin:0;
}
.tabContent{
padding:0 30px;
height:619px;
overflow:hidden;
position:relative;
background:url(img/sidebar.png);
}
.tabPane{
width:310px;
height:525px;
display:block;
position:absolute;
overflow:hidden;
margin-top:26px;
}
.tabPane li{
float:left;
width: 100%;
height: 74px;
border-bottom:1px dotted #d8d8d8;
position:absolute;
animation:rolTab 8s infinite;
}
.tabPane li a{
display:block;
color:#FFFFFF;
margin:0;
padding:0;
}
.date{
width:56px;
display:block;
margin-top:13px;
float:left;
text-align:center;
}
.year{
font-size:14px;
padding:0;
margin:0;
}
.day{
padding:0;
margin:0;
font-size:28px;
line-height:30px;
}
.tabInfo{
width:246px;
float:left;
margin-top:13px;
margin-left:8px;
padding:0;
font-size:13px;
line-height:24px;
}
/*轮播动画*/
</style>

</head>
<body>
<div class="sidebar">
<div class="tabs">
<p>重要通知  Important Notice</p>
</div>
<div class="tabContent">
<div class="tabPane">
<ul id="roll" style="margin-top:0px;">
<li id="li0" style="top:0px;">
<a href="//">
<div class=date>
<p class="year">2016.10</p>
<p class="day">17</p>
</div>
<p class="tabInfo">1关于组织收看反腐专题片《永远在路上》的通知</p>
</a>
</li>
<li id="li1" style="top:75px">
<a href="//">
<div class=date>
<p class="year">2016.10</p>
<p class="day">17</p>
</div>
<p class="tabInfo">2关于组织收看反腐专题片《永远在路上》的通知</p>
</a>
</li>
<li id="li2" style="top:150px">
<a href="//">
<div class=date>
<p class="year">2016.10</p>
<p class="day">17</p>
</div>
<p class="tabInfo">3关于组织收看反腐专题片《永远在路上》的通知</p>
</a>
</li>
<li id="li3" style="top:225px">
<a href="//">
<div class=date>
<p class="year">2016.10</p>
<p class="day">17</p>
</div>
<p class="tabInfo">4关于组织收看反腐专题片《永远在路上》的通知</p>
</a>
</li>
<li id="li4" style="top:300px">
<a href="//">
<div class=date>
<p class="year">2016.10</p>
<p class="day">17</p>
</div>
<p class="tabInfo">5关于组织收看反腐专题片《永远在路上》的通知</p>
</a>
</li>
<li id="li5" style="top:375px">
<a href="//">
<div class=date>
<p class="year">2016.10</p>
<p class="day">17</p>
</div>
<p class="tabInfo">6关于组织收看反腐专题片《永远在路上》的通知</p>
</a>
</li>
<li id="li6" style="top:450px">
<a href="//">
<div class=date>
<p class="year">2016.10</p>
<p class="day">17</p>
</div>
<p class="tabInfo">7关于组织收看反腐专题片《永远在路上》的通知</p>
</a>
</li>
<li id="li7" style="top:525px">
<a href="//">
<div class=date>
<p class="year">2016.10</p>
<p class="day">17</p>
</div>
<p class="tabInfo">8关于组织收看反腐专题片《永远在路上》的通知</p>
</a>
</li>
</ul>
</div>
</div>
</div>
<script>
var num=0;
var b=new Array();
function del(){
for(i=0;i<8;i++){
a=document.getElementById("li"+i).style.top;
b[i]=getNum(a);
}
}
setTimeout("del()",1);

function rolTab(){
num=num+1;
if(num<76){
for(i=0;i<8;i++){
b[i]=b[i]-1;
if(b[i]==-75){
p=(i+1)%8;
document.getElementById("li"+i).innerHTML=document.getElementById("li"+p).innerHTML;
document.getElementById("li"+i).style.top="525px";
b[i]=525;
}
document.getElementById("li"+i).style.top=b[i]+"px";
}
}else{
if(num==150){
num=0;
}
}
}
function getNum(text){
var value = text.replace(/[^0-9]/ig,"");
return value;
}
setInterval("rolTab()",20);
</script>
</body>
</html>

具体查看jxdz.html文件

lqy136362687

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
文字轮播与图片轮播

图片轮播逻辑：按顺序通过@keyframes动画隐藏图片，小标签，小圆点通过定时调用函数进行变色。具体代码：轮播.rotation{width:1000px;height:500px;background:#f1f1f1;}.ro{/*为什么一定要加这个！！！！！！！！*/position:absolute;}#ro1{ani
复制链接

扫一扫