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> < ...
随机推荐
- iOS-直播开发(开发从底层做起)
一直在忙, 也没写过几次播客! 但一直热衷于直播开发技术, 公司又不是直播方向的, 所以就年前忙里偷袭研究了一下直播开发, 然后翻阅了很多大神的技术博客等, 写了一个简单的Demo, 又根据网上大神们 ...
- java_db2错误码对应值
DB2-SQLSTATE消息 2012-08-27 10:35:27| 分类: db2|举报|字号 订阅 本节列示 SQLSTATE 及其含义.SQLSTATE 是按类代码进行分组的:对于子 ...
- 【4Large-Style】前端框架设计——Button 的设计思路
Button 的设计 Button 作为基本的 Web 元素,看似简单,却需要非常用心的设计,因为 Button 作为按钮,是具有多个不同的状态,每种状态都基本上需要进行一些特殊的优化设计,以让组件更 ...
- arcpy.mapping-认识arcpy.mapping
arcpy.mapping-认识arcpy.mapping by 李远祥 ArcMap提供了强大的地图制图功能,在实际的工作中,只要涉及到专题地图和地图册的制作,难免会遇到非常多的出图工作和地图图面元 ...
- Javascript的简单测试环境
在<JavaScript忍者秘籍>2.4测试条件基础知识中,作者给出了一个精简版的assert和assert组的实现,对于初学者而言,这无疑是一个很好的例子,既让我们得到了一个好用的小工具 ...
- AngularJS2环境配置
所使用到的文件目录结构如下所示: 1. 创建配置文件: 1.1. 创建目录: mkdir angular-quickstart cd angular-quickstart 1.2. 载入 ...
- Docker网络代理设置
背景 在一些实验室环境,服务器没有直接连接外网的权限,需要通过网络代理.我们通常会将网络代理直接配置在/etc/environment./etc/profile之类的配置文件中,这对于大部分操作都是可 ...
- californium 框架设计分析
Californium 源码分析 1. Californium 项目简介 Californium 是一款基于Java实现的Coap技术框架,该项目实现了Coap协议的各种请求响应定义,支持CON/NO ...
- Entity Framework Code First约定
Code First使你能够通过C# 或者 Visual Basic .NET来描述模型,模型的基本规则通过使用约定来进行检查,而约定就是一系列内置的规则. 在Code First中基于类的定义通过一 ...
- 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局
一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...