Jquery特效一:图片轮换显示

最新推荐文章于 2024-05-21 14:15:14 发布

不净之心

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量82

点赞数

分类专栏：前台&美工文章标签： javascript xhtml ViewUI

本文链接：https://blog.csdn.net/pyzheng/article/details/84224360

版权

前台&美工专栏收录该内容

118 篇文章 1 订阅

订阅专栏

[url]http://www.flatws.cn/article/program/css/2011-02-15/12940.html[/url]

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

不净之心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery特效一:图片轮换显示

[url]http://www.flatws.cn/article/program/css/2011-02-15/12940.html[/url][code="html"]* {margin:0;padding:0;font-size:12px;font-family:Verdana;} img {border:0}#pic{margin:5px;width:3...
复制链接

扫一扫