<!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. 模仿 AppStore 顶部动画

    App Store 顶部动画 App Store 中 Games.Apps.Updates 的顶部动画的特点: 自然状态下是大标题,右边有一个 button 顶上去时,变成小标题,右边按钮消失 导航栏 ...

  2. 【LeetCode】414. 第三大的数

    给定一个非空数组,返回此数组中第三大的数.如果不存在,则返回数组中最大的数.要求算法时间复杂度必须是O(n). 示例 1: 输入: [3, 2, 1] 输出: 1 解释: 第三大的数是 1. 示例 2 ...

  3. Android学习之一

  4. Linux下超级命令htop的学习使用

    top作为日常管理工作中最常用也是最重要的Linux系统监控工具之一,可以动态观察系统进程状况.但其缺点就是只支持键盘操作,显示也单调.作为刚才Windows转到Linux的我来说,现在有了一个更好的 ...

  5. 再学Java 之 形参个数可变函数

    自Java 5后,Java允许定义形参个数可变的方法,从而允许运行过程中,为方法指定不确定个数的形参. 其定义方法的格式如下: void function_name ( type ... variab ...

  6. Sequel-Model

    Sequel::Model Mass Assignment 大多数的Model方法接受一个包含一系列key和value的哈希作为参数,这些方法包括:Model.new, Model.create, M ...

  7. Redis笔记（三）：Redis常用命令

    连接测试 连接本地服务器 语法 $ redis-cli 实例 启动 redis 客户端,打开终端并输入命令 redis-cli.该命令会连接本地的 redis 服务. $redis-cli redis ...

  8. 使用epublib解析epub文件（章节内容、书籍菜单）

    链接地址https://blog.csdn.net/sonnyching/article/details/47407549

  9. Inno Setup设置在安装Finished页面，点击finish后打开网页

    在安装的最后一个页面FinishPage中点击Finished然后打开一个网页 这个功能貌似很简单,不就是在点击finish按钮给它绑定事件,问题立马解决. 在普通的桌面应用程序开发中的确是这样做的, ...

  10. docker搭建私有registry

    搭建docker的私有registry 1.   registry简介 Docker在2015年推出了distribution项目,即Docker Registry 2.相比于old registry ...