jq传统火车轮播图

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         *{

             padding:0;

             margin:0;

         }

         ul,ol{

             list-style: none;

         }

         a{

             text-decoration: none;

             color:#333;

         }

         .carousel{

             width: 560px;

             height: 300px;

             border: 1px solid #000;

             margin:50px auto;

             position: relative;

             overflow: hidden;

         }

         .carousel .unit{

             /*火车宽度要足够大*/

             width:8888px;

             height:300px;

             position: absolute;

             left:0px;

         }

         .carousel .unit li{

             /*图片并排显示*/

             float: left;

             width: 560px;

             height: 300px;

         }

         .carousel .btns a{

             width: 30px;

             height: 60px;

             position: absolute;

             top:50%;

             margin-top: -30px;

             background-color: rgba(0,0,0,.5);

             color:#fff;

             font-size: 20px;

             text-align: center;

             line-height: 60px;

         }

         .carousel .btns a.leftBtn{

             left: 10px;

         }

         .carousel .btns a.rightBtn{

             right: 10px;

         }

         .carousel .circles{

             width: 140px;

             height:20px;

             position: absolute;

             left:50%;

             margin-left: -70px;

             bottom: 30px;

             overflow: hidden;

         }

         .carousel .circles ol{

             width: 150px;

         }

         .carousel .circles ol li{

             float: left;

             width: 20px;

             height: 20px;

             margin-right: 10px;

             border-radius: 50%;

             background-color: orange;

         }

         .carousel .circles ol li.cur{

             background-color: red;

         }

     </style>

 </head>

 <body>

     <div class="carousel" id="carousel">

         <ul class="unit" id="unit">

             <li><a href=""><img src="data:images/0.jpg" alt=""></a></li>

             <li><a href=""><img src="data:images/1.jpg" alt=""></a></li>

             <li><a href=""><img src="data:images/2.jpg" alt=""></a></li>

             <li><a href=""><img src="data:images/3.jpg" alt=""></a></li>

             <li><a href=""><img src="data:images/4.jpg" alt=""></a></li>

         </ul>

         <div class="btns">

             <a href="javascript:void(0);" class="leftBtn" id="leftBtn">&lt;</a>

             <a href="javascript:void(0);" class="rightBtn" id="rightBtn">&gt;</a>

         </div>

         <div class="circles" id="circles">

             <ol>

                 <li class="cur"></li>

                 <li></li>

                 <li></li>

                 <li></li>

                 <li></li>

             </ol>

         </div>

     </div>

     <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

     <script type="text/javascript">

         // 获取元素

         var $carousel = $("#carousel");

         var $unit = $("#unit");

         var $leftBtn = $("#leftBtn");

         var $rightBtn = $("#rightBtn");

         var $circles = $("#circles ol li");

         var amount = $circles.length;   //

         // 信号量可能性0,1,,2,3,4

         // 信号量表示当前显示第几张图片

         var idx = 0;

         // 克隆第一张图片clone()追加到火车的最后appendTo

         $unit.children("li:first").clone().appendTo($unit);

         // 定时器

         var timer = setInterval(rightBtnFun, 2000);

         // 关闭定时器

         $carousel.mouseenter(function(){

             clearInterval(timer);

         });

         // 重新开启定时器

         $carousel.mouseleave(function(){

             // 设表先关

             clearInterval(timer);

             timer = setInterval(rightBtnFun, 2000);

         });

         // 右按钮的点击事件

         // 策略：先拉动，再判断

         $rightBtn.click(rightBtnFun);

         function rightBtnFun(){

             // 图片运动什么都不做

             if($unit.is(":animated")){

                 return;

             }

             idx ++;

             $unit.animate({"left": -560 * idx },700,function(){

                 // 判断

                 if(idx > amount - 1){

                     idx = 0;

                     // console.log(idx);

                     // 猫腻图瞬间移动到真图

                     $unit.css("left",0);

                 }

             });

             // 小圆点改变

             // 信号量有一段时间idx = 5  这是小圆点指示0

             var i = idx <= amount - 1 ? idx : 0;

             $circles.eq(i).addClass("cur").siblings().removeClass("cur");

         }

         // 左按钮的点击事件

         $leftBtn.click(function(){

             // 防流氓

             if(!$unit.is(":animated")){

                 // 策略先验证再拉动

                 // 0,1,2,3,4,

                 idx --;

                 if(idx < 0){

                     idx = 4;

                     // 火车瞬间移动到猫腻图

                     $unit.css("left",-560 * amount);

                 }

                 $unit.animate({"left": -560 * idx},700);

                 // 小圆点

                 $circles.eq(idx).addClass("cur").siblings().removeClass("cur");

             }

         });

         // 小圆点的鼠标进入事件

         $circles.mouseenter(function(){

             idx = $(this).index();

             $unit.stop(true).animate({"left": -560 * idx},700);

             // 小圆点改变

             $(this).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龙禧轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
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 ...

随机推荐

redis参数配置说明
参数说明redis.conf 配置项说明如下:1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no2. 当Redis以守护进程方式运行 ...
Intellij 如何在新窗口中打开项目
好多程序员都使用intelliJ idea开发项目,由于不小心设置了不在提示打开项目项目方式,所以只能打开一个窗口,而且只能同时打开一个项目,特别郁闷,分享下设置后的效果工具/原料 Intell ...
肖秀荣8套卷2018pdf下载|2018肖秀荣冲刺8套卷pdf下载电子版
肖秀荣8套卷2018pdf下载|2018肖秀荣冲刺8套卷pdf下载电子版下载链接: https://u253469.ctfile.com/fs/253469-229815828
linhaifeng
http://www.cnblogs.com/linhaifeng/p/7278389.html http://blog.51cto.com/egon09
IOC容器在web容器中初始化过程——（二）深入理解Listener方式装载IOC容器方式
先来看一下ContextServletListener的代码 public class ContextLoaderListener extends ContextLoader implements S ...
52、css属性操作
前面说的主要是css的使用规则和选择器等,这篇主要讲解css的具体使用. 一.css text 1.文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 1)十六进制值 ...
windows server 2008 R2服务器安装IIS并添加网站
一.连接远程计算机 1.因为我的电脑是win7系统,故这里以win7为例,其他windows系统大同小异,首先点开开始菜单栏,在windows附件下找到远程桌面连接或者采用通用的方法,利用快捷键wi ...
Spark源码剖析（六）：Worker原理与源码剖析
上篇文章我们剖析了Master的原理和源码,知道了当Master使用资源分配算法将资源分配完成后,就会给对应的Worker发送启动Driver或者Executor的消息,那么Worker收到这些消息后 ...
js基础：对DOM进行操作，删除、添加元素
<body> <div id="div1"> <p id="p1">第一段</p> <p id=" ...
利用伪元素:after清除浮动
一.代码 html代码 <div class="clearfix"></div> css样式 .clearfix{ zoom:1;/*这个属性是为了兼容IE ...

jq传统火车轮播图

jq传统火车轮播图的更多相关文章

随机推荐

热门专题