javascript实现轮播图
1.首先是最简单的图片切换效果。
实现方法：将所有的图片放入一个数组中，几秒后切换为下一张。如果到了最后一张，切换为第一张显示。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>轮播图数组的简单实现title>
<script type="text/javascript">
var num = 0;
var time= 1000;/*切换的时间*/
var arr=new Array();
arr[0]="imgs/1.jpg";
arr[1]="imgs/2.jpg";
arr[2]="imgs/3.jpg";
setInterval(showPic,time);
function showPic() {
var imgs = document.getElementById("pic");
if (num == arr.length-1) {
num = 0; /*如果是最后一张，显示第一张*/
} else {
num= num+1; /*如果没有到最后一张，显示下一张*/
}
imgs.src = arr[num];
}
script>
head>
<body>
<img id= "pic" src="imgs/1.jpg" />
body>
html>
- 实现自下向上的无缝轮播效果。
实现方法：定义了两个div（div1，div2），放入相同的图片。自下向上滚动，当滚动到第一个div1的底部时，切换到第一个div1顶部的图片。由于div2和div1内容相同，所以在显示div2的第一张时切换到div1的第一张，实现了无缝轮播。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>轮播图无缝实现title>
head>
<body>
<div id="colee" style="overflow:hidden;height:200px;width:300px;">
<div id="colee1">
<p><img src="imgs/1.jpg">p>
<p><img src="imgs/2.jpg">p>
<p><img src="imgs/3.jpg">p>
<p><img src="imgs/4.jpg">p>
div>
<div id="colee2">div>
div>
<style type="text/css">
#colee p{
display:inline;
}
#colee1 #colee2{
display:inline;
}
style>
<script>
var speed=30;
var colee2=document.getElementById("colee2");
var colee1=document.getElementById("colee1");
var colee=document.getElementById("colee");
colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2
function Marquee1(){
//当滚动至colee1与colee2交界时
//当滚动至colee1与colee2交界时
if(colee2.offsetTop-colee.scrollTop<=0){
colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端
}else{
colee.scrollTop++
}
}
var MyMar1=setInterval(Marquee1,speed)//设置定时器
//鼠标移上时清除定时器达到滚动停止的目的
colee.onmouseover=function() {
clearInterval(MyMar1)}
//鼠标移开时重设定时器
colee.onmouseout=function(){
MyMar1=setInterval(Marquee1,speed)}
script>- 向左无缝轮播
实现方法：图片的顺序为 3 1 2 3 1，向左轮播初始状态下显示第二张图片，即编号是1 的图片，然后开始移动。当移动到第四张图片时（即编号为3）的图片时，接着显示的是最后一张图片1。即在移动到第二个1图片时，跳到第一个1图片。这样就实现了向左无缝轮播的效果。
<html>
<head>
<meta charset="gb2312">
<title>向左轮播图title>
<style>
* {
margin: 0px;
padding: 0px;
}
#container{
width: 300px;
height: 200px;
margin: 10px auto;
overflow: hidden;
position: relative;
}
#list {
list-style-type: none;
width: 10000px;
overflow: hidden;
position: absolute;
left: -300px;
}
li {
float: left;
}
li,img {
width: 300px;
height: 200px;
}
style>
<script>
window.onload=function() {
var list = document.getElementById("list");
var liList = document.getElementsByTagName("li"); //所有图片
var len = liList.length; //个数
var liwidth = liList[0].clientWidth; //每张图片的宽度
var totalWidth = (len - 1) * liwidth * (-1); //图片总宽度
var varyLeft = list.offsetLeft; //ul初始left值
var speed = 3; //每次移动距离
function move() {
if (varyLeft < totalWidth) {
//左移完最后一张后，瞬间切换到第二张a，第二张a和最后一张a'相同
list.style.left = "-300px";
varyLeft = -300;
}
varyLeft -= speed;//每次移动
list.style.left = varyLeft + "px";
}
var timer = setInterval(move, 30);//每个40毫秒左移一次
}
script>
head>
<body>
<div id="container">
<ul id="list">
<li><img src="imgs/3.jpg" />li>
<li><img src="imgs/1.jpg"/> li>
<li><img src="imgs/2.jpg"/>li>
<li><img src="imgs/3.jpg" />li>
<li><img src="imgs/1.jpg"/> li>
ul>
div>
body>
html>- 向右无缝轮播
实现方法：同左无缝轮播 只需改变速度和切换的条件即可。
<html>
<head>
<meta charset="gb2312">
<title>向右轮播图title>
<style>
* {
margin: 0px;
padding: 0px;
}
#container{
width: 300px;
height: 200px;
margin: 10px auto;
overflow: hidden;
position: relative;
}
#list {
list-style-type: none;
width: 10000px;
overflow: hidden;
position: absolute;
left: -300px;
}
li {
float: left;
}
li,img {
width: 300px;
height: 200px;
}
style>
<script>
window.onload=function() {
var list = document.getElementById("list");
var liList = document.getElementsByTagName("li"); //所有图片
var len = liList.length; //个数
var liwidth = liList[0].clientWidth; //每张图片的宽度
var totalWidth = (len - 1) * liwidth * (-1); //图片总宽度
var varyLeft = list.offsetLeft; //ul初始left值
var speed = -3; //每次移动距离
function move() {
if (varyLeft>-300) {
//左移完最后一张后，瞬间切换到第二张a，第二张a和最后一张a'相同
list.style.left = "-1200px";
varyLeft = -1200;
}
varyLeft -= speed;//每次移动
list.style.left = varyLeft + "px";
}
var timer = setInterval(move, 30);//每个40毫秒左移一次
}
script>
head>
<body>
<div id="container">
<ul id="list">
<li><img src="imgs/3.jpg" />li>
<li><img src="imgs/1.jpg"/> li>
<li><img src="imgs/2.jpg"/>li>
<li><img src="imgs/3.jpg" />li>
<li><img src="imgs/1.jpg"/> li>
ul>
div>
body>
html>- 按钮可以选择向左还是向右轮播，并且鼠标经过时，停止移动。鼠标移开，继续移动。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>实现图片的左右无缝滚动title>
<style type="text/css">
/*清除默认的格式*/
*{
margin:0;
padding:0;
}
/*设置水印居中，大小，溢出隐藏*/
#mainbox{
width:300px;
height:200px;
overflow:hidden;
position:relative;
margin:10px auto;
}
#piclist{
list-style:none;
width:10000px;
height:200px;
overflow:hidden;
position:absolute;
left:-300px;
}
/*浮动实现一行显示*/
li{
float:left;
}
li,img{
width:300px;
height:200px;
}
/*按钮控制轮播的方向*/
#anniu{
width:120px;
position:relative;
margin:0 auto;
}
/*按钮的样式*/
input{
width:50px;
height:20px;
background-color:#99FF66;
}
style>
<script>
window.onload=function(){
var picList=document.getElementById("piclist");//获取列表
var liList=document.getElementsByTagName("li");//获取图片
var picWidth=liList[0].clientWidth;//每张图片的宽度
var len=liList.length;//图片的个数
var moveWidth=(len-1)*picWidth*(-1);//移动的距离
var moveLeft=picList.offsetLeft;//初始状态下距离
var speed=3;//移动的速度
var btn=document.getElementsByTagName("input");//按钮
btn[0].onclick = function(){
//按钮控制移动的方向
speed = 3;
};
btn[1].onclick = function(){
speed = -3;
};
timeer=setInterval(function (){
//设置移动
if(moveLeft"-300px" ; //向左移动，图片顺序为3` 1 2 3 1` 当移动到最后一张1`时，跳转到第二张1
moveLeft=-300;
}
if(moveLeft>-300){
picList.style.left="-1200px";//向右移动，当移动到第一张3`时，跳转到第四张3
moveLeft=-1200;
}
moveLeft=moveLeft-speed; //距离的改变
picList.style.left=moveLeft+"px";
},30);
picList.onmouseover = function(){
//当有鼠标经过时，停止移动
clearInterval(timeer);
};
picList.onmouseout = function(){
//鼠标移开，继续移动
timeer=setInterval(function (){
if(moveLeft"-300px";
moveLeft=-300;
}
if(moveLeft>-300){
picList.style.left="-1200px";
moveLeft=-1200;
}
moveLeft=moveLeft-speed;
picList.style.left=moveLeft+"px";
},30);
};
}
script>
head>
<body>
<div id="mainbox">
<ul id="piclist">
<li><img src="imgs/3.jpg" />li>
<li><img src="imgs/1.jpg" />li>
<li><img src="imgs/2.jpg" />li>
<li><img src="imgs/3.jpg" />li>
<li><img src="imgs/1.jpg" />li>
ul>
div>
<div id="anniu">
<form>
<input type="button" value="left"/>
<input type="button" value="right"/>
form>
div>
body>
html>