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. vue 中this指向遇到的坑

    vue中的this指向问题 如果方法中没有使用箭头函数,记得把this赋值给另一个变量再使用.

  2. Study 8 —— 行块元素及定位

    行&块元素display:inline;display:block;display:inline-block; 盒模型padding[内边距]padding: 上下内边距 左右内边距;padd ...

  3. Ubuntu 16.04下安装zsh和oh-my-zsh

    注意:安装前先备份/etc/passwd 一开始装oh-my-zsh我是拒绝的,因为这东西安装容易,卸载难,真的很难. Mac安装参考:http://www.cnblogs.com/EasonJim/ ...

  4. 将文本(lrc,txt)文件转换成UTF-8格式

    UTF-8是UNICODE的一种变长字符编码又称万国码,由Ken Thompson于1992年创建.现在已经标准化为RFC 3629.UTF-8用1到6个字节编码UNICODE字符.用在网页上可以同一 ...

  5. jaxp实现对xml文档的增，删，改，查操作（附源码）浅析

    jaxp,属于javase中的一部分.是对xml进行解析的一个工具类: 既然说到这里,还是讲全一点,讲讲上面说到的xml的解析技术. xml的一个标记型文档. 在html的层级结构中,它会在内存中分配 ...

  6. MyBatis第一个案例的优化,通过映射文件与接口进行绑定

    1.创建表emp CREATE DATABASE mybatis; USE mybatis; CREATE TABLE emp( id INT(11) PRIMARY KEY AUTO_INCREME ...

  7. 二、主目录 Makefile 分析（2）

    2.7 编译选项---config.mk 代码 163 164 行 # load other configuration include $(TOPDIR)/config.mk 此段就是包含顶层目录下 ...

  8. buildroot构建项目（八）--- u-boot 2017.11 适配开发板修改 5 ---- 系统启动初始化之五

    执行完 board_init_f 后,跳回到 crt0.S中继续执行汇编语言 ldr r0, [r9, #GD_START_ADDR_SP] /* sp = gd->start_addr_sp, ...

  9. springboot项目使用idea开启远程调试

    远程调试是调试服务器的有效手段,远程服务器运行的应用可以在本地代码中打断点调试,能让开发人员准确定位服务器上的问题. 一.开启远程调试前提:本地代码与服务器代码一致, 二.开启远程调试步骤 1.开发工 ...

  10. tcp的连接断开

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