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> < ...
随机推荐
- F01:金融学第一定律：时间的价值
很小的时候,我们就听大人们讲过:时间就是金钱. 长大了,也觉得这句话应该是对的.我们很珍惜时间,但是似乎没有看到金钱的急剧增加啊.总之,这是模糊,体验感又不强的一句话. 既然谈到时间的价值,价值最容易 ...
- Linux基础：用tcpdump抓包
简介 网络数据包截获分析工具.支持针对网络层.协议.主机.网络或端口的过滤.并提供and.or.not等逻辑语句帮助去除无用的信息. tcpdump - dump traffic on a netwo ...
- 【java API基本实现】ArrayList
ArrayList: package com.tn.arraylist; public class ArrayList { Object[] objects=new Object[10]; int i ...
- HtmlTestRunner无法生成HTML报告问题
环境: Python3.6 + Selenium3.3.0 + HtmlTestRunner1.1.0 ON Windows10 IDE: PyCharm HtmlTestRunner地址: http ...
- ELK开机启动 service文件内容
为了实现ELK的3部分开机启动,可以添加各项服务对应的service文件,再通过systemctl enable XXX实现ELK所有服务开机启动. Elasticsearch elasticsear ...
- MySQL集群PXC的搭建
MySQL集群PXC的搭建 最近公司某客户要求我们的数据库搭建PXC集群以保证他们的系统高性能和搞稳定性 以后花费了一些时间去搭建和测试,也踩过一些坑,准备分享出来 系统:centos6.6PXC:5 ...
- Mysql的硬件优化和配置优化
mysql数据库的优化,算是一个老生常谈的问题了,网上也有很多关于各方面性能优化的例子,今天我们要谈的是MySQL硬件优化和系统参数的优化-即优化my.cnf文件 MySQL的优化我分为两个部分,一是 ...
- Asp.net IIS Express 无法启动 解决办法
http://www.mamicode.com/info-detail-1893424.html 一 .其他项目都可以,就这么一个不行 用记事本或者其他什么文本编辑器,打开项目的.csproj文件,定 ...
- Qt创建停靠悬浮窗口
1.Qt实现窗口停靠和悬浮使用类QDockWidget,它有两个重要方法用来设置停靠特性以及停靠区域, dw1->setFeatures(QDockWidget::DockWidgetMovab ...
- Life in Changsha College-第一次冲刺
第一次冲刺任务 基于大局的全面性功能框架定位,要求能实现用户基于自己的需求进行的一系列操作. 用户故事 用户打开"生活在长大"的界面 程序首页展示校园服务,论坛等相关信息 用户选择 ...