jquery轮播图

最新推荐文章于 2024-01-09 17:07:13 发布

hn_lgf

最新推荐文章于 2024-01-09 17:07:13 发布

阅读量124

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_43482965/article/details/104372569

版权

1.首先引用jq文件

 <script src="scripts/jquery-1.7.1.js"></script>

2.Html部分

<body>
    <div id="imgContainer"></div>
</body>

3.css部分

<style>
        #imgContainer{
            width:300px;
            height:300px;
            border:1px solid red;
            /*设置绝对定位，子元素的绝对定位是相对于父元素*/
            position:absolute;
            left:10px;
            top:10px;
        }
        #imgContainer img{
            width:300px;
            height:300px;
            position:absolute;
            left:0px;
            top:0px;
        }
        #imgContainer div{
            position:absolute;
        }
        #imgContainer .imgTip{
            border:1px solid blue;
            background-color:green;color:white;
            padding:3px;width:10px;cursor:pointer;
            z-index:100;bottom:10px;
        }
    </style>

4.js部分

 <script>
        var changeImgID;
        //图片数组
        var list = ['img/1.png', 'img/2.png', 'img/3.png', 'img/4.png', 'img/5.png']  
        $(function () {
            //循环数组
               $.each(list, function (index) {
                        //给数组的每个图片生成img
                        $('<img src="' + this + '"/>').appendTo('#imgContainer');
                        //生成数字索引div
                        $('<div class="imgTip">' + (index + 1) + '</div>').css('right', (4 - index) * 20 + 'px').appendTo('#imgContainer');
                    })
                    $('#imgContainer>img:gt(0)').hide();
                    $('#imgContainer>.imgTip').hover(function () {//指向数字
                        //将指向的图片显示出来
                        $('#imgContainer>img').eq(parseInt($(this).text()) - 1).slideDown(1000).siblings('img').fadeOut();
                        $(this).css('background-color', 'blue').siblings('.imgTip').css('background-color', 'green');
                        clearInterval(changeImgID);  //当鼠标指向索引时，清楚定时器
                    }, function () { //鼠标移开数字时
                   //启动定时器
                        changeImgID = setInterval(changeImg, 2000);
                        //改图片索引
                        imgIndex = parseInt($(this).text()) - 1;
                    });
                    
                    $('#imgContainer>.imgTip').eq(0).css('background-color', 'blue').siblings('.imgTip').css('background-color', 'green');
                    //定时器
                    changeImgID= setInterval(changeImg, 2000);
        });
       
            
        var imgIndex = 0;
        function changeImg() {  //自动播发函数
            imgIndex++;
            if (imgIndex >= list.length) {
                imgIndex = 0;            
            }
            $('#imgContainer>img').eq(imgIndex).slideDown(1000).siblings('img').fadeOut(1000);
            $('#imgContainer>.imgTip').eq(imgIndex).css('background-color', 'blue').siblings('.imgTip').css('background-color', 'green');

        }
    </script>

hn_lgf

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery轮播图

1.首先引用jq文件 <script src="scripts/jquery-1.7.1.js"></script>2.Html部分<body> <div id="imgContainer"></div></body>3.css部分<style> #imgContainer{...
复制链接

扫一扫