JavaScript基础10图片轮播效果的实现

最新推荐文章于 2019-11-26 10:48:51 发布

强仔fight

最新推荐文章于 2019-11-26 10:48:51 发布

阅读量150

点赞数

分类专栏： JavaScript基础

本文链接：https://blog.csdn.net/qq_35076836/article/details/87621009

版权

JavaScript基础专栏收录该内容

8 篇文章 1 订阅

订阅专栏

轮播效果的实现

页面样式部分
 <style type="text/css">
     #box{ 
          width:600px;
          height:400px;
          margin:0 auto;        //设置居中
          positon:relative;
      }
     .turn{                                    //设置<  >样式
          width:50px;
          heigth:50px;
          background-color:white;
          color:black;
          font-size:30px;
          line-height:50px;
          text-align:center;
          positon:absolute;
          top:150px;
          display:none;                 //鼠标未进入时不显示
        }
       #left{ left:0px;}                 //设置< 样式
       #right{ right:0px; }              //设置> 样式

      #list{                                 //设置序号列表样式
      life-style:none;
      positon:absolute;
      bottom:20px;
      left:200px;
      }
      #list li{
      position:absolute;
      float:left;                      //设置序号横向排列
      wodth:15px;
      height:15px;
      background-color："#aaa";
      margin-left:8px;                 //设置序号之间间隙
      border-radius:50%;          
      line-height:15px;
      text-align:center;
      }
 </style>
 
页面主体部分
<body>                      
    <div id="box">                      //放置背景图片
          <img scr="xxx/1.jpg" id="p" />
          <ul id="list">                                //图片序号
               <li>1</li>
               <li>2</li>
               <li>3</li>
               <li>4</li>
               <li>5</li>
          </ul>
          <div id="left" class="turn"> < </div>                  
          <div id="right" class="turn"> > </div>         左右轮播按钮
    </div>
</body>

javascript部分
<script type="text/javascript">
      //分别获取这些标签节点
      var box = document.getElementById("box")
      var pic = document.getElementById("p")
      var left = document.getElementById("left")
      var right = document.getElementById("right")
      var lisarr = document.getElementById("li")
      //启动一个定时器去更换pic中的src属性
      var currentPage=1
      lisarr[0].style.backgroundColor="red"             //设置第一个小圆点颜色为红色
      var timer = setInterval(startLoop,1500)                           //隔1.5秒自动执行一次
     //启动轮播函数
      function startLoop(){
                 currentPage++
                 changPage()
        }
      //换页函数
       function changePage(){                
                if(currentPage==6){          //当当前页面数超过最大值时，重新从1开始
                currentPage=1
                }else if(currentPage==0){
                      currentPage=5
                }
                pic.src="xxx/"+currentPage+".jpg"
                //清空小圆点的颜色
                for(var i=0;i<lisarr.length;i++)｛
                      lisarr[i].style.backgroundColor="#aaa"
                  ｝
                //再设置当前显示页面对应的序号小圆点为红色
                lisarr[currentPage - 1].style.backgroundColor="red"
           }

      //鼠标进入div页面
       box.addEventListener("mouseover",overFunc,false)
       //停止定时器
       function overFunc{
              clearInterval(timer)
              //显示左右按钮
              left.style.display:"block"
              right.style.display:"block"
       }
       //鼠标离开div页面
       box.addEventListener("mouseout",outFunc,false)
       //重启定时器
       function outFunc{
              timer = setInterval(startLoop,1500)
             //隐藏左右按钮
              left.style.display:"none"
              right.style.display:"none"
       }

      //鼠标进入左右按钮颜色变深
      left.addEventListener("mouseover",deep,false)
      right.addEventListener("mouseover",deep,false)
      function deep(){
          this.style.backgroundColor="   "}                  //此处选取一个深一点的颜色
      //鼠标离开变回本来颜色
      left.addEventListener("mouseout",nodeep,false)
      left.addEventListener("mouseout",nodeep,false)
       function nodeep(){
          this.style.backgroundColor="   "}                  //此处选择按钮本来颜色

     //鼠标点击左右按钮换页
     right.addEventListener("click",function(){
         currentPage++
         changePage()
         },false)        //右边按钮加页
     left.addEventListener("click",function(){
         currentPage--
         changePage()
         },false)        //左边按钮减页

     //进入小圆点换指定页
     for(var i=0;i<lisarr.length;i++){
         lisarr[i].addEventListener("mouseover",function(){
             currentPage=parseInt(this.innerHTML)         //将原点序号值赋给当前页变量
             changePage()
             },false)                                    或者：lisarr[i].index=i+1  currentPage=index
           }
</script>

强仔fight

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础10图片轮播效果的实现

轮播效果的实现页面样式部分 &amp;amp;amp;lt;style type=&amp;amp;quot;text/css&amp;amp;quot;&amp;amp;amp;gt; #box{ width:600px; height:400px; margin:0 auto; //设置居中 positon:relative; }
复制链接

扫一扫