<!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. 数据结构---散列表查找(哈希表)概述和简单实现(Java)

    散列表查找定义 散列技术是在记录的存储位置和它的关键字之间建立一个确定的对应关系f,是的每个关键字key对应一个存储位置f(key).查找时,根据这个确定的对应关系找到给定值的key的对应f(key) ...

  2. (转)CentOS7使用ACL精确控制文件和目录的访问权限

    原文:https://www.linuxidc.com/Linux/2018-01/150111.htm https://blog.csdn.net/maxiaoqiang1/article/deta ...

  3. Mime、base64编码

    第一部分 在阮一峰老师的博客中,是这样介绍Mime的: MIME的全称是"Multipurpose Internet Mail Extensions",中译为"多用途互联 ...

  4. Linux-(diff)

    diff 命令 1．命令格式: diff  [参数]  [文件1或目录1]  [文件2或目录2] 2．命令功能: diff命令能比较单个文件或者目录内容.如果指定比较的是文件,则只有当输入为文本文件时 ...

  5. WPF中常用的Window事件

    官方链接:https://msdn.microsoft.com/en-us/library/system.windows.window.statechanged(v=vs.110).aspx 1. A ...

  6. 这个PHP无解深坑，你能解出来吗？（听说能解出来的都很秀）

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由horstxu发表于云+社区专栏 1. 问题背景 PHP Laravel框架中的db migration是比较常用的一个功能了.在每个 ...

  7. Nginx配置日志格式记录cookie

    Nginx配置日志格式记录cookie1. 一般用来做UV统计,或者获取用户token等. 配置方式:  在nginx的配置文件中有个变量:$http_cookie来获取cookie的信息.配置方式很 ...

  8. SparkSQL简介

    1.SparkSQL的发展历程 1.1 Hive and Shark SparkSQL的前身是Shark,给熟悉RDBMS但又不理解MapReduce的技术人员提供快速上手的工具,Hive应运而生,它 ...

  9. 基于线程实现的生产者消费者模型(Object.wait(),Object.notify()方法)

    需求背景 利用线程来模拟生产者和消费者模型 系统建模 这个系统涉及到三个角色,生产者,消费者,任务队列,三个角色之间的关系非常简单,生产者和消费者拥有一个任务队列的引用,生产者负责往队列中放置对象(i ...

  10. [codeup] 2046 八皇后

    题目描述 会下国际象棋的人都很清楚:皇后可以在横.竖.斜线上不限步数地吃掉其他棋子.如何将8个皇后放在棋盘上(有8 * 8个方格),使它们谁也不能被吃掉!这就是著名的八皇后问题. 对于某个满足要求的8 ...