原生态图片轮播

  1. var curIndex = 0;
  2. //时间间隔 单位毫秒
  3. var timeInterval = 5000;
  4. var arr = new Array();
  5. arr[0] = "Images/addimg/adv_meitu_1.jpg";
  6. arr[1] = "Images/addimg/adv_meitu_2.jpg";
  7. arr[2] = "Images/addimg/adv_meitu_3.jpg";
  8. arr[3] = "Images/addimg/adv_meitu_4.jpg";
  9. setInterval(changeImg, timeInterval);
  10. function changeImg() {
  11. var obj = document.getElementById("img");
  12. if (curIndex == arr.length - 1) {
  13. curIndex = 0;
  14. }
  15. else {
  16. curIndex += 1;
  17. }
  18. obj.src = arr[curIndex];
  19. }

来自为知笔记(Wiz)

时间: 2024-10-18 03:12:46

原生态图片轮播的相关文章

【JavaScript】原生态兼容IE6的图片轮播

<[Bootstrap]图片轮播组件Carousel>(点击打开链接)虽然做得很不错,但是由于只兼容到IE8,所以没有用的.其实原生态兼容IE6的图片轮播并没有想象中的那么难,网上的很多兼容IE6的图片轮播其实代码写得很糟糕的.首先复用性很差,根本就不知道怎么修改,然后加入了很多如同百叶窗这些可有可无的特效,把原本简短的代码弄得很差,最后,这些东西还直接用JavaScript创建组件来显示自己的Javascript学得有多么地强大,然后又不好好教别人怎么做,直接用一个JS写完整个网页个人觉得相

【AmazeUI】图片轮播组件

这个组件在IE上一直很火,其实现可以参考<[JavaScript]原生态兼容IE6的图片轮播>(点击打开链接),AmazeUI同样在移动端提供这样的组件. 其效果如下,这个结果要在谷歌.野狐禅等浏览器的手机端调试模式才能看到,在PC端会布局错乱. 用户可以自由滑动,点击下方的圆点,选择自己要浏览的图片,当鼠标悬停在图片上,其组件则不会继续轮播图片. 实现代码如下: <!--使用HTML5开发--> <!doctype html> <html class="

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

UISCrollView —— 图片轮播器封装实现(三)——(第三讲)

1.分析 利用xib布局,然后自定义一个UIView,解析xib,然后利用控制器传入数据,将其加载到控制器的view上展示即可 2. 程序结构 3. 代码具体实现 1>  xib文件 2>  创建类 XMGPageView,然后将其与xib文件关联,选中xib文件,然后设置下文中 " custom class " 为定义的类,让其来管理xib 1>    (如图,设置xib与类关联) 2>  XMGPageView.h 文件中,声明分页图片数组属性,及其一个快速

ionic 图片轮播问题

1.使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题: (注:使用的是angularjs.首先需要在,js文件中注入:$ionicSlideBoxDelegate) 一.有时候会出现图片无法加载出来.解决办法是: 在相应的controller文件增加 $ionicSlideBoxDelegate.update(); 二.轮播至最后一个不轮播的问题,解决的办法是: 在相应的controller文件增加 $ionicSlideBoxD

js图片轮播与索引变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

IOS 图片轮播实现原理 (三图)

IOS 图片轮播实现原理的一种 图片轮播所要实现的是在一个显示区域内通过滑动来展示不同的图片. 当图片较少时我们可以采用在滚动视图上添加很多张图片来实现. 但是如果图片数量较多时,一次性加载过多图片会浪费内存,影响性能. 因此我们要采取适当地方法来实现图片的轮播. 下面我们只是简单的介绍很多方法中的一种简单的实现原理. 一 二 三 四 五 六 七

面向对象编程---图片轮播

今天复习了一下面向对象编程,下面是我的效果图 看着这个图片你会觉得这没有什么,那么上代码: html部分: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 ul,ol,li{padding:0;margin:0;li

ionic 图片轮播ion-slide-box问题

1.使用ion-slide可以实现图片轮播,但是如果在html中仅仅增加ion-slide是远远不够的,会出现两个问题: (注:使用的是angularjs.首先需要在,js文件中注入:$ionicSlideBoxDelegate) 一.有时候会出现图片无法加载出来.解决办法是: 在相应的controller文件增加 $ionicSlideBoxDelegate.update(); 二.轮播至最后一个不轮播的问题,解决的办法是: 在相应的controller文件增加 $ionicSlideBoxD