首页banner焦点图自动轮播效果
今天来介绍一下我前两天写一个小任务的时候遇到的一些问题,如果能够有所帮助或者启发,那将是我的荣幸。
<div class="banner">
<a class="" href="#" target="_blank"><img src="data:images/newpic.gif"></a>
<a class="" href="#" target="_blank"><img src="data:images/1.jpg"></a>
<a class="" href="#" target="_blank"><img src="data:images/newpic.gif"></a>
<a class="" href="#" target="_blank"><img src="data:images/1.jpg"></a>
<a class="" href="#" target="_blank"><img src="data:images/newpic.gif"></a>
</div>
要实现的功能是banner图的轮播
大致思路如下:
1. 将这些图片存放在一个数组里,然后把第一个图片显示出来,其他的隐藏。
2. 定义一个函数,用来显示下一张图片,即本张图片隐藏,下张图片显示。如果是最后一张,本张隐藏,第一张显示,这样实现循环播放。
3. 每隔一段时间调用一次这个函数。
$(function () {
var pics = $(".banner a img");
var len = pics.length;
pics.eq(0).show();
for (var i = 1; i < len; i++) {
pics.eq(i).hide();
}
function turn(){
if (i < 5) {
if (pics.eq(i).not('hidden')) {
pics.eq(i).hide();
pics.eq(i + 1).show();
}
i++;
}
if (i == 5) {
pics.eq(5).hide();
pics.eq(0).show();
i = 0;
}
}
i = 0;
setInterval(turn, 2000);
});
这里边有几个知识点需要总结一下:
1. 选择数组中某个元素,使用 arr.eq(i) 的方式,其中 i 为索引。
2. 判断元素是否显示,使用 not 选择器,可直接用于元素上,pics.eq(i).not('hidden') 就是选择 pics 数组中索引值为 i 且没有隐藏的元素。
3. 在这里没有在 turn 函数里使用 for 循环来操作是因为每隔一段时间 turn 函数都要执行一次,而 turn 函数每执行一次实际上只需要改变一张图片,如果使用 for 循环的话,每次执行 turn 函数都要执行一次 for 循环,都要遍历所有的元素,并且很容易造成混乱,不容易形成思路。
4. 在这里通过最下边 i = 0; 在第一次执行之前将 i 置零,意思是从第一张图片开始,每次操作完之后,i++,直到最后一张图片的时候,再次将 i 置零,循环重新开始。
5. setInterval(turn,2000); 第一个参数是函数名称,不需要写括号,也不要加引号,第二个参数是间隔时间,这里应该是2000毫秒,也就是2秒,可以根据实际需要设定。
知识的积累是一个漫长的过程,实践和经验也需要时间来沉淀。
最新文章
- Log4j框架
- SQL 随记
- WKWebView _WebFilterIsActive returning: NO
- codeforces 496A. Minimum Difficulty 解题报告
- zipArchive
- 转】用Maven构建Mahout项目
- WSDL阅读方法
- Objective-C学习篇05—Foundation框架简介
- ETL中的数据增量抽取机制
- Apache &; WebDav 配置(二)
- nefu 899这也是裸的找
- codevs 2370 小机房的树(LCA)
- format 用法
- [hgoi#2019/2/17t1]million
- vue自学入门-2(vue创建项目)
- JS原生实现视频弹幕Demo(仿)
- git命令无法自动补全(sles11.3)
- 转:CSS定位属性详解
- Java DES 加解密(";DES/CBC/PKCS5Padding";)
- Docker(二):Dockerfile使用介绍
热门文章
- 嵌入式开发笔记 - U-Boot相关
- html,css所遇问题(一)
- Jersey(1.19.1) - Conditional GETs and Returning 304 (Not Modified) Responses
- jquery之css()改变字体大小,颜色,背景色
- fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏
- sql防注入式
- [Bootstrap]概述
- 关于CSS伪类选择器
- [GeekBand] STL与泛型编程(3)
- L009-oldboy-mysql-dba-lesson09