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> < ...
随机推荐
- android 实现银联刷卡机消费后，手动签名的功能
几天前去物管交物业费,物管工作人员说小区引进高新产品,使用银行卡消费后,不需要拿笔在银联机上签名,直接用手指触摸实现消费签名,当时心想,果然是高科技,机子外形如下左图,签名如下右图. ...
- CNN中的卷积操作的参数数计算
之前一直以为卷积是二维的操作,而到今天才发现卷积其实是在volume上的卷积.比如输入的数据是channels*height*width(3*10*10),我们定义一个核函数大小为3*3,则输出是8* ...
- Chef 自动化运维：开始“烹饪”
在 Chef Workstation 上创建了一个 cookbook 之后,我们执行以下命令来进行测试: chef-client --local-mode --override-runlist fir ...
- 小白的Python之路 day2 列表、元组操作
1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 1 names = ['Tom','Jack','Qian'] 通过下标访问列表中 ...
- vue vuex vue-rouert后台项目——权限路由（超详细简单版）
项目地址:vue-simple-template共三个角色:adan barbara carrie 密码全是:123456 adan 拥有 最高权限A 他可以看到 red , yellow 和 blu ...
- jQuery： $.extend()用法总结
1.重载原型 $.extend({},src1,src2,src3...) Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型. 它的含义是将src1,src2, ...
- Python下载一张图片与有道词典
1.下载一张图片代码1 import urllib.request response = urllib.request.urlopen('http://photocdn.sohu.com/201009 ...
- datatable使用笔记
这是一个使用datatable的jsp文件实例,实现了点击单元格后编辑单元格所在行的内容. <%@ page pageEncoding="UTF-8"%> <!D ...
- 再谈javascript面向对象编程
前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始 ...
- CSS3 自定义动画（animation）
除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外,CSS3 还有一种自由度更大的自定义动画,开发者甚至可以使用变形(transfor ...