原生js三种选项卡效果（轮播）

第三种：定时轮播切换（我这边定时是2s）

<!DOCTYPE html>

<html>

<head>

<title>选项卡-自动播放效果</title>

margin: 0;

padding: 0;

list-style: none;

}

body{

background: #58596B;

display: flex;

justify-content: center;

}

#box{

margin-top: 10%;

}

.box ul{

width:600px;

height: 60px;

background: #33344A;

}

.box ul li{

float: left;

transition: 0.3s;

}

.box ul li a{

display: block;

width: 100px;

height: 60px;

line-height: 60px;

/*border: 1px solid red;*/

text-decoration: none;

text-align: center;

color: #717181;

font-size: 15px;

}

.boxtwo {

clear: left;

}

.boxtwo ul{

width: 600px;

height: 300px;

background: white;

}

.boxtwo ul li{

position: absolute;

transition: 0.3s;

padding: 30px;

font-family: "微软雅黑";

font-size: 15px;

width: 600px;

height: 10px;

}

.show{

opacity: 3;

}

.hide{

opacity: 0;

}

.bj{

background: #e74c3c;

}

</style>

window.οnlοad=function(){

var OneLi=document.getElementsByClassName('box')[0].getElementsByTagName('li');

var TwoLi=document.getElementsByClassName('boxtwo')[0].getElementsByTagName('li');

var a=document.getElementsByClassName('box')[0].getElementsByTagName('a')

var timer=null;

var num=0;

console.log(OneLi.length)

OneLi[0].className='bj'

a[0].style.color='white'

showtimer()

function showtimer(){

timer=setInterval(function(){

num++;

if(num>=OneLi.length){

num=0

}

for(var j=0;j<OneLi.length;j++){

OneLi[j].className=''

TwoLi[j].className='hide'

a[j].style.color=''

}

OneLi[num].className='bj'

TwoLi[num].className='show'

a[num].style.color='white'

},1000)

}

</script>

</head>

<body>

<ul>

</ul>

</div>

<ul>

<li class="show">还在打王者LOL呢？国家大事你关心了么？</li>

<li class="hide">元芳薛之谦事件你怎么看？</li>

<li class="hide">娱乐圈的那点事，潜规则？</li>

<li class="hide">淘宝双十一你们是不是又要剁手了？</li>

</ul>

</div>

</body>

</html>

WEB前端学习交流群20 103791667

原生js三种选项卡效果（轮播）相关推荐

java实现选项卡定时轮播_原生js面向对象编程-选项卡(自动轮播)
原生js面向对象编程-选项卡(自动轮播) }#div1 input{color:#fff;width:100px;height:40px;background:darkseagreen;border: ...
html js轮播图无白链接,JavaScript：100%原生js实现左右切换的轮播图(无延迟加载)...
简介这篇文章主要介绍了JavaScript:100%原生js实现左右切换的轮播图(无延迟加载)以及相关的经验技巧,文章约11114字,浏览量505,点赞数3,值得参考! *{ margin:0; pa ...
用三种方式实现轮播图
轮播图的实现原理顾名思义,轮播图就是实现图片的轮换播放效果.先显示一张图片,一定的时间,让这张图片消失,下一张图片显示.让它们实现跟淘宝首页一样的广告轮播效果. 首先是前端html代码 <!D ...
移动端实现文字轮播_使用原生JS实现移动端图片轮播效果(一)
PC端上实现图片轮播效果非常简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现.话不多说,现在我们就开始移动端轮播效果的实现. 首先就是原生J ...
html鼠标滚动图片渐渐淡出,原生js和jquery实现图片轮播淡入淡出效果
图片轮播有很多种方式,这里采用其中的淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管 ...
原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了首先是构造html: <div id=&qu ...
html轮播图jquery,原生js和jquery实现图片轮播特效
(1)首先是页面的结构部分对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以 ...
用原生js实现移动端图片轮播
1.实现思路 1.在首尾添加图片 1.在开始位置添加原始的最后一张图片 2.在最后位置添加原始的第一张图片 2.修改页面结构 3.修改对应的样式 .jd_bannerImg{width ...
使用原生JS和使用插件实现轮播图
网页上的大致轮播图的滚动就是上面的演示轮播图的制作在制作轮播图的过程中我分成3步:框架的搭建--样式的装扮--动画效果. 1.框架的搭建如下代码展示,就是先在HTML里搭建出一个框架来: < ...

原生js三种选项卡效果（轮播）

原生js三种选项卡效果（轮播）相关推荐

最新文章

热门文章