jquery实现图片自动播放

最新推荐文章于 2021-05-31 00:08:45 发布

转载最新推荐文章于 2021-05-31 00:08:45 发布 · 534 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/adamboy/blog/43699

文章标签：

#javascript #xhtml #python #ViewUI

本文介绍了一个使用HTML和JavaScript实现的简单图片轮播效果。通过设置定时器自动切换图片，并利用鼠标悬停事件来改变显示的图片。同时，提供了停止自动播放的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style>
ul{ margin:0px;padding:0px;width:360px;}
li{ float:left; margin-left:10px; list-style-type:none;width:40px;background-color:#96EDE4;text-align:center;}
img{ width:166px;height:112px;}
#stop{ clear:both;}
</style>
<script src="jquery.js"></script>
</head>

function clearTimeSet(){
clearTimeout(setT1);
clearTimeout(setT2);
clearTimeout(setT3);
}

var int = setInterval("autoShow()",3000);

$('#stop').click(function(){
clearTimeSet();
int = window.clearInterval(int);
})

$('li').mouseover(function(){

if($(this).attr('id') == '1'){

  int = window.clearInterval(int);
  clearTimeSet();
  showImg1();

}else if($(this).attr('id') == '2'){

  int = window.clearInterval(int);
  clearTimeSet();
  showImg2();

}else if($(this).attr('id') == '3'){

  int = window.clearInterval(int);
  clearTimeSet();
  showImg3();
}
})