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

<!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是直接表 ...