几种轮播图的设计原理

最新推荐文章于 2022-05-12 20:48:26 发布

Cutepingping

最新推荐文章于 2022-05-12 20:48:26 发布

阅读量2.9k

点赞数

分类专栏： JavaScript语言

本文链接：https://blog.youkuaiyun.com/PINGER0077/article/details/80806629

版权

JavaScript语言专栏收录该内容

32 篇文章

订阅专栏

第一种设计思路：通过修改每一张图片的透明度，让其每隔一段时间将其中的某一张图片透明度设为 1，而其他的设为0，从而实现图频轮流播放的效果。该种思路比较简单，首先让一组图片绝对定位，并使其重叠，通过函数切换控制图片的透明度和定时器来触发该函数，改变不同图片的透明度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        /*此时li为childID；parentID即为parentID*/
        var autoPlay = function(parentID,childTag){
            var pictures = document.getElementById(parentID);
            var items = pictures.getElementsByTagName(li);
            var len = items.length;
            var index = 0;
            showItem();
            //显示一张图片
            function showItem (){
                //首先将所有图片的透明度设为0；
                hideItems();
                items[index].style.opacity = 1;
                //将要显示的透明度改变让其显示
                if(index > len - 2){
                    index = 0;
                }{
                    index++;
                }
                // 在这里用setTimeout模拟setInterval的效果
                setTimeout(showItem,2500);
            }
            //将所有的图片透明度设为0
            function hideItems(){
                for(var i =0; i<len; i++){
                    items[i].style.opacity = 0;
                }
            }

        }
    </script>
</head>
<body>
<ul id="parentID">
    <li><img src=""/></li>
    <li><img src=""/></li>
    <li><img src=""/> </li>
    <li><img src=""/></li>
    <li><img src=""/> </li>
</ul>
</body>
</html>

第二种设计思路：这一种是滑动形式的，通过改变元素的left值让图片呈现左右滑动的现象。

/*此时li为childID；parentID即为parentID*/
var autoSlide = function(parentID,childTag) {
    var parent = document.getElementById(parentID);
    parent.style.position = "relative";
    var items = parent.getElementsByTagName(childTag);
    var width = items[0].offsetWidth;
    var index = 0;

    function slide() {
        if (index > items.length - 2) {
            index = 0;
        } else {
            index++;
        }
        moveWide = -width * index;
        parent.style.left = moveWide + "px";
        setTimeout(slide, 1500);
    }

    slide();
}