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. Nginx 学习笔记（四）nginx-module-vts模块

    看看已经搭建好的效果图 1.基本信息 2.过滤信息 3.上游服务器 4.其他进程 1.获取组区域(默认返回json格式数据) (1)mainZones https://www.tinywan.com/ ...

  2. 关于javaBean，pojo，EJB

    JavaBean是公共Java类 1.所有属性为private.2.提供默认无参构造方法.3.类属性通过getter和setter操作.4.实现serializable接口.

  3. mysql Mac终端操作

    1.启动mysql :brew services start mysql 2.登陆mysql :  mysql -u root -p mysql 命令.      -u 后面接用户名 root超级管理 ...

  4. [iOS]App上架流程[利用Archive进行上传]

    今天给大家带来项目如何上架的教程 准备: 1. 一个开发者账号(需要交过钱的,

  5. luogu P1344 [USACO4.4]追查坏牛奶Pollutant Control

    传送门 要求断掉某些边使得两个点不连通,显然是最小割 但是要求选的边数尽量少,,, 可以考虑修改边权(容量),即把边权\(c\)改成\(c*(m+1)+1\) 没了 // luogu-judger-e ...

  6. Ubuntu16.04安装搜狗拼音输入法（中文输入法）

    虽然网上有很多教程,但是我觉得我的很适合那些真正的小白... 1.下载文件 由于我要给多台电脑安装搜狗输入法,所以用的是文件夹安装,不是命令行安装. 打开官网http://pinyin.sogou.c ...

  7. tcp的连接断开

    tcp的断开连接是需要主机完成四次挥手的过程的,并不是断网了就表示断开连接了.假如双方已经建立起了连接,突然一方断网(比如突然停电,或者网线突然被拔了),对于另一方来讲他并不会知道这个情况,他依然认为 ...

  8. java删除文件及其目录

    1.删除指定文件路径 public @ResponseBody String deleteFiles(HttpServletRequest request) { log.info(this.getCl ...

  9. 基于Python的机器学习实战：KNN

    1.KNN原理: 存在一个样本数据集合,也称作训练样本集,并且样本集中每个数据都存在标签,即我们知道样本集中每一个数据与所属分类的对应关系.输入没有标签的新数据后,将新数据的每个特征与样本集中数据对应 ...

  10. 【C++】获取URL中主机域名

    // ConsoleApplication1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <windows.h& ...