<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box{width: 300px;height: 300px;margin: 80px auto;}.box .header{height: 50px;background-color: blueviolet;font-size: 14px;color: #fff;text-align: center;line-height: 50px;}.box .foot{height: 50px;background-color: darkgray;font-size: 14px;color: #fff;text-align: center;line-height: 50px;}.box .content{height: 200px;background-color: chartreuse;position: relative;}.box .content img{width: 100%;height: 100%;}.box .content .jiantou{position: absolute;top:50%;margin-top: -25px;height: 50px;width: 300px;}.box .content .jiantou span{width: 50px;height: 50px;background-color: #ccc;text-align: center;line-height: 50px;position: absolute;cursor: pointer;}.box .content .jiantou span:first-child{left: 0px;}.box .content .jiantou span:last-child{right: 0px;}</style></head><body><div class="box"><div class="header">我不知这是第几个...</div><div class="content"><div class="jiantou"><span class="jianleft"><</span><span class="jianright">></span></div><img src="" alt="" class="pic"></div><div class="foot">还没出来...</div></div><script>//做个测试//var pic=document.querySelector(".pic")//var picArr=["img/1.jpg", "img/2.jpg","img/3.jpg","img/4.jpg"]//pic.src=picArr[3]//获取元素var box=document.querySelector(".box")var pic=document.querySelector(".pic")var pageTop=document.querySelector(".header") var pageFoot=document.querySelector(".foot")var jleft=document.querySelector(".jianleft")var jright=document.querySelector(".jianright")var timer=null//console.log(pic,pageTop,pageFoot);var picArr=["img/1.jpg", "img/2.jpg","img/3.jpg","img/4.jpg"]var num=0jright.onclick=function(){num++if(num>picArr.length){num=1}fn()}jleft.onclick=function(){num--if(num<1){num=4}fn()}function fn(){pic.src=picArr[num-1]pageTop.innerHTML=num+"/"+picArr.lengthpageFoot.innerHTML="这是我的第"+ num +"个女性朋友"}timer=setInterval(function(){jright.onclick()},1000)box.onmouseover=function(){clearInterval(timer)}box.onmouseout=function(){timer=setInterval(function(){jright.onclick()},1000)}</script></body></html>
