（图片素材取自于小米官网）

刚开始接触jQuery的学习，个人觉得如果为了实现多数的动态效果，jQuery的确很简易方便。

下面简易的轮播图效果，还请前辈多多指教~

（努力学习react vue angular中，加油~~~）

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body,p,ul{margin:0px;padding:0px;}

        #box{width:1226px;height:460px;margin:0 auto;position:relative;}

        img{position:absolute;width:100%;display:none;}

        #cir{position:absolute;height:20px;width:150px;bottom:0;left:50%;transform:translateX(-50%);}

        span{height:20px;width:20px;border-radius:10px;background:blue;display:inline-block;box-sizing:border-box;}

        #left{height:69px;width:41px;position:absolute;top:50%;transform:translateY(-50%);background:url("img/icon-slides.png") no-repeat -83px 0px;}

        #right{height:69px;width:41px;position:absolute;right:0;top:50%;transform:translateY(-50%);background:url("img/icon-slides.png") no-repeat -125px 0px;}

        #left:hover{background:url("img/icon-slides.png") no-repeat 0px 0px;}

        #right:hover{background:url("img/icon-slides.png") no-repeat -42px 0px;}

        .span_on{background:red;border:1px solid yellow;}

        .img_on{display:block;}

    </style>

    <script src="jquery-1.11.3.js"></script>

    <script>

        $(function(){

            var index=0;

            var timer=null;

            function play(){

                index++;

                if(index>5){

                    index=0;

                }

                $("span").eq(index).prop("class","span_on").siblings().prop("class","");

                $("img").eq(index).prop("class","img_on").siblings().prop("class","");

            }

            timer=setInterval(play,1000);

            $("#box").mouseover(function(){

                clearInterval(timer);

            })

            $("#box").mouseout(function(){

                timer=setInterval(play,1000);

            })

            $("#left").click(function(){

                index--;

                if(index<0){

                    index=5;

                }

                $("span").eq(index).prop("class","span_on").siblings().prop("class","");

                $("img").eq(index).prop("class","img_on").siblings().prop("class","");

            })

            $("#right").click(function(){

                play();

            })

            $("span").mouseover(function(){

                $(this).prop("class","span_on").siblings().prop("class","");

                index=$(this).index();

            })

        })

    </script>

</head>

<body>

<div>

    <div id="box">

        <img class="img_on" src="img/11.jpg" alt="">

        <img src="img/22.jpg" alt="">

        <img src="img/33.jpg" alt="">

        <img src="img/44.jpg" alt="">

        <img src="img/55.jpg" alt="">

        <img src="img/66.jpg" alt="">

        <div id="cir">

            <span class="span_on"></span>

            <span></span>

            <span></span>

            <span></span>

            <span></span>

            <span></span>

        </div>

        <div id="left">

        </div>

        <div id="right">

        </div>

    </div>

</div>

</body>

</html>

jQuery实现简易轮播图的效果的更多相关文章

  1. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  2. jQuery淡入淡出轮播图实现

    大家好我是 只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...

  3. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  4. jquery里面的attr和css来设置轮播图竟然效果不一致

    /*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document: ...

  5. 用jQuery写的轮播图

    效果图: GitHub地址:https://github.com/123456abcdefg/Javascript 大家可以下载源码查看. 与前一篇写的轮播图实现的效果一致,这个是用jQuery写的, ...

  6. 原生js一行代码实现简易轮播图

    这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html><html lang="en"&g ...

  7. 用纯css、JavaScript、jQuery简单的轮播图

    完成一个可以自动切换或点击数字的轮播图 HTML代码只需要一个div 包含着一个图片和一个列表,我们主要的思路就是通过点击相应的数字,改变图片的 路径. 有4张图片都在img文件夹里,名称为  img ...

  8. 使用JS实现轮播图的效果

    其中的一些css样式代码就省略了,下面只把结构层html.行为层js的代码展示出来 ,看代码说事. 一.简单的轮播图 <div class="box" id="bo ...

  9. JQuery实现一个轮播图

    1.HTML <div class="banner"> <div class="b_main"> <div class=" ...

随机推荐

  1. PHP 集成开发环境比较

    专注了这么些年技术,没有养成记录和积累的习惯.如今乐于开源和分享经验,却停笔踌躇,不知该从何处说起.开通博客也有一段时间了,也没能写出一篇像样的文章,其实这篇文章也是被我拉壮丁似的用来练手的.思前想后 ...

  2. The "tsconfig.json" file must have compilerOptions.sourceMap set to true

    在编译ionic项目的时候出现:Error:The "tsconfig.json" file must have compilerOptions.sourceMap set to ...

  3. 微信小程序、微信公众号、H5之间相互跳转

    转自慕课网 一.小程序和公众号 答案是:可以相互关联. 在微信公众号里可以添加小程序. 图片有点小,我把文字打出来吧: 可关联已有的小程序或快速创建小程序.已关联的小程序可被使用在自定义菜单和模版消息 ...

  4. springboot相关资料

    SpringBoot应用 rabbitmq先关资料: rabbitmq详解 springboot+rabbitmq整合示例程 RabbitMQ Exchange Queue RoutingKey Bi ...

  5. WebApi使用swagger ui自动生成接口文档

    之前就写到.最近正在使用webapi.这里介绍一个实用的东西swageer ui现在开发都是前后端分开.我们这里是给前端提供api.有时候对于一个api的描述,并不想专门写一份文档.很浪费时间.swa ...

  6. SQL查询出某字段不等于某值的行（其中有为NULL的字段）

    表1如下:TBD1100   TBD1101   TBD1102------------------------------------------  1001            水果       ...

  7. int类型转换byte类型

    计算机中,int类型占用4个字节,byte类型占用1个字节: 当int类型强转为byte类型时,计算机会截取最后的八位(1个字节): 由于计算机存储数据时,都是以补码的形式进行存储. 然而,我们通常看 ...

  8. java工具类-交易码

    /** * 功能描述:交易码 * */ public class TransCode { //登录 public static final String LOGIN="A001"; ...

  9. gRPC 的 RoadMap 20151022 更新

    gRPC是一个高性能.通用的开源RPC框架,其由Google主要面向移动应用开发并基于HTTP/2协议标准而设计,基于ProtoBuf(Protocol Buffers)序列化协议开发,且支持众多开发 ...

  10. [WEB面试题] web前端面试题JavaScript第一弹，个人整理部分面试题汇总

    以下内容仅供参考,成年人不讲对错只讲利弊 1.什么是JavaScript原型链?如何理解 JavaScript中的每个对象都有一个prototype属性,我们称之为原型 原型的值是一个对象有自己的原型 ...