<!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=gb2312" />
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<style type="text/css">
* {margin:0;padding:0;font-size:12px;font-family:Verdana;}
img {border:0}
#pic{margin:5px;width:300px;height:200px;overflow:hidden;cursor:pointer;}
#play{position:absolute;margin-left:200px;margin-top:-30px;}
#play a{text-decoration: none;border:1px solid #CEDEF7;background-color:#E8FCEB;width:20px;height:20px;color:#2F49DF;display:block;float:left;text-align:center;line-height:20px;margin-right:3px;}
</style>
<script type="text/javascript">
var _c = _h = 0;
$(function(){
$('#play > a').click(function(){
var i = $(this).attr('alt') - 1;
clearInterval(_h);
_c = i;
play();
change(i);
})
$("#pic img").hover(function(){clearInterval(_h)}, function(){play()});
play();
})
function play()
{
_h = setInterval("auto()", 1000);
}
function change(i)
{
$('#play > a').css('background-color','#E8FCEB').eq(i).css('background-color','#C6FF5E').blur();
$("#pic img").hide().eq(i).fadeIn('slow');
}
function auto()
{
_c = _c > 2 ? 0 : _c + 1;
change(_c);
}
</script>
<title>js图片播放轮换</title>
</head>
<body>
<div id="pic">
<img src="http://www.cssrain.cn/demo/pic/cssrain-logo.JPG" width="300" height="200" alt="" />
<img src="http://www.cssrain.cn/demo/pic/usbmingpian.jpg" width="300" height="200" alt="" />
<img src="http://www.cssrain.cn/demo/pic/ganyingdeng2.jpg" width="300" height="200" alt="" />
<img src="http://www.cssrain.cn/demo/pic/ganyingdeng.jpg" width="300" height="200" alt="" />
</div>
<div id="play">
<a href="###" alt="1" style="background-color:#C6FF5E">1</a>
<a href="###" alt="2" >2</a>
<a href="###" alt="3" >3</a>
<a href="###" alt="4" >4</a>
</div>
<br/><br/><br/><br/>
<div>转:<a href="http://koyoz.com">koyoz.com</a> </div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.js" type="text/javascript"></script>
<style type="text/css">
* {margin:0;padding:0;font-size:12px;font-family:Verdana;}
img {border:0}
#pic{margin:5px;width:300px;height:200px;overflow:hidden;cursor:pointer;}
#play{position:absolute;margin-left:200px;margin-top:-30px;}
#play a{text-decoration: none;border:1px solid #CEDEF7;background-color:#E8FCEB;width:20px;height:20px;color:#2F49DF;display:block;float:left;text-align:center;line-height:20px;margin-right:3px;}
</style>
<script type="text/javascript">
var _c = _h = 0;
$(function(){
$('#play > a').click(function(){
var i = $(this).attr('alt') - 1;
clearInterval(_h);
_c = i;
play();
change(i);
})
$("#pic img").hover(function(){clearInterval(_h)}, function(){play()});
play();
})
function play()
{
_h = setInterval("auto()", 1000);
}
function change(i)
{
$('#play > a').css('background-color','#E8FCEB').eq(i).css('background-color','#C6FF5E').blur();
$("#pic img").hide().eq(i).fadeIn('slow');
}
function auto()
{
_c = _c > 2 ? 0 : _c + 1;
change(_c);
}
</script>
<title>js图片播放轮换</title>
</head>
<body>
<div id="pic">
<img src="http://www.cssrain.cn/demo/pic/cssrain-logo.JPG" width="300" height="200" alt="" />
<img src="http://www.cssrain.cn/demo/pic/usbmingpian.jpg" width="300" height="200" alt="" />
<img src="http://www.cssrain.cn/demo/pic/ganyingdeng2.jpg" width="300" height="200" alt="" />
<img src="http://www.cssrain.cn/demo/pic/ganyingdeng.jpg" width="300" height="200" alt="" />
</div>
<div id="play">
<a href="###" alt="1" style="background-color:#C6FF5E">1</a>
<a href="###" alt="2" >2</a>
<a href="###" alt="3" >3</a>
<a href="###" alt="4" >4</a>
</div>
<br/><br/><br/><br/>
<div>转:<a href="http://koyoz.com">koyoz.com</a> </div>
</body>
</html>
3721
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
