图片轮换

会做饭的技术男

于 2020-06-18 15:22:33 发布

阅读量191

点赞数 1

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_hjb21jb00jab.html

版权

前端专栏收录该内容

2507 篇文章 12 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #big{
                width:1560px;
                height: 700px;
                position: relative;
            }
            #big img{
                width:1560px;
                height: 700px;
            }
            .little{
                width: 170px;height: 30px;
                position: absolute;
                bottom: 30px;
                left: 660px;
            }
        </style>
        <script src="Scripts/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            //图片路径
            var list=["img/erji.jpg","img/flower.jpg","img/heart.jpg","img/littlewomen.jpg","img/xiaren.jpg"];
            $(function(){
                var change;//定义变量，接收定时器
                $.each(list,function(index,obj){
                    //生成图片
                    var img=$('<img src="'+this+'"/>').insertBefore(".little");
                    //生成span
                    $('<span>'+(index+1)+'</span>').css({
                        "background-color":"skyblue",
                        "margin":"2px",
                        "width":"30px",
                        "height":"30px",
                        "display":"inline-block",
                        "text-align":"center",
                        "line-height":"30px"
                    }).appendTo(".little");
                })
                //只显示第一张图片
                $("img:gt(0)").hide();
                //第一个数组特别显示
                $("span:eq(0)").css("background-color","pink");
                $("span").hover(function(){
                    //悬浮时显示对应图片
                    $("img").eq(parseInt($(this).text()-1)).show().siblings("img").hide();
                    $("span").eq(parseInt($(this).text()-1)).css("background-color","pink").siblings().css("background-color","skyblue");
                    clearInterval(change);//悬浮时清除定时器
                    showImgIndex=$(this).index();//重置显示元素
                },function(){
                    change = setInterval(showImg,2000);//鼠标离开时继续定时器
                });
                change = setInterval(showImg,2000);//设置定时器
            })
            var showImgIndex=0;//定义变量，控制显示哪张图片
            function showImg(){
                showImgIndex++;
                if(showImgIndex>=5){showImgIndex=0;}
                $("img").eq(showImgIndex).show().siblings("img").hide();
                $("span").eq(showImgIndex).css("background-color","pink").siblings().css("background-color","skyblue");
            }
                
        </script>
    </head>
    <body>
        <div id="big">
            <div class="little">
            </div>
        </div>
    </body>
</html>

会做饭的技术男

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
图片轮换

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #big{ width:1560px; height: 700px; position: rel.
复制链接

扫一扫