JQ万能轮播图
lunbotu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery轮播效果图 </title>
<style type="text/css">
body{ margin:0 auto; text-align:center;}
#main{ width:370px; height:240px; overflow:hidden; margin:0 auto; position:relative;}
#images{ width:100%; height:240px; overflow:hidden; position:relative;}
#images div{ display:block; width:100%; height:100%; position:absolute; top:0px; left:0px; opacity:0.3; display:none;}
#images div:nth-child(1){opacity:1; display:block;background:red}
#btn{ width:130px; height:30px; overflow:hidden; text-align:center; position:absolute; left:0px; bottom:0px;}
#btn span{ display:block; width:20px; height:20px; line-height:20px;
font-size:13px; color:#fff; float:left;margin:5px 0px auto 5px;
border-radius:50%; text-align:center;
}
#arrow{
width:100%; height:30px; overflow:hidden; position:absolute;
top:105px; left:0px;
}
#arrow div{
width:100%; height:100%; position:relative;
}
#arrow div span{ display:block; width:6px; height:30px; overflow:hidden; color:#fff;
position:absolute; top:0px; line-height:30px; text-align:center;
font-size:20px;
z-index:10;
}
</style>
<script type="text/JavaScript" src="jquery.js" ></script>
<script type="text/javascript">
$(function(){
var i=0;
var _timer=0;
function delay(){// delay()完成图片切换，span颜色切换，
$("#btn span").eq(i).css("background-color","red");//把player()中传来的当前的span背景颜色变成red；"display":"none","opacity":0.3
$("#images div").eq(i).css({
"display":"none",
"opacity":0.3
});
i++; //i++，执行下一张图片操作
if(i>=$("#images div").size()){ //如果i>当前i的长度，使i重置为0；size相当于length
i=0;
}
$("#images div").eq(i).css("display","block"); //把player()中传来的当前的span背景颜色变成#ccc；"display":"block","opacity":1
$("#btn span").eq(i).css("background-color","#ccc");
player(true);//执行完上述操作执行player(true);方法；
}
//img轮播
function player(_cmd){
$("#btn span").eq(i).css("background-color","#ccc");//把当前的span背景变成#ccc
$("#images div").eq(i).animate({
//把当前的span透明度变为1
"opacity":1,
},600,function(){
//600毫秒之后执行
if(_cmd){ //此判断。清空定时器，把_cmd传给delay;然后执行delay方法，用时2000毫秒
window.clearTimeout(_timer);
_timer=window.setTimeout(delay,2000);
}else{
$("#images div").eq(i).stop();//停止当前操作，清出定时器
window.clearTimeout(_timer);
}
});
}
player(true); //调用player方法
//鼠标划过span或者切换按钮时被调用
function eventHandle(_current){//
$("#images div").eq(i).finish();//停止当前轮播并改变当前轮播画面的样式，后面的操作也全部停止
$("#images div").css({
"display":"none",
"opacity":0.3
});
$("#btn span").css({
"background-color":"red"
});
$(_current).css({
//获取传值，修改下一个轮播的样式
"background-color":"#ccc"
});
i=$(_current).index();
$("#images div").eq(i).css({
"display":"block"
});
window.clearTimeout(_timer);
//清除定时器，停止轮播
player(false);
}
//鼠标移入移出事件，mouseenter相当于onmosouseover；mouseleave相当于onmouseout，可以防止事件冒泡
$("#main").mouseenter(function(){ //鼠标移入轮播图，停止轮播
window.clearTimeout(_timer);//清除定时器
$("#images div").eq(i).stop();//当前动画停止
});
$("#main").mouseleave(function(){
//鼠标移出轮播图，调用player(true);，重新轮播
player(true);
});
$("#btn span").mouseenter(function(){//鼠标移入当前span。调用eventHandle()，把当前span传给eventHandle()
eventHandle(this);
});
//控制查看图片上一张和下一张
$("#arrow span.left").click(function(){//点击left按钮，调用eventHandle();当前span减一并传值给eventHandle();
eventHandle($("#btn span").eq(--i)[0]);
});
$("#arrow span.right").click(function(){//点击right按钮，调用eventHandle();当前span加一并传值给eventHandle();
eventHandle($("#btn span").eq(++i)[0]);
});
});
</script>
</head>
<body>
<div id="main">
<div id="images">
<div></div>
<div></div>
</div>
<div id="btn">
<span>1</span>
<span>2</span>
</div>
</div>
</body>
</html>
JQ万能轮播图的更多相关文章
- jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
- jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
- jq龙禧轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQ无缝轮播图-插件封装
类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...
- JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- jq交叉轮播图变种【闪一下黑】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jq版轮播图
html部分 <div class="banner"> <ul class="img"> <li><img src=& ...
- HTML+jq简单轮播图
.main{ width: 100%; min-width: 1100px; display: table; margin: 0 auto; text-align: ce ...
- jQ实现的一个轮播图
众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...
随机推荐
- 在C++中反射调用.NET（一）
为什么要在C++中调用.NET 一般情况下,我们常常会在.NET程序中调用C/C++的程序,使用P/Invoke方式进行调用,在编写代码代码的时候,首先要导入DLL文件,然后在根据C/C++的头文件编 ...
- ABP入门系列（10）——扩展AbpSession
ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 一.AbpSession是Session吗? 1.首先来看看它们分别对应的类型是什么? 查看源码发 ...
- Myeclipse插件将wsdl生成java客户端代码
一.建立webservice服务端: 1.新建一个web service project,名称为webservice_server截图如下,点击finish. 2.选择工程,点击右键,选择new-&g ...
- mysql共享锁与排他锁
mysql锁机制分为表级锁和行级锁,本文就和大家分享一下我对mysql中行级锁中的共享锁与排他锁进行分享交流. 共享锁又称为读锁,简称S锁,顾名思义,共享锁就是多个事务对于同一数据可以共享一把锁,都能 ...
- 11g默认审计选项
[注:参考了maclean的网文]11g默认审计选项AUDIT_TRAIL参数的缺省值为DB,审计数据记录在数据库中的AUD$审计字典基表上.在11g中CREATE SESSION将被作为受审计的权限 ...
- swift 运算符快速学习（建议懂ＯＣ或者Ｃ语言的伙伴学习参考）
昨晚看了swift 的运算符的知识点,先大概说一下,这个点和 c 或者oc 的算运符知识点一样,都是最基础最基础的.其他的最基本的加减乘除就不多说了.注意的有几点点..先说求余数运算: 一 :求余数运 ...
- matlab中hold指令、figure指令及subplot指令的使用
一.hold指令使用 正常情况下,plot指令显示figure时,以前的数据丢失了.使用hold on指令后,此后添加的一系列plot曲线将叠加在前一个图上当使用hold off后,恢复为默认状况,p ...
- 什么是DOCTYPE?
一.DOCTYPE是什么? DOCTYPE是文档类型的速记(文档.网页中指定页面的XHTML或HTML版本类型).使符合标准的页面,一个关键组成部分是DOCTYPE声明.只有确定了正确的XHTML D ...
- 配置opencv环境
包含目录:解决代码报错问题 F:\ndk\opencv-windows\opencv\build\include;F:\ndk\opencv-windows\opencv\sources\includ ...
- SDOI Day1
好了做了SDOI day1的3道题,来讲下做法及感想吧 T1:排序(暴力,搜索) 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=3990 我们可 ...