JS例子（大图轮播）

<style type="text/css">
*{ margin:0px auto;
   padding:0px;
   }
#wai{ width:1000px;
      height:500px;
	  }
</style>

<body>
   <div id="wai">
   <img class="tu" src="1.jpg"  width="1000" height="500"/>
   <img class="tu" src="2.jpg"  width="1000" height="500" style="display:none"/>
   <img class="tu" src="3.jpg"  width="1000" height="500" style="display:none"/>
   <img class="tu" src="4.jpg"  width="1000" height="500" style="display:none"/>
   <img class="tu" src="5.jpg"  width="1000" height="500" style="display:none"/>
   <img class="tu" src="6.jpg"  width="1000" height="500" style="display:none"/>
   <img class="tu" src="7.jpg"  width="1000" height="500" style="display:none"/>
   <img class="tu" src="8.jpg"  width="1000" height="500" style="display:none"/>
   <img class="tu" src="9.jpg"  width="1000" height="500" style="display:none"/>
   </div>

</body>

</body>
<script type="text/javascript">
var index = 0;
var tu = document.getElementsByClassName("tu");
huan();

function huan(){

			for( var i=0;i<tu.length;i++){
				 tu[i].style.display="none";
				}
				tu[index].style.display="block";

		 if(index >= tu.length-1)
		    {index=0;
	      }else{
			  index++;
			  }

		window.setTimeout("huan()",2000);
	}

</script>

时间： 2024-10-15 08:12:55

JS例子（大图轮播）的相关文章

JS对于导航栏、下拉菜单以及选项卡的切换操作、大图轮播（主要练习对于样式表的操作）

1.导航拦以及下拉菜单 css样式表代码 .div1 { width: 100px; height: 30px; background-color: red; float: left; margin-right: 10px; } .div1-div { width: 100%; height: 400px; background-color: green; margin-top: 30px; display: none; } JS脚本代码 <!DOCTYPE html> <html xm

大图轮播

之前有整理过用js做的大图轮播,相对来说看起来比较繁琐,今天来写一些用bootstrap做的大图轮播,看起来非常简单: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 简单的轮播(Carousel)插件</title> <link rel="stylesheet" href="h

bootstrap大图轮播手机端不能手指滑动解决办法

网上看了很多解决办法,几乎本质都是一样的,都是引入一个滑动的js插件,加入一段js代码,即可生效,但是我试了hammer.js 和 touchSwipe.js 都不生效,也找不到原因是什么,目前在网上就找到 toucher.js 可以实现,贴到博客,留作备用: 1 <script> 2 $(function(){ 3 var myTouch = util.toucher(document.getElementById('carousel-index'));

[DBW]大图轮播，可通过两种方法实现

通过在div中加入表格,实现大图轮播,代码如下: 整体的思路: 1.在div中嵌入表格,设置div的宽和高,设置成图片大小,确定其位置,将图片插入表格,超出div部分隐藏 2.在js中定义一个变量接受left的值,并赋值为0px,即初始值 3设置函数 function a() {在函数中将接收到的值强制转化为数字, 然后在值中减掉一张图片的宽度, } 3.延迟执行,设置需要延迟的代码及延迟的时间,最后回到表格中,加入一个调用方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE html><html>

Bootstrap的js插件之轮播(carousel)

轮播请查看以下示例,基本已经涵盖最常用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>js插件_轮播</titl

JS+css3焦点轮播图PC端

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js原生web轮播图</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 list-style: none; 11 -moz-user-select: none;/*文字不可选

简单易懂实用的大图轮播

<head> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>大图轮播</title> <style type="text/css"> * { margin: 0px; padding: 0px; } #container { width: 500px; h

原生js重写《锋利的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-

自定义View之无限大图轮播ShufBanner

无限大图轮播–ShufBanner 轮播图作为一个app的宣传,展示等,往往占据着一个很重要的地位,大部分app都将其放在首页.那么通常的做法都是使用ViewPager,使其能够作用滑动,而无限轮播无外乎两种做法. - 第一种是将ViewPager的size定义为无限大,定义其初始显示的位置为中间,这样的话因为左或者右都有很多的页面,所以造成了一种可以无限轮播的假象.同时因为ViewPager的特性,其只是加载当前显示page以及左和右的三个页面,不用担心OOM. - 第二种是,将ViewPag