jquery 20行代码实现简单轮播效果
<!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行代码实现简单轮播效果的更多相关文章
- Jquery实现的简单轮播效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Jquery实现左右轮播效果
首先展示下静态布局h5代码,代码非常简单. <div id="slide"> <ul class="pic-list"> <li& ...
- JQuery简单实现图片轮播效果
很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...
- 用最简单的代码写出banner图轮播效果
以下视频是由[赵一鸣随笔]博客提供的“用最简单的代码写出banner图轮播效果”. 查看全屏高清视频,请点击链接:http://www.zymseo.com/58.html
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- JQuery实现图片轮播效果源码
======================整体结构======================== <div class="banner"> <ul class ...
- 调用MyFocus库，简单实现二十几种轮播效果
一.首先点击这里下载myFocus库文件,标准文件库就行了,很小仅仅1.4M. myFocus库有以下的好处: a . 文件小巧却高效强大,能够实现二十几种轮播的效果. b . 极其简单的使用,只需要 ...
- 分享jquery实现百叶窗特效的图片轮播
首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...
- Jquery实现动态导航栏和轮播导航栏
动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...
随机推荐
- ajax vs oauth
http://www.cnblogs.com/rush/archive/2012/05/15/2502264.html https://www.ibm.com/developerworks/cn/xm ...
- H.264 Quantization
H.264 Quantizer 一般的量化器,可用下面的公式来表示: $Z=\pm \left \lfloor\frac{ \left | W \right | }{\bigtriangleup }\ ...
- Linux&shell之显示数据
写在前面:案例.常用.归类.解释说明.(By Jim) 2>将STDEER输入到一个文件1>将STDOUT输入到一个文件&>将STDEER和STDOUT输入到同一个文件 在脚 ...
- COJ 2003 选根 （树的重心）
我们可以用树形DP在线性复杂度内搞定重心. #include<iostream> #include<cstdio> #include<cmath> #include ...
- HDU 2444 The Accomodation of Students（判断是否可图 + 二分图）
题目大意:有一群人他们有一些关系,比如A认识B, B认识C, 但是这并不意味值A和C认识.现在给你所有互相认识的学生,你的任务是把所有的学生分成两个一组, 住在一个双人房里.相互认识的同学可以住在一个 ...
- mongod
mongod --dbpath D:\Database\Mongo\data --logpath=D:\Database\Mongo\log\mongo.log -httpinterface -res ...
- Android 自定义View (三) 圆环交替 等待效果
转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24500107 一个朋友今天有这么个需求(下图),我觉得那自定义View来做还是很 ...
- android开发步步为营之68:Facebook原生广告接入总结
开发应用的目的是干嘛?一方面当然是提供优质服务给用户,还有一方面最重要的还是须要有盈利.不然谁还有动力花钱花时间去开发app? 我们的应用主攻海外市场,所以主要还是接入国外的广告提供商.本文就今天刚完 ...
- shell 判断文件、目录是否存在
shell判断文件是否存在 1. shell判断文件,目录是否存在或者具有权限 2. #!/bin/sh 3. 4. myPath="/var/log/httpd/" 5. m ...
- 最全的C#图片处理帮助类ImageHelper
最全的C#图片处理帮助类ImageHelper.cs 方法介绍: 生成缩略图 图片水印处理方法 图片水印位置处理方法 文字水印处理方法 文字水印位置的方法 调整光暗 反色处理 浮雕处理 拉伸图片 滤色 ...