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> < ...
随机推荐
- Python爬虫(二十四)_selenium案例：执行javascript脚本
本章叫介绍如何使用selenium在浏览器中使用js脚本,更多内容请参考:Python学习指南 隐藏百度图片 #-*- coding:utf-8 -*- #本篇将模拟执行javascript语句 fr ...
- IDEA热部署（一）---解析关键配置。
本编博客转载自:因为自己在研究热部署,包括热部署那些文件,部署实现的包括那些操作.这一块,所以这篇好博客. http://www.mamicode.com/info-detail-1699044.ht ...
- 浏览器兼容性--IE11以及Edge等下载文件的中文名出现乱码，前后端解决方案
项目中有用到文件下载功能,之前在处理下载时对IE浏览器下文件下载名进行过处理,测试也没有问题,但是功能上线后,业务反馈IE11文件下载文件名依然乱码.打印User-Agent字符串如下: IE11 U ...
- 【java设计模式】【创建模式Creational Pattern】抽象工厂模式Abstract Factory Pattern
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAW0AAABvCAIAAACo3AbKAAALvUlEQVR4nO1dUa7cOA7U/c+zwJxkf4
- 【python】for循环
>>> exp='welcom to python'>>> for i in exp: print(i,end=' ') w e l c o m t o p y t ...
- HTML5 桌面通知：Notification API
原文地址:http://blog.gdfengshuo.com/article/23/ 前言 Notification API 是 HTML5 新增的桌面通知 API,用于向用户显示通知信息.该通知是 ...
- 用js筛选数据排序
题目 参考以下示例代码,页面加载后,将提供的空气质量数据数组,按照某种逻辑(比如空气质量大于60)进行过滤筛选,最后将符合条件的数据按照一定的格式要求显示 <!DOCTYPE html> ...
- volatile作用及相关集合类
在工作一年多之后,java程序员都会了解到volatile 这个修饰符, 其在多线程环境下解决了long/double写操作的原子性.基本变量的可见性.通过建立内存屏障保证指令有序性 那么在哪些Jav ...
- 微信公众号H5支付遇到的那些坑
简史 官方文档说的很清楚,商户已有H5商城网站,用户通过消息或扫描二维码在微信内打开网页时,可以调用微信支付完成下单购买的流程. 当然,最近微信支付平台也加入了纯H5支付,也就是说用户可以在微信以外的 ...
- 响应式布局—设备像素密度测试 (-webkit-min-device-pixel-ratio)
最近遇到这种头疼的问题,百思不得其解,不耻下问,悬梁刺股这些事情都做过之后,终于看到希望,于是攒见好就收,感觉整理分享给大家,希望有所帮助. 对手机分辨率和网页像素的初步认识是,是2倍的差别. 但 ...