zoukankan      html  css  js  c++  java
  • 轮播特效

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

    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" onmouseover="pause()" onmouseout="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>
  • 相关阅读:
    Python 中的Lock与RLock
    Python 自定义三方库
    Python 通过RSA实现license验证设备指纹与有效期
    Python 通过wmi获取Window服务器硬件信息
    Java List对象集合按对象属性分组、分组汇总、过滤等操作示例
    BrokenPipeError: [Errno 32] Broken pipe
    Python 通过dmidecode获取Linux服务器硬件信息
    Linux 解决E: Sub-process /usr/bin/dpkg returned an error code (1)错误
    Ubuntu 增加新用户并赋予root权限及免密的方法
    关于smali插桩
  • 原文地址:https://www.cnblogs.com/wy1992/p/6054874.html
Copyright © 2011-2022 走看看