javascript实现轮播图

来源：互联网发布：模拟电路软件编辑：程序博客网时间：2024/05/16 06:25

1.首先是最简单的图片切换效果。
实现方法：将所有的图片放入一个数组中，几秒后切换为下一张。如果到了最后一张，切换为第一张显示。

<!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-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的第一张，实现了无缝轮播。

<!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-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图片。这样就实现了向左无缝轮播的效果。

 <!DOCTYPE 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 < 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>

向右无缝轮播
实现方法：同左无缝轮播只需改变速度和切换的条件即可。

 <!DOCTYPE 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>

按钮可以选择向左还是向右轮播，并且鼠标经过时，停止移动。鼠标移开，继续移动。

<!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-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<moveWidth)    {      picList.style.left="-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<moveWidth)    {      picList.style.left="-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>

0 0