图片轮播

Posted 2020-08-27 小太白

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片轮播相关的知识，希望对你有一定的参考价值。

<!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>无标题文档</title>
<style type="text/css">
#tupian{ width:184px; height:279px;}
.tu{ display:none;}
#yuan{ width:200px; height:20px;}
.yuan1{width:15px; height:15px; border:2px solid #00F; float:left; margin-left:10px;border-radius:100px; background-color:#FFF}
.yuan1:hover{ cursor:pointer}



</style>
</head>

<body>

<div id="tupian">
    <img style="display:block" class="tu" src="../110/冰霜奇迹（www.10088mu.com）奇迹私服，千人在线，特色奇迹，玩家赚钱的奇迹私服_files/r2.jpg"/>
    <img class="tu" src="../110/冰霜奇迹（www.10088mu.com）奇迹私服，千人在线，特色奇迹，玩家赚钱的奇迹私服_files/img3.jpg"/>
    <img class="tu" src="../110/冰霜奇迹（www.10088mu.com）奇迹私服，千人在线，特色奇迹，玩家赚钱的奇迹私服_files/r3.jpg"/>
    <img class="tu" src="../110/冰霜奇迹（www.10088mu.com）奇迹私服，千人在线，特色奇迹，玩家赚钱的奇迹私服_files/r4.jpg"/>
    <img class="tu" src="../110/冰霜奇迹（www.10088mu.com）奇迹私服，千人在线，特色奇迹，玩家赚钱的奇迹私服_files/r5.jpg"/>
    <img class="tu" src="../110/冰霜奇迹（www.10088mu.com）奇迹私服，千人在线，特色奇迹，玩家赚钱的奇迹私服_files/r6.jpg"/>
</div>
<br />
<div id="yuan">
<div ba="0" class="yuan1" onclick="xianshi(this,‘0‘)"></div>
<div ba="1" class="yuan1" onclick="xianshi(this,‘1‘)"></div>
<div ba="2" class="yuan1" onclick="xianshi(this,‘2‘)"></div>
<div ba="3" class="yuan1" onclick="xianshi(this,‘3‘)"></div>
<div ba="4" class="yuan1" onclick="xianshi(this,‘4‘)"></div>
<div ba="5" class="yuan1" onclick="xianshi(this,‘5‘)"></div>
</div>
</body>
</html>
<script type="text/jscript">



var sy = 0;

window.setInterval("LunBo()",1000);

function LunBo()
{
    var tu = document.getElementsByClassName("tu");
     
     sy++;
     
     
    if(sy>=tu.length)
    {
        sy=0;    
    }
    for(var i=0;i<tu.length;i++)
    {
        tu[i].style.display = "none";    
    }
    
    tu[sy].style.display = "block";

    var yuan = document.getElementsByClassName("yuan1");
    
    for(var j=0;j<yuan.length;j++)
    {
        if(yuan[j].getAttribute("ba")==sy)
        {
            yuan[j].style.borderColor = "green";
        }
        else
        {
            yuan[j].style.borderColor = "red";
        }
    }
}

/*var sy = 0;

//间隔调用
window.setInterval("Huan()",3000);

//调一下换一个
function Huan()
{
    var img = document.getElementsByClassName("tu");
    sy++; //索引加1
    
    //判断是否到了最后一张
    if(sy>=img.length)
    {
        sy=0;
    }
    
    //让所有隐藏
    for(var i=0;i<img.length;i++)
    {
        img[i].style.display="none";
    }
    //让下一张显示
    img[sy].style.display="block";
    
    //换圆点的样式
    var yuan = document.getElementsByClassName("yuan1");
    
    for(var j=0;j<yuan.length;j++)
    {
        if(yuan[j].getAttribute("ba")==sy)
        {
            yuan[j].style.borderColor = "green";
        }
        else
        {
            yuan[j].style.borderColor = "red";
        }
    }
}*/

function xianshi(t,s)
{
    sy=s;
    
    var img = document.getElementsByClassName("tu");
    //让所有隐藏
    for(var i=0;i<img.length;i++)
    {
        img[i].style.display="none";
    }
    //让下一张显示
    img[s].style.display="block";
    
    //改自身样式
    var yuan = document.getElementsByClassName("yuan1");
    
    for(var j=0;j<yuan.length;j++)
    {
        yuan[j].style.borderColor="red";
    }
    
    t.style.borderColor="green";
}
</script>

以上是关于图片轮播的主要内容，如果未能解决你的问题，请参考以下文章

网页设计图片轮播，将鼠标放在图片上，图片会自动播放，代码怎么改？

轮播图片高效图片轮播，两个imageView实现