<!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. N个元素的集合划分成互斥的两个子集的数目

    前面这是寒假听马士兵老师讲的时候积累的语录.......... 1.php是水果刀,java是菜刀,刀法比较多,一年的和三年的区别很大. 2.nanicat连接mysql出现10061是服务没开启,却 ...

  2. 【Git】Git远程操作详解

    Git是目前最流行的版本管理系统,学会Git几乎成了开发者的必备技能. Git有很多优势,其中之一就是远程操作非常简便.本文详细介绍5个Git命令,它们的概念和用法,理解了这些内容,你就会完全掌握Gi ...

  3. sql server 的ANSI_NULLS设置

    当 SET ANSI_NULLS 为 ON 时,表示SQL语句遵循SQL-92标准.当 SET ANSI_NULLS 为 OFF 时,表示不遵从 SQL-92 标准. SQL-92 标准要求对空值(N ...

  4. Java习惯用法总结

    在微博中看到的一个不错的帖子,总结的很详细,拷贝过来,一是为了方便自己查阅,也能和大家一起共享,后面有原文的链接地址: 在Java编程中,有些知识 并不能仅通过语言规范或者标准API文档就能学到的.在 ...

  5. Wii硬盘版玩机心得

    若干年前在电玩巴士买了一台硬盘版的Wii,下面是我的玩机心得: 查看Wii的系统版本信息 链接:http://www.cnblogs.com/duxiuxing/p/4251693.html Wii硬 ...

  6. 黑马程序员_<<properties,打印流，合并流，分割流>>

    --------------------ASP.Net+Android+IOS开发..Net培训.期待与您交流! -------------------- 1. Properties 1.概述 Pro ...

  7. Java容器详解

    线性表,链表,哈希表是常用的数据结构,在进行Java开发时,JDK已经为我们提供了一系列相应的类来实现基本的数据结构.这些类均在java.util包中.在Java中,容器的类型主要有:List.Set ...

  8. HDU 1166 敌兵布阵(线段树）

    题目地址:pid=1166">HDU 1166 听说胡浩版的线段树挺有名的. 于是就拜訪了一下他的博客.详情戳这里.于是就全然仿照着胡浩大牛的风格写的代码. 至于原理.鹏鹏学长已经讲的 ...

  9. [转] Linux Shell 文本处理工具集锦

    内容目录: find 文件查找 grep 文本搜索 xargs 命令行参数转换 sort 排序 uniq 消除重复行 用tr进行转换 cut 按列切分文本 paste 按列拼接文本 wc 统计行和字符 ...

  10. (转) Android平台上关于IM的实践总结

    前言 IM通信在互联网发展到现在已经是码农的世界里人尽皆知的技术,特别在当下移动互联网迅猛发展的时代这种技术的开发也更加火热,其中老牌的代表作就有QQ和MSN,和最近新崛起的微信,默默,易信,来往等眼 ...