javascript实现轮播图

最新推荐文章于 2024-07-16 22:34:38 发布

刘小妞

最新推荐文章于 2024-07-16 22:34:38 发布

阅读量781

点赞数 2

分类专栏： JavaScript 文章标签： javascript html css-图片轮播

本文链接：https://blog.csdn.net/liuwengai/article/details/50974374

版权

JavaScript 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

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>