【解决火车轮播图小圆点跳的问题】传统轮播图-三位法

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <style type="text/css">
  7         *{
  8             padding:0;
  9             margin:0;
 10         }
 11         ul,ol{
 12             list-style: none;
 13         }
 14         a{
 15             text-decoration: none;
 16             color:#333;
 17         }
 18         .carousel{
 19             width: 560px;
 20             height: 300px;
 21             border: 1px solid #000;
 22             margin:50px auto;
 23             position: relative;
 24             overflow: hidden;
 25         }
 26         .carousel .unit li{
 27             /*每一个li都是火车头,自己带着图片移动*/
 28             /*所有的图片都在候场位置560px*/
 29             position: absolute;
 30             left:560px;
 31             width: 560px;
 32             height: 300px;
 33         }
 34         .carousel .unit li:first-child{
 35             left:0;
 36         }
 37         .carousel .btns a{
 38             width: 30px;
 39             height: 60px;
 40             position: absolute;
 41             top:50%;
 42             margin-top: -30px;
 43             background-color: rgba(0,0,0,.5);
 44             color:#fff;
 45             font-size: 20px;
 46             text-align: center;
 47             line-height: 60px;
 48         }
 49         .carousel .btns a.leftBtn{
 50             left: 10px;
 51         }
 52         .carousel .btns a.rightBtn{
 53             right: 10px;
 54         }
 55         .carousel .circles{
 56             width: 140px;
 57             height:20px;
 58             position: absolute;
 59             left:50%;
 60             margin-left: -70px;
 61             bottom: 30px;
 62             overflow: hidden;
 63
 64         }
 65         .carousel .circles ol{
 66             width: 150px;
 67         }
 68         .carousel .circles ol li{
 69             float: left;
 70             width: 20px;
 71             height: 20px;
 72             margin-right: 10px;
 73             border-radius: 50%;
 74             background-color: orange;
 75         }
 76         .carousel .circles ol li.cur{
 77             background-color: red;
 78         }
 79
 80
 81     </style>
 82 </head>
 83 <body>
 84     <div class="carousel" id="carousel">
 85         <ul class="unit" id="unit">
 86             <li><a href=""><img src="images/0.jpg" ></a></li>
 87             <li><a href=""><img src="images/1.jpg" ></a></li>
 88             <li><a href=""><img src="images/2.jpg" ></a></li>
 89             <li><a href=""><img src="images/3.jpg" ></a></li>
 90             <li><a href=""><img src="images/4.jpg" ></a></li>
 91         </ul>
 92         <div class="btns">
 93             <a href="javascript:void(0);" class="leftBtn" id="leftBtn">&lt;</a>
 94             <a href="javascript:void(0);" class="rightBtn" id="rightBtn">&gt;</a>
 95         </div>
 96         <div class="circles" id="circles">
 97             <ol>
 98                 <li class="cur"></li>
 99                 <li></li>
100                 <li></li>
101                 <li></li>
102                 <li></li>
103             </ol>
104         </div>
105     </div>
106     <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
107     <script type="text/javascript">
108         // 获取元素
109         var $carousel = $("#carousel");
110         var $imgLis = $("#unit li");
111         var $leftBtn = $("#leftBtn");
112         var $rightBtn = $("#rightBtn");
113         var $circles = $("#circles ol li");
114         var amount = $circles.length;   //5
115
116
117         // 信号量
118         var idx = 0;
119
120         // 定时器
121         var timer = setInterval(rightBtnFun, 3000);
122         // 鼠标进入停止定时器
123         $carousel.mouseenter(function(){
124             clearInterval(timer);
125         });
126         // 鼠标离开重新开启定时器
127         $carousel.mouseleave(function(){
128             // 设表先关
129             clearInterval(timer);
130             timer = setInterval(rightBtnFun, 3000);
131         });
132
133
134         // 右按钮的点击事件
135         $rightBtn.click(rightBtnFun);
136         function rightBtnFun(){
137             // 当图片运动时什么都不做
138             if($imgLis.is(":animated")){
139                 return;
140             }
141             // 老图退场-560
142             $imgLis.eq(idx).animate({"left": -560},500);
143             // 信号量改变
144             idx ++;
145             if(idx > amount - 1){
146                 idx = 0;
147             }
148             // 新图保证从候场位置560入场0
149             $imgLis.eq(idx).css("left",560).animate({"left":0},500);
150             // 小圆点
151             $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
152         }
153
154         // 左按钮点击事件
155         $leftBtn.click(function(){
156             if(!$imgLis.is(":animated")){
157                 // 老图退场560
158                 $imgLis.eq(idx).animate({"left":560},500);
159                 // 信号量改变
160                 idx --;
161                 if(idx < 0){
162                     idx = amount - 1;
163                 }
164                 // 新图从-560入场
165                 $imgLis.eq(idx).css("left",-560).animate({"left":0},500);
166                 // 小圆点
167                 $circles.eq(idx).addClass("cur").siblings().removeClass("cur");
168             }
169         });
170
171         // 小圆点鼠标进入事件
172         $circles.mouseenter(function(){
173             // 判断当前信号量和触发事件的小圆点序号大小
174             // 将触发事件的小圆点序号保存
175             var i = $(this).index();
176
177             // 如果i > idx,新图从560入场
178             if(i > idx){
179                 // 老图退场-560
180                 $imgLis.eq(idx).stop(true).animate({"left": -560},500);
181                 // 信号量改变
182                 idx = i;
183                 // 新图入场
184                 $imgLis.eq(idx).css("left",560).stop(true).animate({"left": 0},500);
185             }else if(i < idx){
186                 // 新图从-560入场
187                 // 老图退场560
188                 $imgLis.eq(idx).stop(true).animate({"left": 560},500);
189                 // 信号量改变
190                 idx = i;
191                 // 新图从-560入场
192                 $imgLis.eq(idx).css("left",-560).stop(true).animate({"left": 0},500);
193             }
194             // 小圆点事件
195             $(this).addClass("cur").siblings().removeClass("cur");
196         });
197
198
199
200
201
202
203
204
205
206
207     </script>
208 </body>
209 </html>
时间: 2024-10-03 01:02:36

【解决火车轮播图小圆点跳的问题】传统轮播图-三位法的相关文章

JQuery和html+css实现带小圆点和左右按钮的轮播图

是的!你没看错!还是轮播图.这次的JQuery的哟!! CSS代码: /*轮播图 左右按钮 小白点*/ #second_div{ margin-top: 160px; } .img_box{ overflow: hidden; width:100%; height:420px; border:1px solid; position:relative; } .img_box img{ width:100%; position:absolute; } .ul5{ list-style: none;

2017-05-17 js动态生成轮播图小圆点

从今天开始,把自己做的笔记转移到博客园: 今晚复习了一下动态创建轮播图小圆点做了一下小的笔记: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>2017-05-17 js动态生成轮播图小圆点</title> 6 <!-- author:ishou Mr丶Zhu --> 7

JS小插件之2——cycle元素轮播

元素轮播效果是页面中经常会使用的一种效果.这个例子实现了通过元素的隐藏和显示来表现轮播效果.效果比较简单. 效果图如下: 源代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;"> 5 <title> cycle demo </titl

轮播图---左右切换无长滚动效果轮播图-中级难度版

左右切换无长滚动轮播图思路:首先设有全局变量position(确定当前图片是第几张),arr数组:存放图片地址,方向:direction, 及lis小圆点数组,prev,记录小圆点的前一个, moveBool是否进入运动函数等1.点击事件:点击左边的leftBn,设置direction="right",position--,在这要确定position不能超出数组长度范围, 超出要重新赋值,点击小圆点把小圆点的当前是lis数组中的第几个赋值给position,然后图片生成2.图片生成:图

自己动手丰衣足食之轮播图一动态修改marginTop属性实现轮播图

引言 学习jQuery有年头了,刚开始学习时自己动手写过轮播图,放的久了以至于忘了大致思路了.现在转而做前端,抽空把jquery轮播图拿出来写一写,把各种思路都自己练习练习,这里主要使用动态修改marginTop来实现. 实现原理 1.除第一张图片外,其余图片全部隐藏,4张图片重叠起来. 2.导航按钮添加mouseover和mouseleave事件. 3.设置interval函数,启动定时器调用ShowImg函数. 4.动态修改marginTop属性达到上下轮播的效果,说道动态修改margin属

自动生成轮播图小圆点

原文地址:https://www.cnblogs.com/dylAlex/p/9503420.html

小清新的jQuery ck-slide 图片轮播

ck_slide 是一款小清新的jQuery 幻灯片插件,它非常小巧,压缩后仅 3KB,基本功能可以满足.它支持淡入淡出/左右滚动.箭头/圆点控制.自动播放. 在线实例 默认(淡入淡出) 左右滚动 自动播放 使用方法 <div class="ck-slide">      <ul class="ck-slide-wrapper">          <li>              <a href="#"

微信小程序轮播图

我们开发web页面的时候,无论是图片还是模块,很多时候会用到轮播,那么下面是微信小程序的轮播功能,也是小程序自带的swiper轮播功能. 下面是轮播展示图: 熟悉一下swiper配置属性,这里的配置属性和我们平时用的轮播插件配置属性差别不大:(点击查看微信小程序开发文档) 首先是在wxml文件中加入swiper模块(我这里是把内容模块循环出来的): <swiper class='swiper' indicator-dots='true' autoplay='true' interval='300

微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-dots:是否显示面板指示点 autoplay:是否自动切换 interval:自动切换时间间隔 circular:是否采用衔接滑动 duration:滑动动画时长 更多属性请查看官网 <swiper indicator-dots="{{indicatorDots}}" autopla