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万能轮播图的更多相关文章

  1. jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换

    1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...

  3. jq龙禧轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JQ无缝轮播图-插件封装

    类似京东的这种无缝轮播效果: 实例代码下载 HTML代码: <body> <!-- /*觅me 探索生活*/ --> <div class="test" ...

  5. JQ 实现轮播图（3D旋转图片轮播效果）

    轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...

  6. jq交叉轮播图变种【闪一下黑】

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. jq版轮播图

    html部分 <div class="banner"> <ul class="img"> <li><img src=& ...

  8. HTML+jq简单轮播图

    .main{    width: 100%;    min-width: 1100px;    display: table;    margin: 0 auto;    text-align: ce ...

  9. jQ实现的一个轮播图

    众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...

随机推荐

  1. MongoDB的账户与权限管理及在Python与Java中的登陆

    本文主要介绍了MongoDB的账户新建,权限管理(简单的),以及在Python,Java和默认客户端中的登陆. 默认的MongoDB是没有账户权限管理的,也就是说,不需要密码即可登陆,即可拥有读写的权 ...

  2. gulp实时编译less，压缩合并requirejs模块文件

    gulp的使用命令简单,就几个,gulp的简单使用教材可以参考一点的gulp使用教材(http://www.ydcss.com/archives/18). 下面就简单的介绍这些命令如何互相配合的完成前 ...

  3. WinForm 制作一个简单的计算器

    namespace WindowsFormsApplication6 { public partial class Form1 : Form { //存储上次点击了什么按钮,0代表什么都没有点击,1代 ...

  4. (译)AngularJS1.3.0 开发者指南(四) -- 控制器

    理解Controllers 在AngularJS中, Controller是一个Javascript构造函数, 常常被用来扩展 Angular Scope 对象. 控制器通过 ng-controlle ...

  5. uml系列（八）——部署图与构件图

    之前说了uml的设计图,现在说一下uml的最后两种图:构件图.部署图.这两种图之所以放在一起是因为它们都是软件的实现图. 构件图           构件图是描述一组构件之间的组织与依赖关系的模型.那 ...

  6. 使用 flow.ci 快速发布你的项目文档

    软件研发的协作过程中,文档是必不可少的一环,有需求文档.接口文档.使用文档等等.当开始写文档时,首先会遇到两个问题: team members 之间如何协作? 文档 OK 后如何分发,去哪里看?如何更 ...

  7. MongoDB学习总结(三) —— 常用聚合函数

    上一篇介绍了MongoDB增删改查命令的基本用法,这一篇来学习一下MongoDB的一些基本聚合函数. 下面我们直奔主题,用简单的实例依次介绍一下. > count() 函数 集合的count函数 ...

  8. Raspberry树莓派学习笔记2—配置RobotFramework自动化测试环境

    一般RobotFramework都是安装在Windows/Linux的PC机上,这里将简单介绍在树莓派硬件平台上配置RobotFramework的开发和运行环境. 树莓派上配置了自动化测试软件,可以考 ...

  9. angular 输入框实现自定义验证

    此插件使用angular.js.JQuery实现.(jQuery的引入需在angular 之前) 用户可以 在输入框输入数据后验证 必填项.整数型.浮点型验证. 如果在form 里面的输入框验证,可以 ...

  10. 网易云直播SDK使用总结

    前言: 最近公司的项目中加入中直播这部分的功能,现在的直播平台真的很多很多,以前在朋友圈看到过这张图片,没办法一次性给大家看,就只能这样截成几张给大家看看.其实按照我自己的看法,现在的直播已经没办法做 ...