图片无缝轮播

最新推荐文章于 2021-01-28 14:08:23 发布

原创最新推荐文章于 2021-01-28 14:08:23 发布 · 495 阅读

CC 4.0 BY-SA版权

 <script

type="text/javascript">

 window.onload=function(){

 var
 wrap=document.getElementById('wrap'),

  pic=document.getElementById('pic').getElementsByTagName("li"),

  list=document.getElementById('list').getElementsByTagName('li'),

  index=0,

  timer=null;

  //
 定义并调用自动播放函数

 timer
 = setInterval(autoPlay, 2000);

  //
 鼠标划过整个容器时停止自动播放

 wrap.onmouseover
 = function () {

  clearInterval(timer);

 }

  //
 鼠标离开整个容器时继续播放至下一张

 wrap.onmouseout
 = function () {

  timer
 = setInterval(autoPlay, 2000);

 }

  //
 遍历所有数字导航实现划过切换至对应的图片

 for
 (var i = 0; i < list.length;
 i++) {

  list[i].onmouseover

= function

() {

  clearInterval(timer);

  index

= this.innerText
 - 1;

  changePic(index);

  };

 };

 function
 autoPlay () {

  if
 (++index >= pic.length) index = 0;

  changePic(index);

 }

  //
 定义图片切换函数

 function
 changePic (curIndex) {

  for
 (var i = 0; i < pic.length;
 ++i) {

  pic[i].style.display

= "none";

  list[i].className

= "";

  }

  pic[curIndex].style.display

= "block";

  list[curIndex].className

= "on";

 }

 };

 </script>

</head>

<body>

 <div

class="wrap"

id='wrap'>

 <ul

id="pic">

  <li><img

src="1.jpg"

alt=""></li>

  <li><img

src="2.jpg"

alt=""></li>

  <li><img

src="3.jpg"

alt=""></li>

  <li><img

src="4.jpg"

alt=""></li>

  <li><img

src="5.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>

 </div>