前端学习———轮播图

用js实现轮播图

一、效果展示

二、代码展示

css部分

 #loop{
    width: 800px;
    height: 534px;
    margin: 0 auto;
    position: relative;
  }
  #list{
    list-style: none;
    position: absolute;
    bottom: 10px;
    left: 250px;
  }
  #list li{
    float: left;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    background: #aaa;
    margin-right: 10px;
    cursor: pointer;
  }
  .choose{
    width: 50px;
    height: 100%;
    background-color: rgba(0,0,0,0.2);
    color: #fff;
    font-size: 30px;
    line-height: 534px;
    text-align: center;
    /*display: none;*/
    cursor: pointer;
    position: absolute;
    top: 0;
  }
  #left{
    left: 0;
  }
  #right{
    right: 0;
  }
  #pic{
    cursor: pointer;
  }

html部分

<div id="loop">
  <img src="0.jpg" id="pic" style="width: 100%;height: 100%">
  <ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
  <div id="left" class="choose"><</div>
  <div id="right" class="choose">></div>
</div>

js部分

  var jsDiv=document.getElementById("loop");
  var jsImg=document.getElementById("pic");
  var jsLeft=document.getElementById("left");
  var jsRight=document.getElementById("right");
  var jsUL=document.getElementById("list");
  var jsLis=document.getElementsByTagName("li");
  jsLis[0].style.backgroundColor="red";
  var currentPage=0;
  var td=4000;
  var timer=setInterval(func,td);
  function func() {
    currentPage++;
    changePic();
  }
  function changePic() {
    if (currentPage===8)currentPage=0;
    if (currentPage===-1)currentPage=7;
    jsImg.src=currentPage+".jpg";
    for (var i = 0; i < jsLis.length; i++) {
      jsLis[i].style.backgroundColor="#aaa";
    }
    jsLis[currentPage].style.backgroundColor="red";
  }
  jsDiv.addEventListener("mouseover",func1,false);
  function func1() {
    clearInterval(timer);
    jsLeft.style.display="block";
    jsRight.style.display="block";
  }
  jsDiv.addEventListener("mouseout",func2,false);
  function func2(){
    timer=setInterval(func,td);
    jsLeft.style.display="none";
    jsRight.style.display="none";
  }
  jsLeft.addEventListener("click",func3,false);
  function func3() {
    currentPage--;
    changePic();
  }
  jsRight.addEventListener("click",func4,false);
  function func4() {
    currentPage++;
    changePic();
  }
  jsLeft.onmouseover=function () {
    this.style.backgroundColor="rgba(0,0,0,0.6)";
  }
  jsRight.onmouseover=function () {
    this.style.backgroundColor="rgba(0,0,0,0.6)";
  }
  jsLeft.onmouseout=function () {
    this.style.backgroundColor="rgba(0,0,0,0.2)";
  }
  jsRight.onmouseout=function () {
    this.style.backgroundColor="rgba(0,0,0,0.2)";
  }