图片轮播

无缝轮播不会出现首位切图幅度大
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #gundong {
            width: 800px;
            height: 500px;
            position: relative;
            margin: auto;
            overflow: hidden;
        }

        #ta {
            margin-left: 0px;
            transition: 0.7s;
            border: 0;
            margin: 0;
            border-spacing: 0;
            border-collapse:collapse;
        }

            #ta td {
                padding: 0;
            }

        .ir {
            width: 32px;
            height: 32px;
            position: absolute;
            top: 230px;
            z-index: 99;
        }

        #left {
            left: 10px;
        }

        #right {
            right: 10px;
        }

        .xiao {
            width: 1080px;
            height: 130px;
            position: relative;
            top: 50px;
            margin:auto;
        }

        .x1 {
            width: 200px;
            height: 125px;
            position: relative;
            float: left;
            margin-left: 10px;
            border: 3px solid #999;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">

        <div id="gundong" onmouseover="pause()" onmouseout="conti()">
            <table id="ta">
                <tr style="height: 500px;">
                    <td style="width: 800px;">
                        <img src="Images/1.jpg" /></td>
                    <td style="width: 800px;">
                        <img src="Images/2.jpg" /></td>
                    <td style="width: 800px;">
                        <img src="Images/3.jpg" /></td>
                    <td style="width: 800px;">
                        <img src="Images/4.jpg" /></td>
                    <td style="width: 800px;">
                        <img src="Images/5.jpg" /></td>
                    <td style="width: 800px;">
                        <img src="Images/1.jpg" /></td>
                </tr>
            </table>
            <div class="ir" id="left" onclick="dong(-1)">
                <img src="Images/left.png" /></div>
            <div class="ir" id="right" onclick="dong(1)">
                <img src="Images/right.png" /></div>
        </div>
        <div class="xiao">
            <div id="d1" class="x1" onclick="dian(1)" style="border-color: #F00">
                <img width="200" src="Images/1.jpg" /></div>
            <div id="d2" class="x1" onclick="dian(2)">
                <img width="200" src="Images/2.jpg" /></div>
            <div id="d3" class="x1" onclick="dian(3)">
                <img width="200" src="Images/3.jpg" /></div>
            <div id="d4" class="x1" onclick="dian(4)">
                <img width="200" src="Images/4.jpg" /></div>
            <div id="d5" class="x1" onclick="dian(5)">
                <img width="200" src="Images/5.jpg" /></div>
        </div>

    </form>
</body>
</html>
<script>
    function huan() {
        var tu = document.getElementById("ta");
        var a = parseInt(tu.style.marginLeft);
        if (a <= -4000) {
            tu.style.marginLeft = "0px";
            tu.style.transition = "0s";
            shi = window.setTimeout("huan()", 0);
           
        }
        else {
            tu.style.transition = "0.7s";
            tu.style.marginLeft = (a - 800) + "px";
            shi = window.setTimeout("huan()", 1000);
            qie(parseInt(tu.style.marginLeft));
        }
       
      
    }
    var shi = window.setTimeout("huan()", 1000)
    function pause() {
        window.clearTimeout(shi);
    }
    function qie(a) {
        if (a == 0||a==-4000) {
            document.getElementById("d1").style.borderColor = "#F00";
            document.getElementById("d2").style.borderColor = "#999";
            document.getElementById("d3").style.borderColor = "#999";
            document.getElementById("d4").style.borderColor = "#999";
            document.getElementById("d5").style.borderColor = "#999";
        }
        else if (a == -800) {
            document.getElementById("d1").style.borderColor = "#999";
            document.getElementById("d2").style.borderColor = "#F00";
            document.getElementById("d3").style.borderColor = "#999";
            document.getElementById("d4").style.borderColor = "#999";
            document.getElementById("d5").style.borderColor = "#999";
        }
        else if (a == -1600) {
            document.getElementById("d1").style.borderColor = "#999";
            document.getElementById("d2").style.borderColor = "#999";
            document.getElementById("d3").style.borderColor = "#F00";
            document.getElementById("d4").style.borderColor = "#999";
            document.getElementById("d5").style.borderColor = "#999";
        }
        else if (a == -2400) {
            document.getElementById("d1").style.borderColor = "#999";
            document.getElementById("d2").style.borderColor = "#999";
            document.getElementById("d3").style.borderColor = "#999";
            document.getElementById("d4").style.borderColor = "#F00";
            document.getElementById("d5").style.borderColor = "#999";
        }
        else if (a == -3200) {
            document.getElementById("d1").style.borderColor = "#999";
            document.getElementById("d2").style.borderColor = "#999";
            document.getElementById("d3").style.borderColor = "#999";
            document.getElementById("d4").style.borderColor = "#999";
            document.getElementById("d5").style.borderColor = "#F00";
        }
    }
    function dian(n) {
        var tu = document.getElementById("ta");
        if (n == 1) { tu.style.marginLeft = "0px"; }
        else if (n == 2) { tu.style.marginLeft = "-800px"; }
        else if (n == 3) { tu.style.marginLeft = "-1600px"; }
        else if (n == 4) { tu.style.marginLeft = "-2400px"; }
        else if (n == 5) { tu.style.marginLeft = "-3200px"; }
        qie(parseInt(tu.style.marginLeft));
    }
    document.getElementById("ta").style.marginLeft = "0px";
    function conti() {
        shi = window.setTimeout("huan()", 3000)
    }
    function dong(m) {
        var tu = document.getElementById("ta");
        var a = parseInt(tu.style.marginLeft);
        if (m == -1) {
            if (a == 0) {
                tu.style.marginLeft = -3200 + "px";
            }
            else {
                tu.style.marginLeft = (a + 800) + "px";
            }
        }
        else {
            if (a == -3200)
            { tu.style.marginLeft = 0 + "px"; }
            else
            { tu.style.marginLeft = (a - 800) + "px"; }
        } qie(parseInt(tu.style.marginLeft));
    }
</script>
posted @ 2017-01-12 11:59 孤丷狼阅读(135) 评论(0) 编辑收藏举报
刷新页面返回顶部