今天来介绍一下我前两天写一个小任务的时候遇到的一些问题,如果能够有所帮助或者启发,那将是我的荣幸。

<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秒,可以根据实际需要设定。

知识的积累是一个漫长的过程,实践和经验也需要时间来沉淀。

首页banner焦点图自动轮播效果的更多相关文章

  1. 西山居首页jQuery焦点图代码

    西山居首页jQuery焦点图代码是一款带文字描述,左右箭头,索引按钮,自动轮播切换的jQuery特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div style ...

  2. 一款仿PBA官网首页jQuery焦点图的切换特效

    一款仿PBA官网首页jQuery焦点图的切换特效,非常的简单大方, 在对浏览器兼容性的方面做了不少的功夫.IE6也勉强能过去. 还是一款全屏的焦点图切换特效.大气而清新.很适合简介大方的网站. 下图还 ...

  3. 天猫京东app中常见的上下滚动轮播效果如何实现?

    前段时间,公司安排我制作一个上下滚动轮播效果,类似于我们在天猫京东app中常见的这样: 哇kao!这个我完全不会呀??? 幸好,前几天一个朋友在朋友圈分享了一篇推文.瞬间引领我走出了迷茫,这个教程特别 ...

  4. js 滚轮事件 滚轮焦点图(轮播图)

    利用滚轮,切换轮播图.附带mousewheel插件以及原生js写法:   <!doctype html> <html> <head> <meta charse ...

  5. Jquery制作--焦点图左右轮播

    公司项目经常用到轮播焦点图,于是自己写了一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型.改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js ...

  6. 用jquery写出图片自动轮播效果

    相关代码如下,只要把代码粘贴进编辑器,修改图片路径,即可看到效果. 1.html部分 <body>   <ul class="banner">   < ...

  7. jquery特效(4)—轮播图②(定时自动轮播)

    周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...

  8. Jquery制作--焦点图淡出淡入

    之前写了一个焦点图左右轮播的,感觉淡出淡入用得也比较多,就干脆一起放上来啦.这个容器用了百分比宽度,图片始终保持居中处理,定宽或者自适应宽度都是可以的. 兼容到IE6+以上浏览器,有淡出淡入速度和切换 ...

  9. JS实现焦点图轮播效果

    大家平时逛淘宝网的时候,在首页就能看到焦点图轮播的效果,就是这个样子的: PS:想起每每打开淘宝,总会被这个玩意先夺眼球,偶尔还去点进去溜溜,幸好我定力好,总能控制住自己的购买欲望,为自己不用剁手感到 ...

随机推荐

  1. 【TOMCAT】Tomcat gzip压缩传输数据

    概述 由于我们项目的三维模型文件非常大,为了提高传输速度,在服务端对其做zip压缩处理非常有必要,能够极大的提高传输速度. 配置 首先需要修改web.xml中请求的数据文件的mime类型的mappin ...

  2. Unity User Group 北京站图文报道:《Unity3D VR游戏与应用开发》

    很高兴,能有机会回报Unity技术社区:我和雨松MOMO担任UUG北京站的负责人, 组织Unity技术交流和分享活动. 本次北京UUG活动场地–微软大厦 成功的UUG离不开默默无闻的付出:提前2小时到 ...

  3. 动态图片加到UIImageView中

    //1.添加一个.gif类型的动态的图片,用到URLForResource方法,gif是图片的格式,FlagZombie是图片的名字 @implementation ViewController- ( ...

  4. (转)使用Amoeba 实现MySQL DB 读写分离

    Amoeba(变形虫)项目是一个开源框架,于2008年开始发布一款 Amoeba for Mysql软件: 这个软件致力于MySQL的分布式数据库前端代理层,它主要在应用层访问MySQL的时候充当SQ ...

  5. jQuery学习一:jQuery中的ready和load事件

    //ready事件 $(document).ready(function(){ 代码........ }); //ready事件简写: $(function(){ 代码........ }); //l ...

  6. iOS开发基础之ivars(实例变量)与@property(属性)

    Objective-C带来了一个重大改进就是Non-fragile ivar.使得i一个类可以随意增加实例变量,不必对子类重新编译.对框架开发者(如苹果)有重大意义. 最新的编译器支持@propert ...

  7. Layout.xml中控件的ID命名方式

    控件 缩写 LayoutView lv RelativeView rv TextView tv Button btn ImageButton imgBtn ImageView mgView 或则 iv ...

  8. xamarin.ios 豆瓣电台视频教程

    视频中提到的网址: http://www.sufeinet.com/thread-655-1-1.html https://github.com/akfish/fm-terminal/blob/dev ...

  9. kali使用随笔

    1.kali 默认禁用网络服务,显示设备未托管.需要在/etc/NetworkManager/NetworkManager.conf将managed=false修改为true,重启电脑. 2.自己利用 ...

  10. sbt的安装设置

    文章转载自http://my.oschina.net/u/915967/blog/146746 本文主要是windows平台的安装,linux环境操作类似. 首先到http://www.scala-s ...