背景图片切换/轮播

最新推荐文章于 2020-11-29 02:11:03 发布

weixin_30588675

最新推荐文章于 2020-11-29 02:11:03 发布

阅读量625

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wteng/p/5395476.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>图片切换</title>
        <meta name="viewport" content="initial-scale=1, maximum-scale=1">
        <script src="http://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
        <style type="text/css">
            body{
                margin: 0;
            }
            #scrollimg{
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                background-color: #000000;
            }
            #scrollimg img{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="scrollimg">
            <img src="http://images.forwallpaper.com/files/images/8/8b77/8b77099e/200241/abstract-color-bokeh-lights-wheels-abstraction-colors-bokeh-light-circles-1920x1080.jpg">
            <img src="http://attachments.gfan.com/forum/attachments2/day_111125/111125144842a0f58eb23b7a1e.jpg" style="display: none;">
            <img src="http://img2.niutuku.com/desk/130220/21/21-niutuku.com-995.jpg" style="display: none;">
        </div>    
        <script>    
            $(function() {
                var numpic = $('#scrollimg img').size() - 1;
                var nownow = 0;
                var inout = 0;
                var TT = 0;
                var SPEED = 5000;
                var imgclomns = $('#scrollimg').find('img');
                var imgtxt = $('#imgtxt').find('div.pic_info');
            
                function Scroll() {
                    var LL = nownow - 1;
                    if (numpic >= 1) {
                        if (nownow < numpic) {
                            imgclomns.eq(LL).fadeOut();
                            imgtxt.eq(LL).hide();
                            imgclomns.eq(nownow).fadeIn(500);
                            imgtxt.eq(nownow).fadeIn(800);
                            nownow++;
                        } else {
                            imgclomns.eq(LL).fadeOut();
                            imgtxt.eq(LL).hide();
                            imgclomns.eq(nownow).fadeIn(500);
                            imgtxt.eq(nownow).fadeIn(800);
                            nownow = 0;
                        }
                    } else {
                        imgclomns.eq(0).fadeIn(700);
                        imgtxt.eq(0).fadeIn(1000);
                        window.clearInterval(TT);
                    }
                }
                Scroll();
                TT = setInterval(Scroll, SPEED);
            })　　
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/wteng/p/5395476.html

weixin_30588675

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
背景图片切换/轮播

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>图片切换</title> <meta name="viewport" content="initial-scale=1, max...
复制链接

扫一扫