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

<!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. python——列表方法

    L.append():追加一个元素到列表末尾 L = [] L.append('boy') L.insert() :将一个元素插入到指定位置 L.insert(1, 'girl') L.extend( ...

  2. php开发环境推荐使用

    万丈高楼平地起,好用得环境才能建立宏伟大厦,php开发环境推荐使用 1,自己安装 lamp 环境 linux+apache+mysql+php 2,自己安装 lnmp 环境 linux+nginx+m ...

  3. centos 6.x 编译安装 pgsql 9.6

    文章结构如下: 一. 环境配置 1. 配置防火墙 查看IPTABLES 当前状态与关闭过程 chkconfig --list|grep iptables 关闭iptables service ipta ...

  4. [转载]Ubuntu环境下检查CPU 的温度

    原文地址:https://www.linuxprobe.com/ubuntu-cpu-temperature.html 我们将使用一个GUI工具Psensor,它允许你在Linux中监控硬件温度.用P ...

  5. BZOJ 3118 Orz the MST

    权限题qwq 如果我们要使得某棵生成树为最小生成树,那么上面的边都不能被替代,具体的,对于一个非树边,它的权值要\(\ge\)它两端点在树上的路径上的所以边的权值,所以对于每个非树边就可以对一些树边列 ...

  6. mac osx sed 命令

    $ sed -i "s/devicedemo/device/g" `grep devicedemo -rl ./` sed: 1: ".//.coveragerc&quo ...

  7. k8s+docker+proget 镜像制作

    安装proget 1 首先在k8s上运行proget的数据库配置有个注意点:要根据proget官网要求的sql server排序方式建数据库,不然数据保存的时候会报错 2 proget运行起来后,默认 ...

  8. Qt设置生成的exe文件图标

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_37354286/article/d ...

  9. new、virtual、override

    我们先看下面一段程序: public class Father { public void Run0() { Console.WriteLine("Father.Run0"); } ...

  10. (转)linux下weblogic12c集群的安装部署

    本文介绍linux下weblogic12c集群的安装部署,版本12c,其他版本操作会有所不同,但其大体操作基本都是一样的 关于weblogic的集群,在此就不多做介绍了,如果有不了解的朋友可以百度搜索 ...