<!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. 【Maven实战】Maven开发环境的搭建和案例展示

    1.首先到www.apache.org中下载maven,得到一个apache-maven-3.1.0-bin.zip的压缩包. 2.将此压缩包解压,这里解压到D:\docs中,然后找到maven的bi ...

  2. COJ 0016 20603矩阵链乘

    传送门:http://oj.cnuschool.org.cn/oj/home/solution.htm?solutionID=35454 20603矩阵链乘 难度级别:B: 运行时间限制:1000ms ...

  3. Silverlight客户端调用WCF服务难题解疑

    一:解决办法 Silverlight客户端调用WCF服务在实际使用中经常会出现的问题就是无法直接应用类文件和配置文件.微软针对这一情况已经给出了解决办法.WCF开发框架可以帮助我们实现可靠性较高的跨平 ...

  4. LeetCode——Longest Substring Without Repeating Characters

    Given a string, find the length of the longest substring without repeating characters. For example, ...

  5. 剑指offer---3

    1.反转单链表,输入链表的头节点,输出该链表,并输出反转后的头节点 这个题目不用再说了,写过N边了 SLnode reverse(SLnode head) { SLnode reverse_head ...

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

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

  7. javascript动态改变当前页面中元素的状态行为

    function Datea() { var timed = document.getElementById('timed'); var t = setInterval(function TDate( ...

  8. ASIHTTPRequest 详解 例子

    目录 目录 发起一个同步请求 创建一个异步请求 队列请求 请求队列上下文 ASINetworkQueues, 它的delegate提供更为丰富的功能 取消异步请求 安全的内存回收建议 向服务器端上传数 ...

  9. android studio 的部分设置

    1.android studio 如何提示方法的用法 在 Eclipse中鼠标放上去就可以提示方法的用法,实际上Android Studio也可以设置的.如图 Preferences > Edi ...

  10. 队列（链式存储）JAVA代码

      publicclassLinkQueue<T>{       //结点类     publicclassNode{         public T data;         pub ...