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

刚开始接触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. [转]数据库中Schema（模式）概念的理解

    在学习数据库时,会遇到一个让人迷糊的Schema的概念.实际上,schema就是数据库对象的集合,这个集合包含了各种对象如:表.视图.存储过程.索引等. 如果把database看作是一个仓库,仓库很多 ...

  2. 常常忘记但是很重要的sql语句

    一.基础1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备份 ...

  3. 对于移动端浏览器touch事件的研究总结（4）判断手指滑动方向

    最近有一些微信的项目,虽然页面很简单,但配合手势后的效果却是很不错的.最基本的效果就是手指向上滑,页面配合css3出现一个展开效果,手指向下滑将展开的内容按原路径收起.其实就是一个简单的判断手指滑动方 ...

  4. C#异步，多线程下的HttpContext丢失问题

    1.思路概述 首先让我把大概的一个思路先说一遍吧. 我在一个页面中要同时调用两个接口,而我要给这些接口一些参数:就是我通过HttpContext.Current.Request.QueryString ...

  5. C#的字节与流

    计算机中文件有很多种,我们知道实际存在计算机中的都是二进制.这里我记录了通过流对文件的读取操作. 一.首先在这里简单涉及下位,字节,字符的概念. 位(bit):可以表示0或1: 字节(byte):由8 ...

  6. ARM体系结构和汇编指令

    第一节 可编程器件的编程原理 1. 可编程器件的特点 1 . CPU在固定频率的时钟控制下节奏运行 2 . CPU可以通过总线读取外部存储设备中的二进制指令集,然后解码执行 3 . 这些可以被CPU解 ...

  7. kubernetes学习资源

    参考文章: 1.kubernetes学习资源 1. <Kubernetes与云原生应用>系列之Kubernetes的系统架构与设计理念 2.[docker专业介绍的网站dockerinfo ...

  8. dubbo直连代码示例

    我们都知道dubbo是个分布式的RPC工具,等以后有时间能力允许的话,会好好写下dubbo,当在测试环境我们联调或想指定机器执行之时,是不需要ZK这类调度工具的,当然dubbo也提供了配置的解决方案, ...

  9. Android开发之旅1：环境搭建及HelloWorld

    ——工欲善其事必先利其器 引言 本系列适合0基础的人员,因为我就是从0开始的,此系列记录我步入Android开发的一些经验分享,望与君共勉!作为Android队伍中的一个新人的我,如果有什么不对的地方 ...

  10. thinkphp3.2 success方法注意

    success方法的url一定要用U()方法来生成, $this->success('修改成功',U('showlist'),3);