定时器图片高亮从中间往两边循环

最新推荐文章于 2020-09-19 17:00:21 发布
最新推荐文章于 2020-09-19 17:00:21 发布
阅读量455 收藏 1
点赞数
分类专栏： JS 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Freezezeling/article/details/82349948
版权
JS 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
前端
5 篇文章 0 订阅
订阅专栏

效果图：

页面代码：


<style> *, :after, :before { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; } table { border-spacing: 0; border-collapse: collapse; text-align: center; } .draw { width: 560px; height: 600px; margin: 0 auto; padding:51px; background-image: url(images/bg.png); background-repeat: no-repeat; background-size: 100%; } .draw .item { width: 150px; height: 150px; background-image: url(images/bg1.png); background-repeat: no-repeat; background-size: 96%; } .draw .item.active { background-image: url(images/bg2.png); background-repeat: no-repeat; background-size: 100%; } .draw .img { display: table-cell; width: 150px; height: 61px; vertical-align: middle; text-align: center; } .draw .img img { vertical-align: top; } .draw .gap { width: 5px; } .draw .gap-2 { height: 5px; } </style>

<!--布局除table外也可用ul>li-->
<body style="background: #f02d2f;">
   <div class="draw" id="lottery">
      <table>
         <tr>
            <td class="item lottery-unit lottery-unit-2">
               <div class="img">
                  <img src="images/img1.png" alt="">
               </div>
            </td>
            <td class="gap"></td>
            <td class="item lottery-unit lottery-unit-1">
               <div class="img">
                  <img src="images/img2.png" alt="">
               </div>
            </td>
            <td class="gap"></td>
            <td class="item lottery-unit lottery-unit-2">
               <div class="img">
                  <img src="images/img3.png" alt="">
               </div>
            </td>
         </tr>
         <tr>
            <td class="gap-2" colspan="5"></td>
         </tr>
         <tr>
            <td class="item lottery-unit lottery-unit-3">
               <div class="img">
                  <img src="images/img4.png" alt="">
               </div>
            </td>
            <td class="gap"></td>
            <td class="item lottery-unit lottery-unit-0">
               <div class="img">
                  <img src="images/img5.png" alt="">
               </div>
            </td>
            <td class="gap"></td>
            <td class="item lottery-unit lottery-unit-3">
               <div class="img">
                  <img src="images/img5.png" alt="">
               </div>
            </td>
         </tr>
         <tr>
            <td class="gap-2" colspan="5"></td>
         </tr>
         <tr>
            <td class="item lottery-unit lottery-unit-4">
               <div class="img">
                  <img src="images/img7.png" alt="">
               </div>
            </td>
            <td class="gap"></td>
            <td class="item lottery-unit lottery-unit-5">
               <div class="img">
                  <img src="images/img6.png" alt="">
               </div>
            </td>
            <td class="gap"></td>
            <td class="item lottery-unit lottery-unit-4">
               <div class="img">
                  <img src="images/img8.png" alt="">
               </div>
            </td>
         </tr>
      </table>
   </div>
<script src="js/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
   var lottery = {
      index: 0, //当前转动到哪个位置，起点位置
      count: 0, //总共有多少个位置
      timer: 0,
      init: function(id) {
         if($('#' + id).find('.lottery-unit').length >= 0) {
            $lottery = $('#' + id);
            $units = $lottery.find('.lottery-unit');
            this.obj = $lottery;
            this.count = $units.length;
            $lottery.find('.lottery-unit.lottery-unit-' + this.index).addClass('active');
         };
      },
      roll: function() {
         var index = this.index;
         var count = this.count;
         var lottery = this.obj;
         $(lottery).find('.lottery-unit.lottery-unit-' + index).removeClass('active');
         index += 1;
         if(index >=  count) {
            index = 0;
         }
         this.index = index;
         $(lottery).find('.lottery-unit.lottery-unit-' + index).addClass('active');
         return false;
      },
   };
   window.onload = function() {
      lottery.init('lottery');
      var ref=null;
      ref=setInterval(function(){
            lottery.times += 1;
            lottery.roll();

                lottery.times = 0;
                return false;
      },300)
   };
</script>
</body>

 

 

Freezezeling
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
定时器实现图片轮播
08-31
定时器实现图片轮播
collectionview 显示中间大，两边小，展示图片或者内容
04-02
在本案例中，我们关注的是如何通过Swift语言实现一个特殊的CollectionView布局，即"中间大，两边小"的效果，同时支持滑动显示图片或内容。这种布局常用于展示轮播图、商品列表等，可以吸引用户的注意力并提供良好的...
cocos JS for循环让精灵从屏幕中间往两边排列散开
weixin_34075551的博客
04-26 265
//this.ShowImg[i] 需要排列什么就push加进数组里面，一个for循环计算即可 var size = this.ShowImg.length;var count = size; for(var i=0;i&lt;size; i++){ count--; var a =count; this.ShowImg[i].setVisible(true); this....
iOS数组中间向两边遍历算法
linqir的专栏
04-06 548
NSArray *array = [NSArray arrayWithObjects:@"1", @"2" , @"3", @"4" ,@"5" ,@"6" ,@"7" ,@"8" ,@"9" ,@"10" ,@"11" ,@"12" ,@"13" ,@"14" ,@"15" ,@"16" ,@"17" ,@"18" ,@"19" ,nil]; //算法核心代码 数组的对称遍历 ...
C++ 算法 排序 从中间向左右两边依次递减排序
weixin_30740581的博客
02-27 709
C++ 算法 排序 从中间向左右两边依次递减排序 问题： 现有一整型数组int input[]={...}; 如果数组元素个数是奇数，则以中间一个为最大，左边第一个次之，右边第一个再次之。。。如此排序后，最左边第二小，最右边最小 如果数组元素个数是偶数，则以中间两个的右边那个为最大，左边第一个次之，右边第一个再次之。。。如此排序后，最右边...
UVA 699 - The Falling Leaves（从中间向两边递归perfect）
u014682977的专栏
05-24 344
#include #include #include #include #include #include #include #include using namespace std; #define M 1000+10 typedef struct TNode { int data; TNode *lchild,*rchild; } TNode,*BiTree;
Android 定时器实现图片的变换
01-04
Android 定时器实现图片的变换 在Android中，要让每秒进行一次ui更新，就需要利用到定时器和handler，message的结合，如果不使用handler就不能达到更新ui的效果，我的理解是handler中存在一个队列问题，可以保证不...
ios定时器循环
03-31
本篇文章将深入探讨如何实现"ios定时器循环"，即首次进入10秒后执行方法，随后每隔2秒执行一次该方法。 首先，我们要了解iOS中的定时器对象NSTimer。它是Foundation框架的一部分，通过它可以创建定时触发的事件。...
轮播图-实现中间大两边小的轮播图
06-29
本项目"轮播图-实现中间大两边小的轮播图"旨在创建一个类似CollectionView效果的轮播图，其中中间的图片放大，两边的图片缩小，为用户提供一种视觉焦点突出的交互体验。 要实现这种效果，开发者首先需要理解...
IOS实现图片轮播无限循环效果
09-02
初始状态下，中间的ImageView显示第一张图片，两边的ImageView分别显示第二张和最后一张图片。 2. **处理ScrollView的滚动事件**： - 当用户滑动ScrollView时，我们需要监听`scrollViewDidScroll:`方法，根据...
JS实现图片高亮展示效果实例
10-23
主要介绍了JS实现图片高亮展示效果的方法,实例分析了JavaScript响应鼠标事件动态操作页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
定时器实现图像闪烁
weixin_30871701的博客
04-07 206
procedure TForm1.Timer1Timer(Sender: TObject);begin if Image1.Visible=true then Image1.Visible:=false else Image1.Visible:=true; end; procedure TForm1.Button1Click(Sender: TObject);begin ...
For循环完成高亮
weixin_44540780的博客
02-20 369
开发工具与关键技术：前端 作者：黄志鹏 撰写时间：2019/2/10 现在，我们用for循环来简单制作一个具有模仿翻页的页面，下面我们先来完成布局。 在一个大盒子里面放几个a标签，并且设置其样式。 布局代码如下 样式代码如下 浏览器初始样式如下 当点击首页时我们需要1高亮，，我们把“bys‘这个类赋值给当前，其中只需注意索引的问题即可，点击末页也是一样，代码如下 浏览器输出为 下面，...
js定时器、高亮修改单元格背景色
weixin_30851867的博客
06-19 164
window.setInterval() 功能：按照指定的周期（以毫秒计）来调用函数或计算表达式。 语法：setInterval(code,millisec) 解释：code：在定时时间到时要执行的JavaScript代码串，js函数 millisec：设定的定时时间，用毫秒数表示。 返回值：定时器的ID值，可用于clearInterval()方法停止指定的定时器。 注：setI...
Android ViewPager 实现无限循环滑动
u012572538的专栏
03-11 3262
先高亮一个问题向大家请教，谢谢大家！就是用PagerTabStripe实现时，title总是在文字的中间，怎么能让标题在view的左上角呢？谢谢大家！图是在随便找的，就是怎么让这个“Nearby”显示在最左边呢？ 已经用ViewPager 和PagerTabStrip 实现了页面滑动和tab滑动，老板又要求实现无限循环滑动( ▼-▼ )，纠结了很久，想到了一个不算办法的办法，即把adap
JS 随机图片效果
一直专注于互联网
05-26 199
&lt;html&gt; &lt;head&gt; &lt;title&gt;JS 随机图片效果&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;style type="text/css"&gt; &amp
VUE-计时器的用法
热门推荐
LzzMandy的博客
06-08 1万+
功能简介： 1、初始值为0，点击【加】按钮，数字自+1；连续点击【加】，不影响数字+1 2、点击【停】按钮，停止+1 源码： <!DOCTYPE html> <html add="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt...
JS基础_定时器练习_完成图片切换效果
weixin_41804367的博客
09-19 551
要求 使用JavaScript中的定时器完成任意四张图片的轮播效果，同时设计两个按钮，按下“开始”按钮，图片开始进行轮播，按下“停止”按钮，图片停止轮播。 分析 根据要求，首先，任意在网上寻找四张不同的图片保存起来，然后在代码中设置三个标签，一个图片标签（src属性值为第一张图片的根路径），两个按钮标签； <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
jquery包
weixin_30604651的博客
05-21 599
/*! jQuery v1.11.2 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */ !function(a,b){"object"==typeof module&&"object"==typeof module.exports?module.exports=a.document?b(a,!0)...
STM32中断与定时器详解：从主循环到例程
"STM32程序主循环与中断定时器详解" 本文主要讲解了STM32微控制器在程序主循环中的中断和定时器应用，特别是使用查询方式的定时器例程。STM32中断系统是其强大功能的一部分，能够有效地处理随机事件，而定时器则是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值