图片像幻灯片一样切换

最新推荐文章于 2022-09-20 21:08:18 发布

北化

最新推荐文章于 2022-09-20 21:08:18 发布

阅读量488

点赞数

分类专栏： JAVA web

本文链接：https://blog.csdn.net/u012289441/article/details/41414761

版权

JAVA web 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body,ul,p {margin: 0;padding: 0;background: #f23;}
        img {border: none;vertical-align: top;width: 400px;height: 500px;}
        li {list-style: none;vertical-align: top;}
        #wrap {width: 400px;height: 500px;position: relative;margin: 0 auto;}
        ul {position: absolute;top: 0;right: -50px;}
        ul li {width: 40px;height: 40px;background: #ccc;margin-bottom: 5px;}
        ul li:hover {background: #FC3;}
        span,p{width: 400px;position: absolute;height: 30px;background: #000;color: #fff;text-align: center;line-height: 30px;left: 0;filter:alpha(opacity:80);opacity: 0.8}
        span {top: 0;}
        p {bottom: 0;}
        .active {background: #F60;}
    </style>
    <script>
        window.οnlοad=function(){
                var oDiv = document.getElementById('wrap');
                var aImg = oDiv.getElementsByTagName('img')[0];
                var aSpan = oDiv.getElementsByTagName('span')[0];
                var aP = oDiv.getElementsByTagName('p')[0];
                var aUl = oDiv.getElementsByTagName('ul')[0];
                var aLi = aUl.getElementsByTagName('li');
                var num =0;
                var timer =null;
                var currentIndex=0;
                var arrImgUrl = ['1.jpg',
                                '2.jpg',
                                '3.jpg',
                                '4.jpg'];
                var arrText   = ['ͼƬݗ',
                                'ͼƬӒ',
                                'ͼƬһ',
                                'ࠗӒܺ'];
                for(var i=0;i<arrImgUrl.length;i++){
                    aUl.innerHTML+="<li></li>";
                }
                //chushihua
                function init(){
                    aImg.src=arrImgUrl[num];
                    aP.innerHTML=arrText[num];
                    aSpan.innerHTML=num+1+'/'+arrImgUrl.length;
                    aLi[num].className='active';
                }
                init();
                function autoTab(){
                    timer=setInterval(function(){
                    currentIndex++;
                    if(currentIndex==arrImgUrl.length){
                        currentIndex=0;
                    }
                    for(var i=0;i<arrImgUrl.length;i++){
                        aLi[i].className=''
                    }
                    aP.innerHTML=arrText[currentIndex];
                    aSpan.innerHTML=currentIndex+1+'/'+arrImgUrl.length;
                    aLi[currentIndex].className='active';
                    aImg.src=arrImgUrl[currentIndex]
 
                    },1000)
                }
                autoTab();
                 
                for(var i=0;i<aLi.length;i++){
                    aLi[i].index=i;
                    aLi[i].οnmοuseοver=function(){
                        clearInterval(timer);
                    }
                    aLi[i].οnmοuseοut=function(){
                            autoTab();
                    }
                    aLi[i].οnclick=function(){
                        for(var i=0;i<aLi.length;i++){
                            aLi[i].className='';
                        }
                        currentIndex=this.index;
                        this.className='active';
                        aImg.src=arrImgUrl[this.index]
                        aP.innerHTML=arrText[this.index];
                        //aSpan.innerHTML=+'/'+arrImgUrl.length;
                    }
                }
        };
    </script>
</head>
<body>
    <div id="wrap">
        <img/>
        <span></span>
        <p></p>
        <ul></ul>
    </div>
</body>
</html>

北化

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片像幻灯片一样切换

Document body,ul,p {margin: 0;padding: 0;background: #f23;} img {border: none;vertical-align: top;width: 400px;height: 500px;} li {list-style: none;vertical-align: top
复制链接

扫一扫

专栏目录