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

刚开始接触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. [转][C#] 对List<T>取交集、连集及差集

    本文转自:http://www.cnblogs.com/shuibin/archive/2012/04/19/2457867.html 最近在專案中,剛好遇到這個需求, 需要比對兩個List,進行一些 ...

  2. SpringBoot+JPA+cache入门

    在pom.xml中加入如下依赖 <dependency> <groupId>org.springframework.boot</groupId> <artif ...

  3. Centos7初次开机提示Initial setup of CentOS Linux 7 (core)

    安装完成centos7后出现如下提示: Initial setup of CentOS Linux 7 (core) 1) [x] Creat user 2) [!] License informat ...

  4. Android - fragment之间数据传递

    <Fragment跳转时传递参数及结果回传的方法> <Fragment详解之五——Fragment间参数传递> <Android解惑 - 为什么要用Fragment.se ...

  5. js 实现复制到粘贴板功能

    前言:js 或者 jquery 都可以实现的复制到粘贴板功能,有时还想要有换行等格式(同 textarea) 网站地址:我的个人vue+element ui demo网站 github地址:yuleG ...

  6. spring源码分析-core.io包里面的类

    前些日子看<深入理解javaweb开发>时,看到第一章java的io流,发觉自己对io流真的不是很熟悉.然后看了下JDK1.7中io包的一点点代码,又看了org.springframewo ...

  7. 163. [USACO Mat07] 牛语

    ☆   输入文件:latin.in   输出文件:latin.out   简单对比 时间限制:1 s   内存限制:128 MB 译: zqzas 奶牛们听说猪发明了一种秘密语言,叫做"猪语 ...

  8. Less与Sass框架

    一.Less语法 1.变量声明: @变量名:变量值; @newHeight:20px; 2.调用变量: .box { width: @newHeight; height: @newHeight; } ...

  9. Ubuntu中利用rename批量重命名

    1．简介: 通常在机器视觉的学习过程中,需要批量处理一些图片,通常会涉及到批量重命名的问题,可以利用rename命令快速实现图片的批量重命名 2.rename命令格式: rename [-v] [-n ...

  10. memcached 的 SockIOPool 概念

    池的概念 SockIOPool 首先来看下属性 SockIOPool属性 boolean initialized = false – 初始化是否完成的标志,只有初始化完成后上层才能正常使用池 int ...