html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="css/demo.css">

    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="js/demo.js"></script>

</head>

<body>

    <div class="igs">

        <div class="ig"><img src="data:images/1.jpg"></div>

        <div class="ig"><img src="data:images/2.jpg"></div>

        <div class="ig"><img src="data:images/3.jpg"></div>

        <div class="ig"><img src="data:images/4.jpg"></div>

        <div class="ig"><img src="data:images/5.jpg"></div>

        <div class="ig"><img src="data:images/6.jpg"></div>

    </div>

    <div class="tabs">

        <div class="tab bg">1</div>

        <div class="tab">2</div>

        <div class="tab">3</div>

        <div class="tab">4</div>

        <div class="tab">5</div>

        <div class="tab">6</div>

    </div>

</body>

</html>

css

*{

    margin: 0px;

    padding: 0px;

    font-family:"微软雅黑";

}

.ig{

    position:absolute;

}

.tab{

    color: #fff;

    width: 30px;

    height: 30px;

    background-color: #66c;

    float: left;

    text-align: center;

    line-height: 30px;

    margin-right: 10px;

    border-radius: 100%;

    cursor:pointer;

}

.tabs{

    position: absolute;

    top: 290px;

    left: 250px;

}

.bg{

    background-color: red;

}

js

var i = 0;

var timer;

$(function() {

    $(".ig").eq(0).show().siblings().hide();//第一张图片显示，其TA隐藏

    timer = Lb();

    $(".tab").hover(function(){        //鼠标移入

        i = $(this).index();    //获取当前索引

        Show();

        clearInterval(timer);    //清除循环

    },function(){    //鼠标移出

        timer =Lb();    //恢复循环

    });

});

function Lb(){

    setInterval(function(){//循环播出

        i++;

        if(i==6){

            i=0;

        }

        Show();

    },3000);//3s

}

function Show(){

    // $(".ig").eq(i).show().siblings().hide();

    $(".ig").eq(i).fadeIn(300).siblings().fadeOut(300);//当前淡入其TA淡出，

    $(".tab").eq(i).addClass("bg").siblings().removeClass("bg");//当前添加样式，其TA清除样式

}

JQuery简易轮播图的更多相关文章

  1. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  2. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  3. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  4. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

  5. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  6. JQuery实现轮播图及其原理

    源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...

  7. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

  8. jquery优化轮播图2

    继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  9. jquery改造轮播图1

    g改造轮播图1:https://www.cnblogs.com/huanghuali/p/8677338.html <!DOCTYPE html> <html lang=" ...

随机推荐

  1. Redis在Windows上使用和集群配置

    一.什么是Redis Redis是一个开源的,使用C语言编写的面向键值对类型的分布式Nosql数据库系统,功能类似Memcache,但比Memcache功能更丰富.官网地址:https://redis ...

  2. POJ - 2828 Buy Tickets（线段树单点更新）

    http://poj.org/problem?id=2828 题意 排队买票,依次给出当前人要插队的位置,每个人有个编号,然后问你最后整个的序列是什么? 分析 最后一个人的要插入的位置是确定的,所以逆 ...

  3. C# Winform继承窗体打开设计器白屏的一例解决方法

    环境VS2017 15.5.4,Win10开发过程中,发现一些窗体打开设计器会卡死白屏,另外有一些不会,(两者运行时正常),最小化vs后甚至能把工具箱连带搞黑,严重影响开发效率,经过一天多的对比研究, ...

  4. 如何使用Ajax从FastReport Web API获取报表

    在文章“如何在ASP.NET Web API中使用FastReport.Net”中,我们已经讨论了如何创建一个用于生成报表的Web服务.然后我们会收到报表的链接,现在我们来看看如何获​​取报表并使用a ...

  5. luogu P1081 开车旅行

    传送门 这题的暴力做法显然是照题意模拟,从每个点出发暴力跳.而这个暴跳显然是可以倍增优化的,就是预处理出从每个点,(一开始是A)往后跳\(2^k\)步,能到哪里,以及\(A\)和\(B\)的路程,然后 ...

  6. NOI2018场外游记

    鬼晓得APIO以后我经历了些什么 Day 0 好像没什么要记的 Day 1 下午去参加开幕式 神tm大型落地柜装风扇空调下放冰块 开幕式,,,hot chocolate是真的hot(强制在线?卡常?) ...

  7. 最新Linux系统Ubuntu16.04搭建HUSTOJ(LAMP环境)

    应该跟着下面的步骤就OK了吧! 1.升级软件库,更新软件 打开终端 输入 sudo apt-get update sudo apt-get upgrade 2.安装mysql5.7 (注意:mysql ...

  8. aircrack-ng笔记

    开启监听: airmon-ng start wlan0 抓包: airodump-ng wlan0mon 查看wifi ^C结束 airodump-ng -c 6 --bssid C8:3A:35:3 ...

  9. Linux用户组相关指令

    ⒈增加用户组 ①groupadd 用户组名 ⒉删除用户组 ①groupdel 用户组名 ⒊修改用户所在的用户组 ①usermod -g 用户组 用户名 ★用户和用户组的相关文件 ①/etc/passw ...

  10. MR运动静止用户区分

    1.客户端打开菜单[MR]-[MR室内室外判定设置] 设置主小区是室外站且主小区信号比较强时RSRP门限 2.设置"上报数据用户临小区切换次数门限设置"值为15 mysql中t_m ...