<!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. Python小白学习之路（三）—【数字功能】【字符串功能】

    数字(int)常见功能 在网络课上,老师把这些功能称为神奇的魔法,想要揭开魔法神奇的面纱,想要看看有什么招数,在Pycharm里敲击三个字母(int),按住Ctrl,将鼠标点在int上,这时鼠标会变成 ...

  2. eclipse中导入SVN项目步骤

    1.eclipse中安装SVN插件 在线安装步骤: (1)点击 Help --> Install New Software...(2)在弹出的窗口中点击add按钮,输入Name(任意)和Loca ...

  3. 使用js栈stack类的实现

    使用js栈stack类的实现 /*使用栈stack类的实现*/ function stack() { this.dataStore = [];//保存栈内元素,初始化为一个空数组 this.top = ...

  4. win10下用Linux搭建python&nodejs开发环境

    Win10下用自带Linux系统搭建开发环境 Win10下用自带Linux系统搭建开发环境启用Linux老版本(win10 1709之前):新版本(win10 1709之后)卸载linux老版本新版本 ...

  5. 《Algorithms算法》笔记：优先队列(1)——API和初等实现

    1.优先队列的API和初等实现 做一个总结: 栈 :先进后出 队列 :先进先出 随机队列 : 随机出 优先队列:每次出来的是最大值或最小值 1.1优先队列的API 优先队列在很多场合都有用, 比如:在 ...

  6. asterisk与freepbx常用的命令

    asterisk 常用命令: 通过asterisk -r 连接我们的asterisk. 在CLI中常用的命令: sip show peers 显示所有的SIP peers(包括friends) sip ...

  7. Golang gRPC 使用

    一.概念 1.gRPC默认使用protocol buffers,这是google开源的一套成熟的结构数据序列化机制(当然也可以使用其他数据格式如JSON),可以用proto files创建gRPC服务 ...

  8. puts,p,print的区别

    共同点:都是用来屏幕输出的. 不同点: puts 输出内容后,会自动换行(如果内容参数为空,则仅输出一个换行符号):另外如果内容参数中有转义符,输出时将先处理转义再输出 p 基本与puts相同,但不会 ...

  9. 记录自己使用到的git命令行代码与git使用流程

    1.安装创建版本库 新建一个文件夹,用命令行实现: $ cd /d             //进入d盘 $ mkdir gitproject      //新建gitproject文件夹 $ cd ...

  10. Kaggle（一）：房价预测

    Kaggle(一) 房价预测 (随机森林.岭回归.集成学习)  项目介绍:通过79个解释变量描述爱荷华州艾姆斯的住宅的各个方面,然后通过这些变量训练模型, 来预测房价.   kaggle项目链接:ht ...