jq龙禧轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
.carousel{
height:665px;
overflow: hidden;
position: relative;
}
.carousel .imgs{
width:1920px;
height:665px;
position: absolute;
left:50%;
margin-left: -960px;
}
.carousel .imgs li{
/*呼吸轮播图所有图片摞一起*/
position: absolute;
left:0;
top:0;
width: 100%;
height:665px;
display: none;
}
.carousel .imgs li:first-child{
display: block;
}
.carousel .inner{
width: 1000px;
margin:0 auto;
position: relative;
}
.carousel .inner .circles{
list-style: none;
position: absolute;
width: 15px;
height:257px;
background: url(images/longxi/list_boxbg.png) repeat-y center top;
top:150px;
}
.carousel .inner .circles li{
width: 15px;
height: 15px;
background: url(images/longxi/num_bg.png) no-repeat;
margin-bottom: 70px;
position: relative;
}
.carousel .inner .circles li a{
position: absolute;
width: 104px;
height: 43px;
background: url(images/longxi/num_hover.png);
left:-77px;
top:-17px;
display: none;
}
.carousel .inner .circles li.cur a{
display: block;
}
.carousel .inner .circles li:nth-child(2) a{
background-image: url(images/longxi/num_hover2.png);
}
.carousel .inner .circles li:nth-child(3) a{
background-image: url(images/longxi/num_hover3.png);
}
.carousel .inner .circles li:nth-child(4) a{
background-image: url(images/longxi/num_hover4.png);
}
</style>
</head>
<body>
<div class="carousel" id="carousel">
<div class="imgs" id="imgs">
<ul>
<li><img src="data:images/longxi/1.jpg" alt=""></li>
<li><img src="data:images/longxi/2.jpg" alt=""></li>
<li><img src="data:images/longxi/3.jpg" alt=""></li>
<li><img src="data:images/longxi/4.jpg" alt=""></li>
</ul>
</div>
<div class="inner">
<ol class="circles" id="circles">
<li class="cur"><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ol>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
// 获取元素
var $imgLis = $("#imgs ul li");
var $carousel = $("#carousel");
var $circles = $("#circles li");
var amount = $imgLis.length; // 信号量
var idx = 0;
// 页面加载后开启定时
var timer = setInterval(rightBtnFun, 3000);
// 鼠标进入停止定时器
$carousel.mouseenter(function(){
clearInterval(timer);
});
// 鼠标离开重新开启定时器
$carousel.mouseleave(function(){
// 设表先关
clearInterval(timer);
timer = setInterval(rightBtnFun, 3000);
}); // 小圆点的鼠标进入事件
$circles.mouseenter(function(){
// 老图淡出
$imgLis.eq(idx).stop(true).fadeOut(800);
// 信号量
idx = $(this).index();
// 新图淡入
$imgLis.eq(idx).stop(true).fadeIn(1000);
// 小圆点改变
$(this).addClass("cur").siblings().removeClass("cur");
});
// 右按钮的点击事件
function rightBtnFun(){
// 当元素不运动时才执行事件
if(!$imgLis.is(":animated")){
// 老图淡出
$imgLis.eq(idx).fadeOut(800);
// 信号量
idx ++;
if(idx > amount - 1){
idx = 0;
}
// 新图淡入
$imgLis.eq(idx).fadeIn(1000);
// 小圆点事件
$circles.eq(idx).addClass("cur").siblings().removeClass("cur");
}
}
</script>
</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万能轮播图
lunbotu.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- 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> < ...
随机推荐
- freemarker常见语法大全
推荐freemarker系列教程:http://swiftlet.net/archives/category/freemarker FreeMarker的插值有如下两种类型:1,通用插值${expr} ...
- String、StringBuilder和StringBuffer类
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- gunicorn syncworker 源码解析
gunicorn支持不同的worker类型,同步或者异步,异步的话包括基于gevent.基于eventlet.基于Aiohttp(python版本需要大于3.3),也有多线程的版本.下面是gunico ...
- Intellij 如何在新窗口中打开项目
好多程序员都使用intelliJ idea开发项目,由于不小心设置了不在提示打开项目项目方式,所以只能打开一个窗口,而且只能同时打开一个项目,特别郁闷,分享下设置后的效果 工具/原料 Intell ...
- 为eclipse离线安装hibernate tools插件
工具/原料 eclipse luna jboss hibernate tools 方法/步骤 下载hibernate tools插件 在eclipse根目录下创建myplugins和l ...
- git 设置和取消代理
# 设置ss git config --global http.proxy 'socks5://127.0.0.1:1080' git config --global https.proxy 'soc ...
- 初次使用Python脚本,proto协议文件转Lua代码
使用IntelliJ IDEA编辑器编写Lua脚本的时候,安装一个插件 "EmmyLua" 可以对有代码提示功能 想把protoBuf协议文件转成Lua代码,然后给出代码提示 第一 ...
- Fragment多重嵌套实现电影，影院展示页
转载请标明出处: http://www.cnblogs.com/dingxiansen/p/8135888.html 本文出自:丁先森-博客园 公司以前的app是用H5封的,由于一个模块效果用H5实现 ...
- 利用GDAL进行工具开源化改造
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 为利于项目实施,团队用AE写过一个插件式的工具集,主要包括了数 ...
- springMVC(4)---生成excel文件并导出
springMVC(4)---生成excel文件并导出 在开发过程中,需要将数据库中的数据以excel表格的方式导出. 首先说明.我这里用的是Apache的POI项目,它是目前比较成熟的HSSF接口, ...