大图轮播-带有图标标记

Posted 2020-08-21 易小川

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>
#datu
{
    width:800px;
    height:500px;
    position:relative;
    margin:20px auto;
    border:2px solid red;
    overflow:hidden;}
#ta
{
    position:relative;
    left:0px;
    top:0px;
    transition:0.7s;}
#suo
{
    width:520px;
    height:70px;
    position:relative;
    margin:20px auto;
    border:2px solid blue;
    line-height:70px;}
.suo
{
    width:90px;
    height:50px;
    position:relative;
    border:1px solid yellow;
    float:left;
    margin-left:10px;
    margin-top:10px;}
</style>
</head>

<body>
<div id="datu" onmouseover="Zhi()" onmouseout="Li()" >
    <table id="ta" cellpadding="0" cellspacing="0">
        <tr height="500">
            <td><img src="images/1.jpg" width="800" /></td>
            <td><img src="images/2.jpg" width="800" /></td>
            <td><img src="images/3.jpg" width="800" /></td>
            <td><img src="images/4.jpg" width="800" /></td>
            <td><img src="images/5.jpg" width="800" /></td>
        </tr>
    </table>
</div>
<div id="suo"  onmouseover="Zhi()" onmouseout="Li()">
    <div class="suo" biao="1"><img src="images/1.jpg" width="90" height="50" /></div>
    <div class="suo" biao="2"><img src="images/2.jpg" width="90" height="50" /></div>
    <div class="suo" biao="3"><img src="images/3.jpg" width="90" height="50" /></div>
    <div class="suo" biao="4"><img src="images/4.jpg" width="90" height="50" /></div>
    <div class="suo" biao="5"><img src="images/5.jpg" width="90" height="50" /></div>
</div>
</body>
</html>
<script>
document.getElementById("ta").style.left="0px";
document.getElementsByClassName("suo").item(0).style.borderColor="red";
var biaosuo=1;

var suo=document.getElementsByClassName("suo");
for(var i=0;i<suo.length;i++)
{
    suo.item(i).onclick=function(){
            var biao = this.getAttribute("biao");
            for(var i = 0;i<5;i++)
            {
                if(i==biao-1)
                {
                    document.getElementsByClassName("suo").item(i).style.borderColor="red";    
                }
                else
                {
                    document.getElementsByClassName("suo").item(i).style.borderColor="yellow";    
                }
                if(biao==1)
                {
                    document.getElementById("ta").style.left="0px";    
                }
                else if(biao==2)
                {
                    document.getElementById("ta").style.left="-800px";    
                }
                else if(biao==3)
                {
                    document.getElementById("ta").style.left="-1600px";    
                }
                else if(biao==4)
                {
                    document.getElementById("ta").style.left="-2400px";    
                }
                else
                {
                    document.getElementById("ta").style.left="-3200px";    
                }    
            }
        }    
}

function Change()
{
    var ta = parseInt(document.getElementById("ta").style.left);
    if(ta>-3200)
    {
        document.getElementById("ta").style.left=(ta-800)+"px";
        ta=ta-800;
        if(ta==-800)
        {
            biaosuo=2;
        }
        else if(ta==-1600)
        {
            biaosuo=3;
        }
        else if(ta==-2400)
        {
            biaosuo=4;
        }
        else if(ta=-3200)
        {
            biaosuo=5;
        }
    }
    else
    {
        document.getElementById("ta").style.left="0px";
        biaosuo=1;
    }
    for(var i = 0;i<5;i++)
    {
        if(i==biaosuo-1)
        {
            document.getElementsByClassName("suo").item(i).style.borderColor="red";    
        }
        else
        {
            document.getElementsByClassName("suo").item(i).style.borderColor="yellow";    
        }    
    }
    shi=window.setTimeout("Change()",3000);    
}
var shi =window.setTimeout("Change()",3000);
function Zhi()
{
    window.clearTimeout(shi);    
}
function Li()
{
    shi=window.setTimeout("Change()",1000);    
}
</script>

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

大图轮播

带有标记的Android谷歌地图片段

[DBW]大图轮播，可通过两种方法实现

swiper轮播，小轮播图，点击变大轮播图（小图变大图）

JQuery大图轮播

带有反应传单的自定义标记图标