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. mysql数据库中case when 的用法

    场景1:比如说我们在数据库存了性别的字段,一般都是存0 和 1 代表男和女   然后我们会得到0和1之后在java中判断 ,很麻烦有么有?其实我们完全可以在sql中判断好之后拿来现成的.就是在sql中 ...

  2. mySql插入网页地址失败

    如题:插入的网页地址失败,只显示了开头10位字符.以为是特殊字符的问题. 后来发现是字符串长度不够: ALTER TABLE `news`  MODIFY COLUMN `from` VARCHAR( ...

  3. java.io.Serializable 序列化问题【原】

    java.io.Serializable 序列化问题 Person.java package a.b.c; public class Person implements java.io.Seriali ...

  4. Ubuntu 16.04及以上 安装/卸载 Docker-CE

    前言 本文仅针对Ubuntu 18.10.18.04.16.04的x86_64的OS与架构下的Docker-CE的安装 卸载老板本 如果已安装,请卸载它们: sudo apt-get remove d ...

  5. JAVA实现二叉树(简易版--实现了二叉树的各种遍历)

    1,个人感觉二叉树的实现主要还是如何构造一颗二叉树.构造二叉树函数的设计方法多种多样,本例采用 addNode 方法实现.以下程序通过定义内部类来表示二叉树的结点,然后再实现了二叉树这种数据结构的一些 ...

  6. Hibernate or 的用法

    转自baidu estrictions.or(Restrictions.like(),Restrictions.or(Restrictions.like,........))里面的or可以无限加的.还 ...

  7. spring注解第07课 @Valid和@Validated的总结区分

    @Valid: @Valid注解用于校验,所属包为:javax.validation.Valid. ① 首先需要在实体类的相应字段上添加用于充当校验条件的注解,如:@Min,如下代码(age属于Gir ...

  8. Git Gui基本使用情况

    本教程将讲述:gitk的Git Gui的部分常用功能和使用方法,包括:建库.克隆(clone).上传(push).下载(pull - fetch).合并(pull - merge). ———————— ...

  9. HDU4685 Prince and Princess【强连通】

    题意: 有n个王子和m个公主,每个王子都会喜欢若干个公主,也就是王子只跟自己喜欢的公主结婚,公主就比较悲惨, 跟谁结婚都行.然后输出王子可能的结婚对象,必须保证王子与任意这些对象中的一个结婚,都不会影 ...

  10. 第4月第20天 python re xls2lua

    1. import re replace_values = ['one', 'two', 'three'] replace_keys = [str(i) for i in xrange(1, 4)] ...