原生js三种选项卡效果（轮播）
2017-12-23 10:33
447 查看
第三种：定时轮播切换（我这边定时是2s）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选项卡-自动播放效果</title>
<style type="text/css">
*{
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>
<script type="text/javascript">
window.onload=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>
<div id="box">
<div class="box">
<ul>
<li><a href="javascript:void(0)">新闻</a></li>
<li><a href="javascript:void(0)">综艺</a></li>
<li><a href="javascript:void(0)">娱乐</a></li>
<li><a href="javascript:void(0)">购物</a></li>
</ul>
</div>
<div class="boxtwo">
<ul>
<li class="show">还在打王者LOL呢？国家大事你关心了么？</li>
<li class="hide">元芳薛之谦事件你怎么看？</li>
<li class="hide">娱乐圈的那点事，潜规则？</li>
<li class="hide">淘宝双十一你们是不是又要剁手了？</li>
</ul>
</div>
</div>
</body>
</html>
WEB前端学习交流群20 103791667
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选项卡-自动播放效果</title>
<style type="text/css">
*{
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>
<script type="text/javascript">
window.onload=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>
<div id="box">
<div class="box">
<ul>
<li><a href="javascript:void(0)">新闻</a></li>
<li><a href="javascript:void(0)">综艺</a></li>
<li><a href="javascript:void(0)">娱乐</a></li>
<li><a href="javascript:void(0)">购物</a></li>
</ul>
</div>
<div class="boxtwo">
<ul>
<li class="show">还在打王者LOL呢？国家大事你关心了么？</li>
<li class="hide">元芳薛之谦事件你怎么看？</li>
<li class="hide">娱乐圈的那点事，潜规则？</li>
<li class="hide">淘宝双十一你们是不是又要剁手了？</li>
</ul>
</div>
</div>
</body>
</html>
WEB前端学习交流群20 103791667
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 原生js三种选项卡效果（点击）
- 原生js三种选项卡效果（滑动）
- 原生JS实现轮播效果+学前端的感受(防止走火入魔)
- 原生JS实现"旋转木马"效果的图片轮播插件
- 用jQuery跟原生js实现选项卡效果
- js仿京东轮播效果 选项卡套选项卡使用
- 原生js图片轮播效果实现代码
- 利用原生js实现轮播图效果
- 原生js实现旋转木马轮播图效果
- 1、js原生实现移动端手指滑动轮播图效果
- 原生JS改变透明度实现轮播效果
- 纯css,js原生，js原型，jquery四种方式实现轮播图效果
- 第54天：原生js实现轮播图效果
- 原生js实现网易轮播图效果
- JS原生实现图片轮播切换效果
- 原生JS实现轮播图效果
- （原生JS） 图片无缝滚动、图片转化、轮播图、折叠效果
- 原生js重写《锋利的JS》之 轮播效果
- js实现轮播图效果(附源码)--原生js的应用