<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>轮播图demo</title>

        <script type="text/javascript" src="js/jquery-3.2.1.slim.js" ></script>

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

        <script type="text/javascript">

            var t = n = i = 0, count;

            $(function(){

                count=$(".scroll_pic a").length;//求出图片数量

                $(".scroll_pic a:not(:first)").hide();//隐藏第一张以外的所有图片

                $("#scroll_button li").click(function(){

                    i = n = $(this).index();//index() 方法返回指定元素相对于其他指定元素的 index 位置。

                    $(".scroll_pic a").eq(i).show().siblings().hide();//siblings()选择除自身以外的所有同胞元素

                    $(this).addClass("scroll_in").siblings().removeClass("scroll_in");

                    //鼠标经过图片区域停止setInterval()调用函数，移开恢复

                });

                t = setInterval("picShowAuto()", 3500);//setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭

                $(".scroll").hover(function(){clearInterval(t)}, function(){t = setInterval("picShowAuto()", 3500);});

            });

            function picShowAuto(){

                n = n >=(count -1) ?0 : ++n;

                $("#scroll_button li").eq(n).trigger("click");//trigger() 方法触发被选元素的指定事件类型

            }

        </script>

    </head>

    <body>

        <div class="scroll">

            <div class="scroll_pic">

                <a href="#"><img src="img/pic1.jpg" alt=""/></a>

                <a href="#"><img src="img/pic2.jpg" alt=""/></a>

                <a href="#"><img src="img/pic3.jpg" alt=""/></a>

                <a href="#"><img src="img/pic.jpg" alt=""/></a>

            </div>

            <ul id="scroll_button">

                <li class="scroll_in"></li>

                <li></li>

                <li></li>

                <li></li>

            </ul>

        </div>

    </body>

</html>
.scroll {

    width: 720px;

    height: 410px;

    margin: 0 auto;

    margin-top: 100px;

    overflow: hidden;

    position: relative;

}

.scroll ul {

    padding: 5px 5px;

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

    transform: translateX(-50%);

    position: absolute;

    bottom: 10px;

    left: 50%;

    background:rgba(455,455,455,0.4);

    border-radius: 28px;

}

.scroll ul li {

    float: left;

    margin: 0px 5px;

    width: 16px;

    height: 16px;

    border-radius: 16px;

    border:1px #73B613 solid;

    background: #FCBE47;

    cursor: pointer;

}

.scroll ul li.scroll_in{

    background:#FF6600;

}

超级简单的jquery轮播图demo的更多相关文章

  1. 最简单的jQuery轮播图（原理解析）

    html: <div class="middle_right"> <div id="lunbobox"> <div id=&quo ...

  2. 简单实现jquery轮播图

    首先需要定义个切换图片的funcation ##### 1.找到图片所在li,将其显示出来,并缩放1.1倍 ##### 2.其他兄弟li,渐变隐藏,并还原至原大小比例 ##### 3.将底部的圆点列表 ...

  3. 前端（十七）—— jQuery基础：jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图

    jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...

  4. 一步一步拆解一个简单的iOS轮播图（三图）

    导言(可以不看): 不吹不黑,也许是东半球最简单的iOS轮播图拆分注释(讲解不敢当)了(tree new bee).(一句话包含两个人,你能猜到有谁吗?提示:一个在卖手机,一个最近在卖书)哈哈... ...

  5. jQuery轮播图（一）轮播实现并封装

    利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...

  6. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  7. jQuery轮播图（二）利用构造函数和原型创建对象以实现继承

    本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...

  8. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  9. jQuery轮播图--不使用插件

    说明:引入jquery.min.js    将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

随机推荐

  1. checkbox选中事件

    在前端中,往往需要根据后台数据的返回选中多选框.可以根据后台返回的数据转化为数组,然后又val([数组])进行选中. 例子: html代码: <!DOCTYPE html> <htm ...

  2. Swinject 源码框架(一）：基本原理

     核心是 Container类.它提供了两类方法,register 和 resolve. 为了找到在 resolve 时,能够找到对应的方法,内部维护了一个叫做services 的字典.key 是根 ...

  3. 【NOIP2017】 宝藏 状压dp

    为啥我去年这么菜啊..... 我现在想了$20min$后打了$10min$就过了$qwq$. 我们用$f[i][j]$表示当前深度为$i$,访问了状态$j$中的所有点的最小代价. 显然$f[i][j] ...

  4. Junit的常见注解

    @Beforeclass:表示使用此注解的方法在测试类被调用之前执行,在一个测试类中只能声明此注解一次,此注解的方法只被执行一次 @AfterClass :表示使用此注解的方法在测试类被调用结束退出之 ...

  5. Supporting Right-to-Left Languages

    For the most part iOS supports Right-to-Left (RTL) languages such as Arabic with minimal developer e ...

  6. android activity和fragment的生命周期图

    Activity的生命周期: Fragment的生命周期:

  7. 【转】JVM参数设置、分析

    原文地址:http://www.cnblogs.com/redcreen/archive/2011/05/04/2037057.html 不管是YGC还是Full GC,GC过程中都会对导致程序运行中 ...

  8. CRF两个例子的理解

    概率计算例子: 预测例子:

  9. dynamic解析Http xml格式响应数据

    继续上一篇 构建RESTful风格的WCF服务 ,咱已经把服务端的数据和服务准备好了,客户端调用 wcf rest接口后如何解析xml?下面使用dynamic关键字解析来至于WCF REST XML响 ...

  10. lintcode-->哈希函数

    在数据结构中,哈希函数是用来将一个字符串(或任何其他类型)转化为小于哈希表大小且大于等于零的整数.一个好的哈希函数可以尽可能少地产生冲突.一种广泛使用的哈希函数算法是使用数值33,假设任何字符串都是基 ...