一个项目中需要用到类似的功能,自己手写一个轮播切换,不足之处见谅。代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.navUl{
border: 1px solid #ddd;
overflow: hidden;
}
.navUl li{
list-style: none;
float: left;
width: auto;
height: 30px;
line-height: 30px;
padding: 0 10px;
cursor: pointer;
}
.navUl li.activeLi{
background: rgb(155, 155, 247);
color: #fff;
}
</style>
</head>
<body>
<ul class="navUl js-navUl">
<li class="activeLi">tab1</li>
<li>tab2</li>
<li>tab3</li>
<li>tab4</li>
<li>tab5</li>
</ul>
<div>
<div id="tabCon0">
tab0内容
</div>
<div id="tabCon1" style="display:none">
tab1内容
</div>
<div id="tabCon2" style="display:none">
tab2内容
</div>
<div id="tabCon3" style="display:none">
tab3内容
</div>
<div id="tabCon4" style="display:none">
tab4内容
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
window.onload=function(){
var autoTab = setInterval( changeTab,2000);
$('.js-navUl').hover(
function () {
clearInterval(autoTab);
},
function () {
autoTab = setInterval( changeTab,2000);
});
var tabIndex=0;
function changeTab(){
$(".js-navUl li").eq(tabIndex).addClass("activeLi").siblings().removeClass("activeLi");
if($("#tabCon"+tabIndex)){
$("#tabCon"+tabIndex).show().siblings().hide();
}
tabIndex++;
if(tabIndex==5){
tabIndex=0;
}
}
$(".js-navUl li").on("click",function(){
var ind=$(this).index();
if($("#tabCon"+ind)){
$("#tabCon"+ind).show().siblings().hide();
}
if(ind!=4){
tabIndex=ind+1;
}else{
tabIndex=0;
}
$(this).addClass("activeLi").siblings().removeClass("activeLi");
});
}
</script>
</body>
</html>

样式什么的自己修改即可

自动轮播切换tab的更多相关文章

  1. swiper4自动轮播切换手动触碰后停止踩坑——属性disableOnInteraction

    swiper4轮播设置autoplay自动切换后,即默认设置: <script> var mySwiper = new Swiper('.swiper-container', { auto ...

  2. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

  3. jQuery实际案例①——淘宝精品广告(鼠标触碰切换图片、自动轮播图片)

    遇到的问题:自动轮播的实现,实质与轮播图一样儿一样儿的,不要被不同的外表所欺骗,具体的js代码如下:

  4. es6 面向对象选项卡(自动轮播功能)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. ViewPager自动轮播

    Android使用ViewPager实现左右循环滑动及轮播效果   ViewPager是一个常用的android组件,不过通常我们使用ViewPager的时候不能实现左右无限循环滑动,在滑到边界的时候 ...

  6. 仿网易新闻 ViewPager 实现图片自动轮播

    新闻 App 首页最上方一般会循环播放热点图片,如下图所示. 本文主要介绍了利用 ViewPager 实现轮播图片,图片下方加上小圆点指示器标记当前位置,并利用 Timer+Handler 实现了自动 ...

  7. 讲解版的自动轮播(新手福利)样式和js就不分离了为了看的方便

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. javascript焦点图左右按钮简单自动轮播

    这里把css和html合在一块写了,这块代码只是布局和样式不是重点 <!DOCTYPE html> <html> <head> <meta charset=& ...

  9. Xamarin自定义布局系列——支持无限滚动的自动轮播视图CarouselView

    背景简述 自动轮播视图(CarouselView)在现在App中的地位不言而喻,绝大多数的App中都有类似的视图,无论是WebApp还是Native App.在安卓.iOS以及Windows(UWP) ...

随机推荐

  1. Layui数据表格模型

    视图模型 package com.meiyou.model; import org.springframework.context.annotation.Bean; import java.io.Se ...

  2. laravel的monolog使用

    Laravel 集成了 Monolog 日志函数库,Monolog 支持和提供多种强大的日志处理功能. 1.设置,日志模式 (1)Laravel 提供可立即使用的 single.daily.syslo ...

  3. IDEA配置远程git仓库

    一,在项目创建本地仓储 2,选择当前文件夹为本地仓储 3, 将代码添加到本地仓库 4,提交到本地仓库 5,提交到本地仓库 配置远程账号和地址 输入你自己的远程仓库----码云或者github,创建的 ...

  4. Numpy 基础函数 --《Python 数据分析从入门到精通》

    在Numpy中,方向称作轴,轴的数目称作维.(array(z,y,x)) np.empty() 函数的使用待完全确定.(eg: np.empty([2,3])  -> ([[0,0,0] [0, ...

  5. shell脚本之删除内容相同的重复文件

    #!/bin/bash #!当前文件夹下,删除内容相同的重复文件,只保留重复文件中的一个. ls -lS --time-style=long-iso | awk 'BEGIN{ getline;get ...

  6. 批量恢复zencart产品表所属分类master_categories_id为0的产品

    批量恢复zencart产品表所属分类master_categories_id为0的产品 将下面代码保存为master_categories_id.php,上传到网站根目录运行即可,操作前先备份数据库 ...

  7. DevExpress WinForms v19.1新版亮点:Tree List等控件性能增强

    行业领先的.NET界面控件DevExpress v19.1终于正式发布,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WinForms v19.1中新增的一些控 ...

  8. Python之网路编程之-互斥锁与进程间的通信(IPC)及生产者消费者模型

    一.互斥锁 进程之间数据隔离,但是共享一套文件系统,因而可以通过文件来实现进程直接的通信,但问题是必须自己加锁处理. 注意:加锁的目的是为了保证多个进程修改同一块数据时,同一时间只能有一个修改,即串行 ...

  9. 关于 html button 点击刷新页面的问题

    如果不想点击button 刷新页面的话,需要加个属性   type="button" 如下: <button class="layui-btn" type ...

  10. mybatis简单用法

    1.resultType 和 resultMap 引言: MyBatis中在查询进行select映射的时候,返回类型可以用resultType,也可以用resultMap,resultType是直接表 ...