css

    1. *{
    2. margin: 0;
    3. padding: 0;
    4. }
    5. li{
    6. list-style: none;
    7. }
    8. .box{
    9. width: 600px;
    10. height: 400px;
    11. margin: 0 auto;
    12. position: relative;
    13. overflow: hidden;
    14. }
    15. ul{
    16. float: left;
    17. width: 600%;
    18. height:400px;
    19. }
    20. ul>li{
    21. float: left;
    22. display: none;
    23. }
    24. ol{
    25. position: absolute;
    26. bottom:20px;
    27. right: 50%;
    28. transform: translateX(50%);
    29. }
    30. ol>li{
    31. display: inline-block;
    32. cursor: pointer;
    33. width: 20px;
    34. height: 20px;
    35. border-radius: 50%;
    36. background-color: rgba(44,44,44,.3);
    37. border: 1px solid #fff;
    38. }
    39. .current{
    40. background-color: #ff4500;
    41. }
    42. #arrow_l,#arrow_r{
    43. position: absolute;
    44. cursor: pointer;
    45. top: 50%;
    46. transform: translateY(-50%);
    47. z-index: 100;
    48. width: 40px;
    49. height: 70px;
    50. background: url(./images/icon-slides.png);
    51. border: none;
    52. }
    53. #arrow_l{
    54. background-position-x: -86px;
    55. }
    56. #arrow_r{
    57. right: 0;
    58. background-position-x: -125px;
    59. }

    html

    1. <div class="box">
    2. <button id="arrow_l"></button>
    3. <button id="arrow_r"></button>
    4. <ul>
    5. <li style="display: block;"><img src="./images/01.png" alt=""></li>
    6. <li><img src="./images/02.png" alt=""></li>
    7. <li><img src="./images/03.png" alt=""></li>
    8. <li><img src="./images/04.png" alt=""></li>
    9. <li><img src="./images/05.png" alt=""></li>
    10. </ul>
    11. <ol class="circle">
    12. </ol>
    13. </div>

    js

    1. <script>
    2. var list=document.querySelectorAll("ul>li");
    3. var ol=document.querySelector(".circle");
    4. var arrow_r=document.querySelector("#arrow_r");
    5. var arrow_l=document.querySelector("#arrow_l");
    6. var count=0;
    7. var circle=0;
    8. arrow_r.onclick=function(){
    9. if(count<list.length-1){
    10. count++;
    11. }else{
    12. count=0;
    13. }
    14. for(var i=0;i<list.length;i++){
    15. list[i].style.display="none";
    16. }
    17. list[count].style.display="block"
    18. if(circle==ol.children.length-1){
    19. circle=0;
    20. }else{
    21. circle++;
    22. }
    23. for(var i=0;i<ol.children.length;i++){
    24. ol.children[i].className="";
    25. }
    26. ol.children[circle].className="current";
    27. }
    28. arrow_l.onclick=function(){
    29. if(count<=0){
    30. count=list.length-1;
    31. }else{
    32. count--;
    33. }
    34. for(var i=0;i<list.length;i++){
    35. list[i].style.display="none";
    36. }
    37. list[count].style.display="block"
    38. }
    39. setInterval(function(){
    40. arrow_r.click();
    41. },2000)
    42. for(var i=0;i<list.length;i++){
    43. var li= document.createElement("li");
    44. ol.appendChild(li);
    45. ol.children[i].setAttribute("index",i);
    46. ol.children[i].onclick=function(){
    47. for(var i=0;i<ol.children.length;i++){
    48. ol.children[i].className="";
    49. list[i].style.display="none";
    50. }
    51. this.className="current";
    52. var index=this.getAttribute("index");
    53. list[index].style.display="block";
    54. }
    55. }
    56. ol.children[0].className="current";
    57. </script>