图片无缝轮播

来源：互联网发布：免费设计室内装修软件编辑：程序博客网时间：2024/06/09 20:13
 <scripttype="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>
 <divclass="wrap"id='wrap'>
 <ulid="pic">
  <li><imgsrc="1.jpg"alt=""></li>
  <li><imgsrc="2.jpg"alt=""></li>
  <li><imgsrc="3.jpg"alt=""></li>
  <li><imgsrc="4.jpg"alt=""></li>
  <li><imgsrc="5.jpg"alt=""></li>
 </ul>
 <olid="list">
  <liclass="on">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
 </ol>
 </div>
        0        0           
图片无缝轮播
无缝轮播图片
无缝轮播图片
JavaScript图片无缝轮播代码
jquery实现无缝图片轮播
无缝轮播切换
无缝轮播
无缝轮播
无缝轮播
js无缝轮播
无缝轮播demo
实现无缝轮播
jQuery无缝轮播
jQuery无缝轮播
无缝轮播
jquery 无缝轮播
jquery实现图片无缝轮播显示（个人随笔）
jQuery+CSS3实现图片的无缝轮播
Linux下C++的多线程编程
Redhat5安装nginx和php
史上最全的PS快捷键大全
Android Studio   更改包名
基于web服务型架构初步调整
图片无缝轮播
meta-data合并相同name元素
linux内核移植笔记
TouchRegion
比较节省内存的一种加载图片的方法
UML笔记(一)
iOS开发中遇到的，输入一个包含汉字的字符串，输出其汉字的拼音。（字符串中含有的汉字提取）
iOS10中的通知Notification
测试