首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

来一筐代码,看看程序员的酸楚

首先看看下面的这个视频

那么,下面我们来看看它的结构和样式

结构代码

我们有了结构代码,那么下面看看它的样式代码

.container{

background:red;

width:100%;

}

.container nav{

width:100%;

}

.left{

float:left;

}

.left a,.right a{

text-decoration:none;

color:#ddd;

width:100px;

margin-left:10px;

}

.right{

float:right;

}

.left a:hover,.right a:hover{

background:blue;

}

.creat{

clear:both;

}

.wlb{

width:100%;

height: 400px;

position:relative;

}

.alb{

width:100%;

position:relative;

}

.alb div{

width:100%;

position:absolute;

opacity:0;

}

.fonty{

color:white;

position:absolute;

font-size:50px;

left:40%;

top: 120px;

background: rgba(65,110,45,0.3);

}

.fonty .fright{

padding-left: 100px;

}

.wlb

.show{

opacity:1 !important;

}

.show img{

width:100%;

height:400px;

}

上面的结构和样式代码都完成了,那么我们进行行为代码

window.onload=function(){

function task(){

var img=document.querySelector("div.show")

img.className=""

if(img.nextElementSibling!==null){

img.nextElementSibling.className="show"

}else{

img.parentNode.children[0].className="show"

}

}

setInterval(task,10000)

}

通过上面这些代码,就可以实现如视频所示的例子!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200715A0WYKH00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券