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>  <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> < ...

随机推荐

多线程编程学习笔记——async和await（三）
接上文多线程编程学习笔记——async和await(一) 接上文多线程编程学习笔记——async和await(二) 五. 处理异步操作中的异常本示例学习如何在异步函数中处理异常,学习如何对多 ...
Angular相关命令
1 创建相关 1.1 创建项目 ng new 项目名 -> 创建新项目 ng new 项目名 --skip-install -> 不进行模块安装 ng new 项目名 -si ng ...
「mysql优化专题」高可用性、负载均衡的mysql集群解决方案（12）
一.为什么需要mysql集群? 一个庞大的分布式系统的性能瓶颈中,最脆弱的就是连接.连接有两个,一个是客户端与后端的连接,另一个是后端与数据库的连接.简单如图下两个蓝色框框(其实,这张图是我在悟空问答 ...
presto
presto中文站:http://prestodb-china.com/ 进入hadoop机器,进入presto所在bin目录:presto --server localhost:9090 --cat ...
ASP.NET Core MVC请求超时设置解决方案
设置请求超时解决方案当进行数据导入时,若导入数据比较大时此时在ASP.NET Core MVC会出现502 bad gateway请求超时情况(目前对于版本1.1有效,2.0未知),此时我们需要在项 ...
【二十六】php之文件编程
1.获取文件的相关信息 fopen.fstat.fclose(打开文件.获取文件相关信息.关闭文件) filesize.filectime.filemtime.fileatime(文件大小.上次cha ...
Libevent源码分析 (1) hello-world
Libevent源码分析 (1) hello-world ⑨月份接触了久闻大名的libevent,当时想读读源码,可是由于事情比较多一直没有时间,现在手头的东西基本告一段落了,我准备读读libeven ...
softmax分类算法原理(用python实现)
逻辑回归神经网络实现手写数字识别如果更习惯看Jupyter的形式,请戳Gitthub_逻辑回归softmax神经网络实现手写数字识别.ipynb 1 - 导入模块 import numpy as n ...
【WebGL】《WebGL编程指南》读书笔记——第4章
一.前言今天继续第四章的学习内容,开始学习复合变换的知识. 二.正文 Example1: 复合变换在书中,作者为我们封装了一套用于变换的矩阵对象:Matrix4对象.它 ...
java小技术之生成二维码
把我们需要的链接或者内容生成二维码其实是一件非常容易的事情,有很多办法可以实现,这里我们采用JS方法生成. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTM ...

jq龙禧轮播图

jq龙禧轮播图的更多相关文章

随机推荐

热门专题