您的位置：首页 > Web前端 > JQuery

Jquery特效一:图片轮换显示

2011-02-14 10:56 288 查看

效果图及代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.4.1.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()", 3000);
}
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>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航