<!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. UOJ 217 奇怪的线段树

    http://uoj.ac/problem/217 题意就不X了,思路在这: 居然一开始把sap里面的mn设置为inf了,我是傻逼.. #include<cstdio> #include& ...

  2. refresh的停车场

    题目描述  refresh最近发了一笔横财,开了一家停车场.由于土地有限,停车场内停车数量有限,但是要求进停车场的车辆过多.当停车场满时,要进入的车辆会进入便道等待,最先进入便道的车辆会优先 进入停车 ...

  3. 2015第31周三Jetty

    Jetty 的基本架构 Jetty 目前的是一个比较被看好的 Servlet 引擎,它的架构比较简单,也是一个可扩展性和非常灵活的应用服务器,它有一个基本数据模型,这个数据模型就是 Handler,所 ...

  4. oracle索引总结

    简介 1.说明 1)索引是数据库对象之一,用于加快数据的检索,类似于书籍的索引.在数据库中索引可以减少数据库程序查询结果时需要读取的数据量,类似于在书籍中我们利用索引可以不用翻阅整本书即可找到想要的信 ...

  5. R学习日记——分解时间序列（季节性数据）

    上篇说明了分解非季节性数据的方法.就是通过TTS包的SMA()函数进行简单移动平均平滑.让看似没有规律或没有趋势的曲线变的有规律或趋势.然后再进行时间序列曲线的回归预测. 本次,开始分解季节性时间序列 ...

  6. HDU 5514 Frogs (容斥原理)

    题目链接 : http://acm.hdu.edu.cn/showproblem.php?pid=5514 题意 : 有m个石子围成一圈, 有n只青蛙从跳石子, 都从0号石子开始, 每只能越过a[i] ...

  7. Robotium API -- 判断测试结果的方法assert、is、search

    下面的这些方法都主要用来判断测试结果是否与预期结果相符,一般把is和search方法放在assert里面判断.assert最常用的还是assertThat方法,是Junit的判断,这里就不多说了. 断 ...

  8. redis-2.6.16源码分析之pub-sub系统

    redis实现的发送订阅系统,即pub-sub,这部分的的代码比较少,也方便分析.在这只将会分析下普通的pub-sub(会忽略掉Pattern-matching subscriptions),以此来简 ...

  9. Android四大组件——Service

    Service相关链接 Service初涉 Service进阶 Service精通 Service是Android系统中的一种组件,它跟Activity的级别差不多,但是它不能自己运行,只能后台运行, ...

  10. [转] JSON for java入门总结

    一.JSON介绍 JSON(JavaScript Object Notation),类似于XML,是一种数据交换格式,比如JAVA产生了一个数据想要给JavaScript,则除了利用XML外,还可以利 ...