几种轮播图的设计原理

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

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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();
}   
 
  

你可能感兴趣的:(JavaScript语言)