<!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. 转 ZFC公理系统

    http://blog.sina.com.cn/s/blog_5d045b5c0100spld.html 首先,ZFC集合论中的公理大致分为3组: 1.外延公理. 2.子集公理模式.无序对公理.并集公 ...

  2. editplus配置csharp

    只要是写代码的,我们肯定常有用到EditPlus..Net开发也是如此.有时我们需要调试一小段C#(或VB.Net)代码,这时去大动干戈在臃肿的VS.Net中新建“控制台应用程序”项目,写满“Cons ...

  3. python——利用selenium模仿键盘输入跳转

    这是我以前遇到的一个网站:人卫临床助手,这个网站比较奇怪,不能点击右键查看源码,但是大家可以使用ctrl+U,打开开发者选项,点击network,然后点击第2页和第3页: 可以看到上面的URL是一模一 ...

  4. 拦截并记录数据库操作－Logging and Intercepting Database Operations

    原文:http://msdn.microsoft.com/zh-cn/data/dn469464 Logging and Intercepting Database Operations Starti ...

  5. 【数组】3Sum

    题目: Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find al ...

  6. Oracle 中分组排序取值的问题

    整理一下排序: 建表语句:create table EXAM(  name    VARCHAR2(32),  subject VARCHAR2(32),  score   INTEGER)数据:IN ...

  7. ES6 箭头函数（Arrow Functions)

    ES6 箭头函数(Arrow Functions) ES6 可以使用 "箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 具有一个参数的简单函 ...

  8. centos6.7 安装 virtualBox 再安装 centos 7

    Tag: 黄色为自己实际情况需要设置的部分,绿色部分为虚拟机名称(自定义) 1.创建虚拟机VBoxManage createvm --name centos7 --ostype Linux26_64 ...

  9. 用as3.0制作一个滚动条组件

    本实例演示了实现一个滚动条基本功能的制作方法,没有添加改变皮肤,修改滚动条视框大小等功能,有兴趣的朋友可根据自己要求自行添加.使用时只需要通过以下一行代码创建滚动条组件: var myScrollba ...

  10. 16-hadoop-mapreduce简介

    mapreduce是hadoop的核心组件, 设计理念是移动计算而不是移动数据, mapreduce的思想是'分而治之', 将复杂的任务分解成几个简单的任务去执行 1, 数据和计算规模大大减少 2, ...