本次介绍用更改图片地址的方式来实现轮播图
1.一维数组变量更改地址实现轮播图
<!doctype html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <style> #pic{ margin: 50px auto; height: 400px; 800px; } </style> <script type="text/javascript"> //声明一个数组变量存放图片地址 var arr=["picture/01.jpg","picture/02.jpg","picture/03.jpg","picture/04.jpg","picture/05.jpg","picture/06.jpg","picture/07.jpg","picture/08.jpg","picture/09.jpg"] //声明一个变量n var n=0; //每次点击时调用的函数 function changeImg(curr){ //获取到点击时的value值，代表要跳转的第几张图片 n=curr.value;//3代表第三张 arr[2]代表地址 var v=curr.value-1;//代表数组下标 //将图片地址更改为数组中的第n个元素来实现更改图片 document.getElementById("img_").src=arr[v]; } //上一张 function up(){ n--;//2 代表第二张 arr[1]; //点击后判断 若n=0，将图片地址改为最后一张 if(n==0){ n=arr.length-1; }else document.getElementById('img_').src=arr[n-1]; } function down(){ n++; //若到了最后一张，将图片地址改为第一张 if(n==arr.length+1){ n=0; } document.getElementById('img_').src=arr[n]; } function remove(){ clearInterval(l); } function cancle(){ setInterval("down()",1000); } var l=0; window.onload=function(){ //设置定时器，每隔多少秒调用下一张的函数，实现图片的自动播放 l=setInterval("down()",1000);//每隔一秒 //当鼠标移入时 调用remove函数，清除定时器，图片不再轮播 document.getElementById('img_').addEventListener("mouseover",remove); //当鼠标移出，重新设置定时器，每隔多少秒调用下一张的函数，重新轮播 document.getElementById('img_').addEventListener("mouseout",cancle); } </script> </head> <body> <div id="pic"> <img src="picture/01.jpg" alt="" id="img_"><br> <input type="button" value="上一张" onClick="up()"> <input type="button" value="1" onClick="changeImg(this)"> <input type="button" value="2" onClick="changeImg(this)"> <input type="button" value="3" onClick="changeImg(this)"> <input type="button" value="4" onClick="changeImg(this)"> <input type="button" value="5" onClick="changeImg(this)"> <input type="button" value="6" onClick="changeImg(this)"> <input type="button" value="7" onClick="changeImg(this)"> <input type="button" value="8" onClick="changeImg(this)"> <input type="button" value="9" onClick="changeImg(this)"> <input type="button" value="下一张" onClick="down()"> </div> </body> </html>
2.二维数组实现多变量的同时轮播
var n=0; var p=0; var oTcartxt=document.getElementById('car-txt-num'); //声明一个二维数组，二维数组可以理解为数组嵌套数组，将一维数组中的每个元素换成一个个一维数组 var arrCarouselpic=[ ["topPic/01.jpg","梧桐盛开的街角，那间悠闲的小店，都充满了橘色的记忆，暖湿的气流和美酒的苦涩","穷游锦囊|意大利","丽江"], ["topPic/02.jpg","远处的冰山，极昼的光芒，三色堇忧伤","穷游锦囊|冰岛","大理"], ["topPic/03.jpg","文明古国，尼罗河的忧伤，埃及神秘之旅","穷游锦囊|埃及","香格里拉"], ["topPic/04.jpg","世界这么大，我想跟你一起去看看","穷游锦囊|加拿大","西双版纳"], ["topPic/05.jpg","炊烟袅袅升起而我在等你，秋色被打捞起晕开了结局","穷游锦囊|科兹沃尔德","昆明"]]; //向前滚动，变量n自加 function fTopcarousel(){ n++; //判断n是否到了最后一张 if(n==arrCarouselpic.length){ //如果到了就从头开始 n=0; } //更改图片地址 document.getElementById('carousel-Pic').src=arrCarouselpic[n][0];//第n个数组中的第一个元素，即图片地址 oTcartxt.innerHTML=n+1; oTcattxtword.innerHTML=arrCarouselpic[n][1];//第n个数组中的第2个元素 oTcartxtcountry.innerHTML=arrCarouselpic[n][2]; sPlaceho.setAttribute("placeholder",arrCarouselpic[n][3]); } function fTback(){ if(n==0){ n=arrCarouselpic.length; } n--; document.getElementById('carousel-Pic').src=arrCarouselpic[n][0]; oTcartxt.innerHTML=n+1; oTcattxtword.innerHTML=arrCarouselpic[n][1]; oTcartxtcountry.innerHTML=arrCarouselpic[n][2]; sPlaceho.setAttribute("placeholder",arrCarouselpic[n][3]); } //设置定时器，每隔n秒调用下一页函数 //鼠标移入清除，移出重新设置定时器 function cancel(){ clearInterval(timer); } function start(){ timer=setInterval("fTopcarousel()",3000); }
效果：
搜索框中的地名和右下角的数字和文字都随着图片一起滚动