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

刚开始接触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. IDF实验室—不难不易的js加密

    查看源代码 <html> <head> <script src="/tpl/wctf/Public/js/lib/jquery.js">< ...

  2. css3 transform(变形)笔记

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 一.旋转 ...

  3. MyBatis源码解析之数据源（含数据库连接池简析）

    一.概述: 常见的数据源组件都实现了javax.sql.DataSource接口: MyBatis不但要能集成第三方的数据源组件,自身也提供了数据源的实现: 一般情况下,数据源的初始化过程参数较多,比 ...

  4. vue+element ui 的表格列使用组件

    前言:工作中用到 vue+element ui 的前端框架,有这个场景:很多表格的列有许多一样的,所以考虑将列封装为组件.转载请注明出处:https://www.cnblogs.com/yuxiaol ...

  5. Spring学习手札（一）

    Spring能做什么 1. 能根据配置文件创建及组装对象之间的依赖关系: 2. 面向切面编程,能帮助我们无耦合的实现日志记录,性能统计,安全控制等: 3. 提供第三方数据访问框架(如Hibernate ...

  6. js-权威指南学习笔记15

    第十五章 脚本化文档 1.文档对象模型DOM是表示和操作HTML和XML文档内容的基础API. 2.Document.Element.Text是Node的子类. 3.查询文档的一个或多个元素有如下方法 ...

  7. 学web前端一定要这样学，不然学完找不到工作哭都来不及！

    因为工作原因,经常关注有关互联网行业的最新动态.这不,刚送走了高考,又迎来了每年的毕业季,看到好多人都说今年的前端工作不好找,很多童鞋简历投了一大堆,也没有回应,发现连实习的机会都没有,好不容易去面试 ...

  8. Hive安装与应用过程

    1.  参考说明 参考文档: https://cwiki.apache.org/confluence/display/Hive/GettingStarted 2.  安装环境说明 2.1.  环境说明 ...

  9. Flutter：Slivers大家族，让滑动视图的组合变得很简单！

     今天呢,我小拉面主要想给大家讲一讲Flutter中的Slivers大家族的使用场景和方法.开发过列表布局的同学们应该对Slivers系列的控件不陌生,或多或少都用过这个库中的控件,来解决复杂的滑动嵌 ...

  10. leetCode题解之反转字符串中的元音字母

    1.问题描述 Reverse Vowels of a String Write a function that takes a string as input and reverse only the ...