`
javatim
  • 浏览: 70170 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

用setInterval来做图片切换最简单源码

阅读更多
<script language =javascript >
var curIndex=0;
//时间间隔 单位毫秒 1000毫秒=1秒
var timeInterval=3000;
var arr=new Array();
arr[0]="images/01.jpg";
arr[1]="images/02.jpg";
arr[2]="images/03.jpg";
arr[3]="images/04.jpg";
arr[4]="images/05.jpg";
arr[5]="images/06.jpg";
arr[6]="images/07.jpg";
setInterval(changeImg,timeInterval);
function changeImg()
{
    var obj=document.getElementById("pic");
    if (curIndex==arr.length-1)
    {
        curIndex=0;
    }
    else
    {
        curIndex+=1;
    }
    obj.src=arr[curIndex];
}
</script>

<img id=pic src ="images/01.jpg" border =0 />
分享到:
评论

相关推荐

    图片切换特效源码

    掌握这些知识点后,开发者不仅可以使用这个源码包快速创建图片切换效果,还能在此基础上进行二次开发,根据需求定制更复杂、个性化的图片展示功能。对于前端开发者来说,理解和应用这些技术是提升用户体验、增强网站...

    一个基jQuery实现最简单的图片切换特效源码例子

    以上就是基于jQuery实现最简单图片切换特效的基本步骤和相关知识点。实践中,可以根据项目需求进行调整和优化,以满足不同的设计风格和功能要求。在实际开发中,不断学习和探索jQuery以及其他前端技术,可以提升网页...

    js做的新闻图片切换效果

    【标题】"js做的新闻图片切换效果"涉及的是JavaScript编程技术在网页动态效果中的应用,尤其是针对新闻或网站中常见的图片轮播功能。JavaScript是一种轻量级的客户端脚本语言,广泛用于网页交互和增强用户体验。在这...

    js 简单图片切换

    【标题】"JS简单图片切换"是一个常见的网页交互功能,常用于展示一组图片并实现动态切换,提升用户体验。在Web开发中,JavaScript是实现此类功能的主要脚本语言。本文将探讨如何利用JavaScript来创建一个简单的图片...

    JQ 最简单的切换图兼容IE6

    标题“JQ 最简单的切换图兼容IE6”指的是使用jQuery库实现一个图片切换功能,并且这个功能能够在老旧的Internet Explorer 6浏览器上正常工作。在Web开发中,尤其是在早期,兼容旧版本的浏览器,尤其是IE6,是一个...

    jQuery实现的迅雷首页全屏图片切换幻灯焦点图特效源码.zip

    综上所述,这个"jQuery实现的迅雷首页全屏图片切换幻灯焦点图特效源码"是一个结合了jQuery选择器、事件处理、动画效果、全屏布局以及图片加载策略等多个方面技术的综合性示例,对于学习和提升网页动态效果的开发技能...

    jQuery实现的猎豹官网宽屏通栏焦点图切换效果源码.zip

    }, 5000)`会每5秒调用一次`switchImage()`函数,执行图片切换。 5. **轮播逻辑**:焦点图的切换需要考虑图片的顺序和循环播放。当到达最后一张图片后,需要返回到第一张。这通常涉及数组索引的处理和边界条件判断...

    jQuery实现响应式图片无限轮播特效源码.zip

    - 添加向前和向后按钮,通过触发事件来手动切换图片。 - 实现无限循环,当到达最后一张图片时,无缝连接到第一张,反之亦然。 4. jQuery动画: jQuery提供了`.fadeIn()`和`.fadeOut()`等方法,可以优雅地实现...

    js实现的带左右按钮的多款幻灯片样式可自动切换的焦点图动画特效源码.zip

    8. **模块化和封装**:优秀的代码组织方式可能会将功能拆分成不同的模块,如图片切换逻辑、按钮事件处理等,每个模块都有明确的职责,便于维护和扩展。 9. **浏览器兼容性**:考虑到不同浏览器对JavaScript和CSS的...

    jquery 图片自动切换

    我们可以使用`setInterval`函数每隔一段时间自动切换图片,同时结合`fadeIn`和`fadeOut`方法来实现平滑过渡: ```javascript $(document).ready(function() { var slideIndex = 0; var slides = $('.slider ul li...

    html实现图片轮播(含代码和注释)

    我们使用变量currentSlide来存储当前显示的图片索引,并使用setInterval函数设置了一个定时器,每隔3000毫秒(3秒)切换到下一张图片。 当切换到下一张图片时,我们首先将当前显示的图片隐藏(通过设置display属性...

    jquery实现的可多图且不限图片数量的焦点图自动轮播特效源码.zip

    5. **定时器**:为了实现自动轮播,项目可能使用了JavaScript的`setInterval()`函数来定期执行切换图片的函数。 6. **无限循环**:为了实现无限轮播,开发者可能采用了某种技巧,如复制第一个或最后一个元素到轮播...

    图片轮换效果

    标签中的“源码”提示我们关注实现这个功能的具体代码,这可能涉及到JavaScript的数组操作、定时器(`setInterval`或`setTimeout`)、DOM操作(如`style.display`)以及事件监听等。 至于“工具”,可能是指辅助...

    JavaScript项目源码基础+进阶.zip

    在JavaScript中,你需要理解数组、循环、条件判断等基础知识来实现图片的切换,同时还要掌握CSS样式和DOM操作来控制图片的显示效果。 数字机游戏可能是一个简单的数字猜谜游戏,例如"24点"或"猜数字",这涉及到...

    jQuery实现的酷我音乐首页焦点图特效源码.zip

    以下是一个简单的示例,实现定时切换图片的效果: ```javascript $(document).ready(function() { var index = 0; var images = $('#focus ul li').length; function switchImage() { $('#focus ul li').eq...

    JS仿天猫banner效果 图片轮播

    4. **处理边界**:当最后一张图片切换后,需要回到第一张图片,这里需要用到JavaScript的数组索引操作。 在实际编码过程中,我们可能需要创建一个JavaScript对象来存储轮播图片的信息,包括图片URL、索引等。然后,...

    android 跑马灯图片展示+10种切换特效

    为了增强用户体验,还可以监听`ViewPaper`的滚动事件,例如在图片切换时执行特定的操作: ```java viewPaper.setOnPageChangeListener(new ViewPaper.OnPageChangeListener() { @Override public void ...

    javascript实现图片左右滚动效果【可自动滚动,有左右按钮】

    在进行知识点的详细说明之前,先对给定文件的...总结来说,给定的文件内容涵盖了使用JavaScript来实现一个简单但功能完备的图片轮播组件的整个过程。理解并掌握这些知识点,对于进行网页开发和前端设计有着重要的意义。

    jQuery实现的支持鼠标拖拽滑动的焦点图特效源码.zip

    例如,可以使用`setInterval`来定时切换图片,使用CSS3的`transition`属性来创建平滑的过渡效果。 总的来说,利用jQuery实现的鼠标拖拽滑动焦点图特效,不仅可以提供互动性的用户体验,还能增强网站的视觉吸引力。...

    jQuery 图片向左滚动代码

    // 图片切换间隔时间 function slideImages() { $('#image-slider').stop().animate({left: '-=' + sliderWidth}, scrollDuration); } setInterval(function() { slideImages(); if ($('#image-slider')....

Global site tag (gtag.js) - Google Analytics