felayman——图片轮播图

最新推荐文章于 2021-12-30 09:58:37 发布

iteye_20659

最新推荐文章于 2021-12-30 09:58:37 发布

阅读量213

点赞数

文章标签： javascript ViewUI

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>图片轮播图</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #show{
            border: 1px solid olivedrab;
            width: 400px;
            top: 10%;
            left: 40%;
            position: absolute;
        }
        img{
            margin: 0;
            width: 400px;
            height: 240px;
        }
        li{
            position: relative;
            left: 30%;
            margin-top: 4px;
            margin-bottom: 10px;
            display: inline;
            width: 30px;
            height: auto;
            background: #eee;
            border: 1px solid gray;
            float: left;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
<!--图片播放区域-->
<div id="show">
    <p class="now"><img title="我的图片" src="one.jpg"/></p>
    <p style="display:none;"><img src="two.jpg"/></p>
    <p style="display:none;"><img src="three.jpg" /></p>
    <p style="display:none;"><img src="four.jpg" /></p>
    <p style="display:none;"><img src="five.jpg" /></p>
<!--用户控制区域-->
    <ul>
        <li class="now">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<script type="text/javascript">
    //获取切换按钮
    var tags =  document.getElementById("show").getElementsByTagName("li");
     //获取切换内容节点
     var cats = document.getElementById("show").getElementsByTagName("p");
     //当前显示图片的标签号
     var current;
     //3秒图片进行更换
     var time=3000;
     //初始化所有标签的样式
     function disAll(){
     for(var i=0;i<tags.length;i++){
     tags[i].className="";
     cats[i].className="";
     cats[i].style.display="none";
     }
     }
    //获取当前播放的图片
     function setNow(){
     for(var i=0;i<tags.length;i++){
     if(tags[i].className=="now"){
     current=i;
     }
     }
     }
     //设置手动切换
     for(var j=0;j<tags.length;j++){
     tags[j].οnmοuseοver=function(){
     clearInterval(h);
     disAll();
     this.className="now";
     setNow();
     cats[current].style.display="block";
     cats[current].className="now";
     }
     tags[j].onmouseout = function(){
     setNow();
     h=setInterval("goNext()",3000);
     }
     }
    /*
     //设置自动播放
     function goNext(){
     setNow();
     current+=1;
     if(current>=parseInt(tags.length)){
     current=0;
     disAll();
     cats[0].style.display="block";
     tags[0].className="now";
     cats[0].className="now";
     }else{
     disAll();
     cats[current].style.display="block";
     cats[current].className="now";
     tags[current].className="now";
     }
     }
    var h = setInterval("goNext()",time);
     */
</script>
</body>
</html>