原生js三种选项卡效果(轮播)

第三种:定时轮播切换(我这边定时是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

时间: 2024-10-06 21:39:24

原生js三种选项卡效果(轮播)的相关文章

原生js三种选项卡效果(滑动)

第二种:鼠标移入切换效果实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡-鼠标移入触发效果</title> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } body{ background: #58596B

原生js面向对象编程-选项卡(自动轮播)

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生js面向对象编程-选项卡(自动轮播)</title> <style> #div1 div{ width:400px; height:300px; border:1px solid #ccc; overflow: hidden; display

原生js实现移动端Touch轮播图的方法步骤

Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构 结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 /* 清除标签默认边距 */ body,ul,li,ol,im

原生js和jquery实现图片轮播

(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

原生js和jquery实现图片轮播特效

(1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

JavaScript:100%原生js实现左右切换的轮播图(有延迟加载)

<!--说明:此.html文件必需有:(1)同级文件夹json,json文件夹下必需有文件data.txt,文件data.txt的内容为: [{"imgSrc":"img/banner1.jpg"}, {"imgSrc":"img/banner2.jpg"}, {"imgSrc":"img/banner3.jpg"}, {"imgSrc":"img/b

JavaScript:100%原生js实现左右切换的轮播图(无延迟加载)

<!--说明:此.html文件必需有:(1)同级文件夹json,json文件夹下必需有文件data.txt,文件data.txt的内容为: [{"imgSrc":"img/banner1.jpg"}, {"imgSrc":"img/banner2.jpg"}, {"imgSrc":"img/banner3.jpg"}, {"imgSrc":"img/b

原生小程序翻页效果轮播图

废话不多说,直接上代码: <view class='video-box'> <view class="box" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend" > <view class="item item0 club" animation="{{animat

原生js实现tab选项卡里内嵌图片滚动特效代码

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>原生js实现tab选项卡里内嵌图片滚动特效代码</title><meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" /><meta name=&