Jquery背景图片轮换

最新推荐文章于 2020-12-29 21:06:23 发布

treeMountain

最新推荐文章于 2020-12-29 21:06:23 发布

阅读量2.3k

点赞数 1

分类专栏： JQuery 文章标签： jquery 背景图片轮换

JQuery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

这是一个使用Jquery类库,还有一外部jquery.backstretch.min.js类做成的背景图片不停的轮换.

前台调用代码：

<!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>
    <title>无标题页</title>
    <script type="text/javascript" src="JQuery/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="JQuery/jquery.backstretch.min.js"></script>
    <script type="text/javascript">
        //Create an array of images that you'd like to use
        var images=[
            "img/1.jpg",
            "img/2.jpg",
            "img/3.jpg",
            "img/4.jpg",
            "img/5.jpg"
        ];
        
        //A little script for preloading all of the images
        //It's not necessary,but generally a good idea
        $(images).each(function () {
            $('<img/>')[0].src = this;
        });
        
        //The index variable will keep track of which image is currently showing
        var index=0;
        
        //Call backstretch for the first time,
        //In this case,I'm settings speed of 500ms for a fadeIn effect between images.
        $.backstretch(images[index],{speed:800});
        
        //Set an interval that increments the index and sets the new image
        //Note:The fadeIn speed set above will be inherited
        setInterval(function(){
            index=(index>=images.length-1)?0:index+1;
            $.backstretch(images[index]);
        },3000);
    </script>
</head>
<body>
这是一个背景轮换的案例！
</body>
</html>

运行效果图：