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. PHP--traits

    从PHP5.4.0起,PHP实现了代码复用的一个方法,称为traits. traits试图用来解决像PHP这样的面向对象语言中只支持单继承的问题.它的作用是允许我们在不使用继承的情况下为一个类增加功能 ...

  2. windows下boost编译（vs2010）

    1.首先在官网上下一个boost的版本( http://www.boost.org): 2.解压到D:\mine (D:\mine\boost_1_66_0) 3.编译安装boost boost_1_ ...

  3. Log4net（二）-——关联配置文件的方式总结

    关联配置文件的方式总结 以控制台应用程序为例,在.net mvc项目中默认的配置位置为Web.config,其他的配置都一样 1.配置在AppConfig中 在控制台应用程序中,如果我们把Log4ne ...

  4. go for range

    func main() { var str = "hellow worda" for _, val := range str { fmt.Printf("%q" ...

  5. db.properties文件的配置格式

    #加载驱动 mysql.driver=com.mysql.jdbc.Driver #加载数据库 mysql.url=jdbc:mysql://localhost:3306/floor_shop #用户 ...

  6. .NET面试题系列（十一）WinDbg、Perfmon

    WinDbg 资料 https://www.cnblogs.com/sheng-jie/p/9503650.html https://www.cnblogs.com/yudongdong/p/9701 ...

  7. TCP/IP详解 卷1 第十九章 TCP的交互数据流

    19.1 引言 成块数据:比如ftp.电子邮件.Usenet新闻 交互数据:Telnet.Rlogin 成块数据的报文段基本上都是满长度(full-size)的,而交互数据小的多(Telnet和Rlo ...

  8. wireshark数据包分析

    最近有不少同事开始学习Wireshark,他们遇到的第一个困难就是理解不了主界面上的提示信息,于是跑来问我.问的人多了,我也总结成一篇文章,希望对大家有所帮助.Wireshark的提示可是其最有价值之 ...

  9. 前段clam安装

    前端模块化协同开发解决方案 —— clam 1. 打开后直接看最后一条https://blog.csdn.net/zhangwenwu2/article/details/581720422. node ...

  10. 上传程序Dictionary 字典 哈希--多读一写锁ReaderWriterLock

    //上传程序Dictionary 字典 哈希 /// <summary> /// 车辆控制信息哈斯表,Key是终端号,Value是车辆信息控制对象 /// </summary> ...