<!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. FLASK初步实践

    感觉经过DJANGO,CI,RAILS之类的WEB框架之后,FLASK的思路就比较顺畅了... FLASKR.PY import sqlite3 from flask import Flask, re ...

  2. 【细说Java】方法重载的简单介绍

    1. 什么是重载 方法名称相同,但它们的参数类型或个数不同,这样,方法在被调用时编译器就可以根据参数的类型与个数的不同加以区分,这就是方法的重载. 既然可以通过参数类型或参数个数来作为重载条件,那返回 ...

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

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

  4. java下载csv文件,中文标题

    @RequestMapping(value = "/export.do") public void exportpushuserByareacode(HttpServletRequ ...

  5. Check the quota usage

    stack@ubuntu1:~/Downloads$ nova absolute-limits +--------------------+------+-------+ | Name | Used ...

  6. 自然数e这家伙怎么蹦跶出来的？

    自然数e这家伙怎么蹦跶出来的? 之前看过一篇中文介绍自然数e的blog,引起了我的兴趣 原文是阮一峰大牛(我认为必须很有必要尊敬的称,大牛)嚼烂了吐出来的哈哈,只是我认为还是自己去看原文比較好 感觉非 ...

  7. [每日一题] 11gOCP 1z0-052 :2013-09-2 ADDM(Automatic Database Diagnostic Monitor)...................A28

    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/10951207 正确答案:BC AWR简称Automatic Workload Reposi ...

  8. 线段树---HDU1166敌兵布阵

    这个是线段树中最入门的题目,但是由于不了解线段树的概念,当然更不知道怎么样,所以觉得挺费劲,整了一会发现还是基本的思想,就是还是将一个线段继续分割,一直分割到不能分割,这道题目是知道多少个军营,也就是 ...

  9. 一键cobbler批量安装脚本

    前几天机房上架180台服务器,太多了,使用了cobbler批量安装,具体的看我上代码,我把配置cobbler的命令给堆积起来,也算是个脚本吧,欢迎拍砖指正,下面我上脚本: #!/bin/bash # ...

  10. Python元组、列表--笔记

    <Python3 程序开发指南> 序列包括元组和列表,首先,我们介绍元组. 元组--tuple 元组为有序的序列,元组和字符串一样也是固定的,不能替换或删除其中的任意数据项.如果需要修改应 ...