轮播特效

首页 > 代码库 > 轮播特效

2024-08-20 05:44:38 219人阅读

实现效果：下面的图标随轮播图片一起滚动，点击下面图标可以换图。

head里，样式表：

<style type="text/css">
*{ margin:0px; padding:0px;}
#tu{ width:800px; height:500px; position:relative; overflow:hidden; margin:30px auto;}
#ta{ width:4000px; height:500px; margin-left:0px;}
.lie{width:800px; height:500px; background-size:contain;}
#tu2{ width:612px; height:79px; position:relative; margin:20px auto;}
#lie1{width:90px; height:80px; position:relative; float:left; cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png); background-repeat:no-repeat;}
#lie2{width:90px; height:80px; position:relative; float:left;  cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png); background-repeat:no-repeat;}
#lie3{width:90px; height:80px; position:relative; float:left;  cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png); background-repeat:no-repeat;}
#lie4{width:90px; height:80px; position:relative; float:left;  cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png); background-repeat:no-repeat;}
#lie5{width:90px; height:80px; position:relative; float:left;  cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png); background-repeat:no-repeat;}

</style>

body里：

<div id="tu" onm ouseover="pause()" onm ouseout="contin()">
     <table id="ta" cellpadding="0" cellspacing="0">
        <tr height="500px">
        <td class="lie"><img src="新建文件夹/Images/tr_img_1.jpg" width="800px" /></td>
        <td class="lie"><img src="新建文件夹/Images/tr_img_2.jpg" width="800" /></td>
        <td class="lie"><img src="新建文件夹/Images/tr_img_3.jpg" width="800px"/></td>
        <td class="lie"><img src="新建文件夹/Images/tr_img_4.jpg" width="800" /></td>
        <td class="lie"><img src="新建文件夹/Images/tr_img_5.jpg" width="800" /></td>
        </tr>
     </table>
     
</div>
<div id="tu2">        
     <div id="lie1" onclick="dianji(1)"></div>
     <div id="lie2" onclick="dianji(2)"></div>
     <div id="lie3" onclick="dianji(3)"></div>
     <div id="lie4" onclick="dianji(4)"></div>
     <div id="lie5" onclick="dianji(5)"></div>
</div>

js里：

<script language="javascript">

document.getElementById("ta").style.marginLeft="0px";
function huan()
{
    var tp=document.getElementById("ta");
    var a=parseInt(tp.style.marginLeft);
    if(a<=-3200)
    {
        tp.style.marginLeft="0px";
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01_y.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
    }
    else
    {
        tp.style.marginLeft=(a-800)+"px";
        if(a==-800)
        {dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03_y.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";}
        if(a==-1600)
        {dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04_y.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";}
        if(a==-2400)
        {dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05_y.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";}
        if(a==0)
        {dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02_y.png)";}
    
    }
    id=window.setTimeout("huan()",3000);
}
var id=window.setTimeout("huan()",3000);

function pause()
{
    window.clearTimeout(id);
}
function contin()
{
    id = window.setTimeout("huan()",3000);    
}

var tp=document.getElementById("ta");
var dj=new Array;
dj[0]=document.getElementById("lie1");
dj[1]=document.getElementById("lie2");
dj[2]=document.getElementById("lie3");
dj[3]=document.getElementById("lie4");
dj[4]=document.getElementById("lie5");
dj[0].style.borderColor="red";
function dianji(i)
{
    if(i==1)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01_y.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
        tp.style.marginLeft="0px";
    }
    else if(i==2)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02_y.png)";
        tp.style.marginLeft="-800px";
    }
    else if(i==3)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03_y.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
        tp.style.marginLeft="-1600px";
    }
    else if(i==4)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04_y.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
        tp.style.marginLeft="-2400px";
    }
    else if(i==5)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05_y.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
        tp.style.marginLeft="-3200px";
    }
}




</script>

轮播特效

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 轮播特效

轮播特效

看完仍有疑问？有类似问题直接问程序猿