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

随机推荐

springMVC上传错误StandardMultipartHttpServletRequest
异常信息 java.lang.ClassCastException: org.springframework.security.web.servletapi.HttpServlet3RequestFa ...
配置程序成为Linux服务
最近写了个程序需要随Linux启动时自动运行起来, 查了一些方法后, 通过配置程序成为系统的服务实现了这个需求, 在此记录一下. 测试程序 #! /bin/sh while [ true ] do e ...
asp.net mvc 下拉列表
第一步:新建一个格式化下拉列表的公共类文件 using System; using System.Collections; using System.Collections.Generic; usin ...
代码生成利器：IDEA 强大的 Live Templates(转)
代码生成利器:IDEA 强大的 Live Templates - 文章 - 伯乐在线http://blog.jobbole.com/110607/ 前言 Java 开发过程经常需要编写有固定格式的代码 ...
ios 访问隐私信息 info.plist 中的字段
1.iOS10相册相机闪退bug: iOS10系统下调用系统相册,相机功能,遇到闪退的情况,描述如下: This app has crashed because it attempted to acc ...
Akka Serialization
Akka本身使用了Protocol Buffers来序列化内部消息(比如gossip message).Akka系统还可以配置自定义序列化机制. 配置conf akka { actor { ## 在a ...
CubeSuit+ （ CS+ for ca ）
作为瑞萨单片机的初学者,最先接触的当属它的IDE了,接下来我将分享一些我使用这款单片机的心得,以供大家参考. 我使用的是RL78F13系列R5F10BGE,那如何建立一个能使用的工程呢?相信大家在网络 ...
UVA 11825 Hackers' Crackdown
题目大意就是有一个图,破坏一个点同时可以破坏掉相邻点.每个点可以破坏一次,问可以完整破坏几次,点数=16. 看到16就想到状压什么的. 尝试设状态:用f[i]表示选的情况是i(一个二进制串),至少可以 ...
JMeter 插件 Json Path 解析HTTP响应JSON数据
一.基本简介 JMeter 是一个不错的负载和性能测试工具,我们也用来做 HTTP API 接口测试.我们的 API 返回结果为JSON数据格式.JSON 简介,JSON 教程. JSON 已经成为数 ...
浅谈OGNL表达式
OGNL(Object-Graph Navigation Language):对象视图导航语言 ${user.addr.name}这样的写法就叫对象视图导航 OGNL不仅可以视图导航,支持EL表达式更 ...

jq龙禧轮播图

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

随机推荐

热门专题