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> < ...
随机推荐
- D01 Elon Mulsk The future we're building — and boring
摘要:精选TED. 每个音频不超过2分钟,学英语和吸收伟大思想两不误 音频: https://n1audio.hjfile.cn/st/fb5ace6f-7b63-439d-954c-c4539c1f ...
- linux OSI七层模型、TCP/IP协议栈及每层结构大揭秘
学习Linux,就算是像小编我这样的小萌新,也知道OSI模型.什么?!你不知道!!! 好吧,这篇秘籍拿走,不谢~~~ 一.两个协议 (1)OSI 协议模型(7层)国际协议 PDU:协议数据单元对 ...
- springboot整合redis
springboot-整合redis springboot学习笔记-4 整合Druid数据源和使用@Cache简化redis配置 一.整合Druid数据源 Druid是一个关系型数据库连接池,是阿 ...
- Python 3.6.3 利用 Dlib 19.7 和 opencv 实现人脸68点定位 进行人脸识别
0.引言 介绍利用Dlib官方给的人脸识别预测器"shape_predictor_68_face_landmarks.dat"进行68点标定,利用OpenCv进行图像化处理,在人脸 ...
- Python 3.6.3 利用Dlib 19.7库进行人脸识别
0.引言 自己在下载dlib官网给的example代码时,一开始不知道怎么使用,在一番摸索之后弄明白怎么使用了: 现分享下 face_detector.py 和 face_landmark_detec ...
- 你的Excel表格颜色搭配的对么？
在昨天的文章中,我们讨论了<Excel表格制作的基本九大原则>,今天我们还要继续聊聊,Excel表格的颜色搭配规则. 一个表格的美丑与否,除了基本的格式之外,如何配色也是非常关键的,如果只 ...
- 利用jquery实现电商网站常用特效之：五星评分
这篇文章主要为大家详细介绍了基于jquery实现五星好评,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在电商网站,我们经常会用到五星评分的功能,现在用jQuery实现一个简单的demo: 1.引 ...
- 自定义bootstrap样式-9行样式自定义漂亮大气bootstrap导航栏
有人说前端发展太快,框架太多,各有所需,各有所长.看看这幅图,估计都知道这些框架,但是大部分公司中实际要用到的也就那么几个. 发展再快,框架再多.还是得回到原点,不就是Html+Css+JavaScr ...
- @Data 注解引出的 lombok 小辣椒
今天在看代码的时候, 看到了这个注解, 之前都没有见过, 所以就查了下, 发现还是个不错的注解, 可以让代码更加简洁. 这个注解来自于 lombok,lombok 能够减少大量的模板代码,减少了在使用 ...
- zepto的返回顶部scrollTop的动画解决方法
写移动端的时候,引入的zepto.js里的animate不包括scrollTop,所以返回顶部的时候,没有动画的效果.这里我使用的是setInterval的方法.代码详情如下 <!DOCTYPE ...