<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title>轮播demo</title>

     </head>

     <script type="text/javascript" src="../js/jquery-1.11.0.js" ></script>

     <style>

         *{

             margin: 0px;

             padding: 0px;

         }

         li{

             list-style-type: none;

         }

         a{

             text-underline-style: none;

         }

         div{

             width: 400px;

             height: 200px;

         }

         img{

             width：400px;

             height: 200px;

             position: absolute;

             top: 0px;

             left: 0px;

             z-index: 1;

         }

         #ul2 li{

             display: inline;

             height: 20px;

             float: left;

             width: 30px;

             line-height: 100%;

             text-align: center;

         }

         #ul2{

             position: absolute;

             background-color: #ccc;

             width: 150px;

             height: 20px;

             z-index: 100;

             left: 0px;

             top: 200px;

         }

         #ul2 li:hover{

             background-color: red;

         }

     </style>

     <body>

         <div>

             <ul>

                 <li><a href="#"><img src="../img/1.jpg" /></a></li>

                 <li><a href="#"><img src="../img/2.jpg" /></a></li>

                 <li><a href="#"><img src="../img/3.jpg" /></a></li>

                 <li><a href="#"><img src="../img/4.jpg" /></a></li>

                 <li><a href="#"><img src="../img/5.jpg" /></a></li>

             </ul>

             <ul id="ul2">

                 <li>1</li>

                 <li>2</li>

                 <li>3</li>

                 <li>4</li>

                 <li>5</li>

             </ul>

         </div>

         <script type="text/javascript" src="../js/lunbo.js" ></script>

     </body>

 </html>
$(document).ready(function() {

    setInterval(function(){

        move();

    },1000);

    $("#ul2 li").on({

        "mouseover": function() {

            var index = $("#ul2 li").index(this);

            var x = $("img").eq(index).width();

            $("img").eq(index).css("z-index", 2);

        },

        "mouseout": function() {

            var index = $("#ul2 li").index(this);

            $("img").eq(index).css("z-index", 1);

        }

    });

});

var i = 0;

function move(){

    if(i >= 5){

        i = 0;

    }

    $("img").eq(i).css("z-index",2);

    $("img").eq(i-1).css("z-index",1);

    i++;

}

jquery 20行代码实现简单轮播效果的更多相关文章

  1. Jquery实现的简单轮播效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Jquery实现左右轮播效果

    首先展示下静态布局h5代码,代码非常简单. <div id="slide"> <ul class="pic-list"> <li& ...

  3. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  4. 用最简单的代码写出banner图轮播效果

    以下视频是由[赵一鸣随笔]博客提供的“用最简单的代码写出banner图轮播效果”. 查看全屏高清视频,请点击链接:http://www.zymseo.com/58.html

  5. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  6. JQuery实现图片轮播效果源码

    ======================整体结构======================== <div class="banner"> <ul class ...

  7. 调用MyFocus库，简单实现二十几种轮播效果

    一.首先点击这里下载myFocus库文件,标准文件库就行了,很小仅仅1.4M. myFocus库有以下的好处: a . 文件小巧却高效强大,能够实现二十几种轮播的效果. b . 极其简单的使用,只需要 ...

  8. 分享jquery实现百叶窗特效的图片轮播

    首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...

  9. Jquery实现动态导航栏和轮播导航栏

    动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...

随机推荐

  1. Ubuntu 启用root账户

    设置分配很简单,只要为root设置一个root密码就行了: $ sudo passwd root 之后会提示要输入root用户的密码,连续输入root密码,再使用:$ su 就可以切换成超级管理员用户 ...

  2. 配置Session变量的生命周期

    在Web.config文件中配置Session变量的生命周期是在<sessionState></sessionState>节中完成的,在配置Session的生命周期时,可以设置 ...

  3. Qt：截图工具，任意大小矩形截图、全屏截图

    http://blog.csdn.net/rl529014/article/details/53146440

  4. Zend framework重定向的方法

    zend framework重定向的方法有三种.render, forward, redirect.它们各自的用法是什么样子的呢?有什么区别呢? 一.render render是用来调视图用的,不会调 ...

  5. POJ1068 Parencodings(模拟)

    题目链接. 分析: 水题. #include <iostream> #include <cstdio> #include <cstring> using names ...

  6. 最近点对问题 HDU Quoit Design 1007 分治法

    #include<cstdio> #include<cstring> #include<iostream> #include<algorithm> #i ...

  7. 常用sql语句及案例（oracle）

    目录 1)基本 2)数学函数 3)rownum 4)分页 5)时间处理 6)字符函数 7)to_number 8)聚合函数 9)学生选课 10)图书馆借阅 基本 --新建表: ) ) not null ...

  8. android 解析文章，通过JSON格式请求传递 的好文章，这里记录一下

    http://blog.sina.com.cn/s/blog_8d955f8c0100xv7i.html http://blog.163.com/zhangzheming_282/blog/stati ...

  9. 《Linear Algebra and Its Applications》-chaper2-矩阵的逆

    矩阵的逆: 逆矩阵的定义: 类比于我们在研究实数的时候回去讨论一个数的倒数,对应的,在矩阵运算中,当AB = I的时候,A,B互称为逆矩阵,这里的I类似实数中的1,表示单位矩阵,即对角线是1其余位置是 ...

  10. H - Can you answer these queries? - （区间查询更新）

    有一列数,(都是2^63范围内的并且都大于0的整数),现在呢有一些操作, 操作 0 可以把区间LR内的所有数都变成它的平方根数(是取整后的),操作 1 可以就是求区间LR内的和了. 分析:因为这个操作 ...