Jquery特效一:图片轮换显示-优快云博客

本文链接：https://blog.youkuaiyun.com/pyzheng/article/details/84224360

本文介绍了一种使用JavaScript实现图片轮播的方法。通过设置定时器自动切换图片，并利用鼠标悬停效果暂停轮播，增强了用户体验。同时，还提供了一个简单的导航按钮来手动选择图片。

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

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