原生js轮播图

最新推荐文章于 2023-05-22 19:10:49 发布

nidekunji

最新推荐文章于 2023-05-22 19:10:49 发布

阅读量282

点赞数 2

1.引言傻瓜教程

2.效果图

3.功能分析

（1）主要讲js 首先是图片自动播放。

（2）鼠标经过数字的时候切换对应的图片

（3）点击左右按钮切换图片

4.原理和布局。一个装图片的容器ul 一个显示数字的容器左右按钮

 <div class="wrap" id='wrap'>
    <ul id="pic">
      <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>    
    </ul>
    <ol id="list">
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
    <img class="prev" id="prev" src="img/prev.jpg">
    <img class="next" id="next" src="img/next.jpg" />
  </div>

5.定义简单的css代码，主要了解overflow:hidden属性，设置一个定时器，每隔两秒当前的图片往上移动170px 超出容器高宽自动隐藏

 *{margin:0;
    padding:0;
    list-style:none;}
  .wrap{height:170px;
        width:490px;
        margin:60px auto;
        overflow: hidden;
        position: relative;
        margin:100px auto;}
  .wrap ul{position:absolute;} 
  .wrap ul li{height:170px;}
  .wrap ol{position:absolute;
           right:5px;
           bottom:10px;}
  .wrap ol li{height:20px; width: 20px;
              background:#ccc;
              border:solid 1px #666;
              margin-left:5px;
              color:#000;
              float:left;
              line-height:center;
              text-align:center;
              cursor:pointer;}
  .wrap ol .on{background:#E97305;
               color:#fff;}
   .wrap .prev{position: absolute; left: 0px;  bottom: 65px;}
  .wrap .next{position: absolute; right: 0px;bottom: 65px;}

5.js部分

（1）首先实现图片自动轮播。

第一步获取要操作的容器，设置一些全局变量定时器timer，和索引值index

第二步定义自动播放函数autoPlay()里面设置一个定时器timer=setInterval(function(){},2000);//在函数里面开始写切换图片的函数

困了睡觉了哈哈哈自己看注释

<script type="text/javascript">
  window.οnlοad=function(){
    var wrap=document.getElementById('wrap'),//最大的div
        pic=document.getElementById('pic'),//装图片的ul
        list=document.getElementById('list').getElementsByTagName('li'),//下面的数字
        next=document.getElementById('next'),//左右按钮
        prev=document.getElementById('prev'),
        index=0,
        timer=null;


      // 定义自动播放函数
       function autoplay()
       {
        timer = setInterval(function()
        {
            index++;
            if(index>=list.length)
            {
                index=0;
            }
            switchpic(index);
        },2000)   
       }
       
       //调用自动播放函数
       autoplay();
       
      // 定义图片切换函数
       function switchpic(curIndex)
       {
  pic.style.marginTop = -curIndex*170 + 'px';    
           for(var i=0;i<list.length;i++)
           {
               list[i].className = "";
           }
           list[curIndex].className = "on";
           index=curIndex;
       }
     // 鼠标划过整个容器时停止自动播放
    wrap.onmouseover = function()
    {
        clearInterval(timer);
    }
     // 鼠标离开整个容器时继续播放至下一张
    wrap.οnmοuseοut=autoplay;
    
    // 遍历所有数字导航实现划过切换至对应的图片
     for(var j=0;j<list.length;j++)
     {
        list[j].id=j;
        list[j].onmouseover = function()
        {
            switchpic(this.id);
        }
     }
     
     
    next.onclick = function()
        {
        	index++;
        	if(index>=list.length){index=0;}
            switchpic(index);
        }
     	
     prev.onclick = function()
        {
        	
        	index--;
        	if(index<0){index=4;}
           switchpic(index);
        }
   }


  </script>

最后附上完整代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Document</title>
	<style>
  *{margin:0;
    padding:0;
    list-style:none;}
  .wrap{height:170px;
        width:490px;
        margin:60px auto;
        overflow: hidden;
        position: relative;
        margin:100px auto;}
  .wrap ul{position:absolute;} 
  .wrap ul li{height:170px;}
  .wrap ol{position:absolute;
           right:5px;
           bottom:10px;}
  .wrap ol li{height:20px; width: 20px;
              background:#ccc;
              border:solid 1px #666;
              margin-left:5px;
              color:#000;
              float:left;
              line-height:center;
              text-align:center;
              cursor:pointer;}
  .wrap ol .on{background:#E97305;
               color:#fff;}
   .wrap .prev{position: absolute; left: 0px;  bottom: 65px;}
  .wrap .next{position: absolute; right: 0px;bottom: 65px;}
  </style>
  <script type="text/javascript">
  window.οnlοad=function(){
    var wrap=document.getElementById('wrap'),
        pic=document.getElementById('pic'),
        list=document.getElementById('list').getElementsByTagName('li'),
        next=document.getElementById('next'),
        prev=document.getElementById('prev'),
        index=0,
        timer=null;

      // 定义自动播放函数
       function autoplay()
       {
        timer = setInterval(function()
        {
            index++;
            if(index>=list.length)
            {
                index=0;
            }
            switchpic(index);
        },2000)   
       }
       
       //调用自动播放函数
       autoplay();
       
      // 定义图片切换函数
       function switchpic(curIndex)
       {
  pic.style.marginTop = -curIndex*170 + 'px';    
           for(var i=0;i<list.length;i++)
           {
               list[i].className = "";
           }
           list[curIndex].className = "on";
           index=curIndex;
       }
     // 鼠标划过整个容器时停止自动播放
    wrap.onmouseover = function()
    {
        clearInterval(timer);
    }
     // 鼠标离开整个容器时继续播放至下一张
    wrap.οnmοuseοut=autoplay;
    
    // 遍历所有数字导航实现划过切换至对应的图片
     for(var j=0;j<list.length;j++)
     {
        list[j].id=j;
        list[j].onmouseover = function()
        {
            switchpic(this.id);
        }
     }
     
     
    next.onclick = function()
        {
        	index++;
        	if(index>=list.length){index=0;}
            switchpic(index);
        }
     	
     prev.onclick = function()
        {
        	
        	index--;
        	if(index<0){index=4;}
           switchpic(index);
        }
   }

  </script>	
</head>
<body>
  <div class="wrap" id='wrap'>
    <ul id="pic">
      <li><img src="http://img.mukewang.com/54111cd9000174cd04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111dac000118af04900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d9c0001998204900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d8a0001f41704900170.jpg" alt=""></li>
      <li><img src="http://img.mukewang.com/54111d7d00018ba604900170.jpg" alt=""></li>    
    </ul>
    <ol id="list">
      <li class="on">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ol>
    <img class="prev" id="prev" src="img/prev.jpg">
    <img class="next" id="next" src="img/next.jpg" />
  </div>
</body>
</html>