Newbie_小白
没有都对的别人，也没有全错的自己，至少要有自己的坚持，无关他人、无关外物！
仿FLASH的图片轮换效果 
css布局代码(test.css)：


body {
    background: #ccc;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

img {
    border: 0;
}

.play {
    width: 400px;
    height: 430px;
    margin: 50px auto 0;
    background: #999;
    font: 12px Arial;
}

.big_pic {
    width: 400px;
    height: 320px;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    background: #222;
    position: relative;
}

.big_pic li {
    width: 400px;
    height: 320px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    background: url(img/loading.gif) no-repeat center center;
}

.mark_left {
    width: 200px;
    height: 320px;
    position: absolute;
    left: 0;
    top: 0;
    background: red;
    filter: alpha(opacity:0);
    opacity: 0;
    z-index: 3000;
}

.mark_right {
    width: 200px;
    height: 320px;
    position: absolute;
    left: 200px;
    top: 0;
    background: green;
    filter: alpha(opacity:0);
    opacity: 0;
    z-index: 3000;
}

.big_pic .prev {
    width: 60px;
    height: 60px;
    background: url(img/btn.gif) no-repeat;
    position: absolute;
    top: 130px;
    left: 10px;
    z-index: 3001;
    filter: alpha(opacity:0);
    /**隐藏，相当于display：none*/
    opacity: 0;
    cursor: pointer;
}

.big_pic .next {
    width: 60px;
    height: 60px;
    background: url(img/btn.gif) no-repeat 0 -60px;
    position: absolute;
    top: 130px;
    right: 10px;
    z-index: 3001;
    filter: alpha(opacity:0);
    opacity: 0;
    cursor: pointer;
}

.big_pic .text {
    position: absolute;
    left: 10px;
    top: 302px;
    z-index: 3000;
    color: #ccc;}


.big_pic .length {
    position: absolute;
    right: 10px;
    bottom: 4px;
    z-index: 3000;
    color: #ccc;
}

.big_pic .bg {
    width: 400px;
    height: 25px;
    background: #000;
    filter: alpha(opacity=60);
    opacity: 0.6;
    position: absolute;
    z-index: 2999;
    bottom: 0;
    left: 0;
}

.small_pic {
    width: 380px;
    height: 94px;
    position: relative;
    top: 7px;
    left: 10px;
    overflow: hidden; /**为了实现无缝滚动*/
}

.small_pic ul {
    height: 94px;
    position: absolute;
    top: 0;
    left: 0;
}

.small_pic li {
    width: 120px;
    height: 94px;
    float: left;
    padding-right: 10px;
    background: url(img/loading.gif) no-repeat center center;
    cursor: pointer;
    filter: alpha(opacity=60);
    opacity: 0.6;
}

.small_pic img {
    width: 120px;
    height: 94px;
}


 


封装好的js代码：



function getStyle(obj, name) {
    if (obj.currentStyle) {
        return obj.currentStyle[name];
    }
    else {
        return getComputedStyle(obj, false)[name];
    }
}

function startMove(obj, attr, iTarget) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var cur = 0;

        if (attr == 'opacity') {
            cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
        }
        else {
            cur = parseInt(getStyle(obj, attr));
        }

        var speed = (iTarget - cur) / 6;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        if (cur == iTarget) {
            clearInterval(obj.timer);
        }
        else {
            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
                obj.style.opacity = (cur + speed) / 100;

                document.getElementById('txt1').value = obj.style.opacity;
            }
            else {
                obj.style[attr] = cur + speed + 'px';
            }
        }
    }, 30);
}


 


 




html代码：


　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>仿FLASH的图片轮换效果 </title>
    <link rel="stylesheet" type="text/css" href="test.css">
    <script src="test.js"></script>
    <script type="text/javascript">
        function getByClass(oParent, sClass) {
            var aEle = oParent.getElementsByTagName("*");//选择元素
            var aResult = [];//存储选出来的结果
            for (var i = 0; i < aEle.length; i++) {
                if (aEle[i].className == sClass) {//如果选出了的第i个元素等于传进来的参数
                    aResult.push(aEle[i]);
                }
            }
            return aResult;
        }

        window.onload = function () {
            var oDiv = document.getElementById("playimages");//整个效果界面
            var oBtnPrev = getByClass(oDiv, "prev")[0];//两个方向按钮
            var oBtnNext = getByClass(oDiv, "next")[0];

            var oMarkLeft = getByClass(oDiv, "mark_left")[0];//图片一分为二的两个遮罩
            var oMarkRight = getByClass(oDiv, "mark_right")[0];


            var oDivSmall = getByClass(oDiv, "small_pic")[0];//根据全局选择小图
            var aLiSmall = oDivSmall.getElementsByTagName("li");
            var oUlSmall = oDivSmall.getElementsByTagName("ul")[0];

            var oUlBig = getByClass(oDiv, "big_pic")[0];//根据全局选择大图
            var aLiBig = oUlBig.getElementsByTagName("li");


            var nowZindex = 2;//此变量为了保证将要显示大图的索引足以让它显示在最前方
            var now = 0;//此变量为了防止重复点击图片重复显示

            oUlSmall.style.width = aLiSmall.length * aLiSmall[0].offsetWidth + "px"; //小图无缝滚动

            //左右按钮
            oBtnPrev.onmouseover = oMarkLeft.onmouseover = function () {//鼠标移入淡入按钮(遮罩和按钮的层级造成，所以两个都要加函数)
                startMove(oBtnPrev, "opacity", 100);
            }

            oBtnPrev.onmouseout = oMarkLeft.onmouseout = function () {//鼠标移出淡出按钮
                startMove(oBtnPrev, "opacity", 0);
            }
　　　　


　　　　　oBtnNext.onmouseover = oMarkRight.onmouseover = function () {
   　　　　　　　　 startMove(oBtnNext, "opacity", 100);
　　　　　}

　　　　oBtnNext.onmouseout = oMarkRight.onmouseout = function () {
   　　　　　　　　　　 startMove(oBtnNext, "opacity", 0);
　　　　}
　　　　
　　　　//大图切换
for (var i = 0; i < aLiSmall.length; i++) {
    aLiSmall[i].index = i;//小图的索引，为了控制大图的索引一致来改变对应的Z-index
    aLiSmall[i].onclick = function () {
        if (this.index == now) return;//此条件成立则不执行其后面代码
        now = this.index;
        tab();

    };

    //小图淡入淡出

    aLiSmall[i].onmouseover = function () {
        startMove(this, "opacity", 100);
    };
    aLiSmall[i].onmouseout = function () {
        if (this.index != now) {//此判断为了保证当前显示大图对应的小图常亮
            startMove(this, "opacity", 60);
        }
    };
}//for结束


 function tab() {
                aLiBig[now].style.zIndex = nowZindex++;

                for (var i = 0; i < aLiSmall.length; i++) {
                    startMove(aLiSmall[i], "opacity", 60);
                }
                startMove(aLiSmall[now], "opacity", 100);

                aLiBig[now].style.height = 0;//为了图片从上到下显示，所以图片高度设置为0 再拉大
                startMove(aLiBig[now], "height", 320);//320是图片的初始高度

                if (now == 0) {
                    startMove(oUlSmall, "left", 0);
                } else if (now == aLiSmall.length - 1) {
                    startMove(oUlSmall, "left", -(now - 2) * aLiSmall[0].offsetWidth);
                } else {
                    startMove(oUlSmall, "left", -(now - 1) * aLiSmall[0].offsetWidth);
                }
            }

            oBtnPrev.onclick = function () {
                now--;
                if (now == -1) {
                    now = aLiSmall.length - 1;
                }
                tab();
            };
            oBtnNext.onclick = function () {
                now++;
                if (now == aLiSmall.length) {
                    now = 0;
                }
                tab();
            };


            var  timer=setInterval(oBtnNext.onclick,2000);
            oDiv.onmouseover=function(){
                clearInterval(timer);
            };

            oDiv.onmouseout= function () {
                timer=setInterval(oBtnNext.onclick,2000);
            };

        };
    </script>
</head>




<body>
<div id="playimages" class="play">
    <ul class="big_pic">

        <div class="prev"></div>
        <div class="next"></div>

        <div class="text">加载图片说明……</div>
        <div class="length">计算图片数量……</div>

        <a class="mark_left" href="javascript:;"></a>
        <a class="mark_right" href="javascript:;"></a>

        <div class="bg"></div>

        <li style="z-index:1;"><img src="img/1.jpg"/></li>
        <!-- Z-index：1，为了保证点击小图对应的大图显示在最前面 -->
        <li><img src="img/2.jpg"/></li>
        <li><img src="img/3.jpg"/></li>
        <li><img src="img/4.jpg"/></li>
        <li><img src="img/5.jpg"/></li>
        <li><img src="img/6.jpg"/></li>
    </ul>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter: 100; opacity: 1;"><img src="img/1.jpg"/></li>
            <li><img src="img/2.jpg"/></li>
            <li><img src="img/3.jpg"/></li>
            <li><img src="img/4.jpg"/></li>
            <li><img src="img/5.jpg"/></li>
            <li><img src="img/6.jpg"/></li>
        </ul>
    </div>
</div>

</body>
</html>　　　


 


　　　


运行结果简要展示：







        
posted on 
2016-03-12 11:00 
Newbie_小白 
阅读(872) 
评论(0) 
 
收藏 
举报


    

    
    




    
    

    
    

    

        

    

        

            
                
                
            
        

    

    

    

    











    

        


        
        
        

        
    





    博客园  ©  2004-2025


    浙公网安备 33010602011771号
    浙ICP备2021040463号-3

 Powered By博客园