jquery 图片循环显示 -

lichengyezi

浏览: 205749 次
性别:
来自: 齐齐哈尔

最近访客更多访客>>

devcang

budingmi

zjy_369

denny.zhao

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (50)

社区版块

存档分类

jquery 图片循环显示

jQuery CSS C C++C#

<!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>

分享到：