图片轮播

无缝轮播不会出现首位切图幅度大
<%@ 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 {
             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 {
             32px;
            height: 32px;
            position: absolute;
            top: 230px;
            z-index: 99;
        }

        #left {
            left: 10px;
        }

        #right {
            right: 10px;
        }

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

        .x1 {
             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=" 800px;">
                        <img src="Images/1.jpg" /></td>
                    <td style=" 800px;">
                        <img src="Images/2.jpg" /></td>
                    <td style=" 800px;">
                        <img src="Images/3.jpg" /></td>
                    <td style=" 800px;">
                        <img src="Images/4.jpg" /></td>
                    <td style=" 800px;">
                        <img src="Images/5.jpg" /></td>
                    <td style=" 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>
相关阅读:
1. 单个文件下载
 16. js方法传多个参数的实例
 15. combobox、combotree获取显示值和value值方式
 38. 查看oracle表空间存放的位置（查看所有的数据库文件的存放位置）
Vuejs 高仿饿了么外卖APP 百度云视频教程下载
 mysql 5.7 百度云网盘下载
 mysql 5.1 下载地址百度云网盘下载
 Zookeeper学习笔记-概念介绍
 JavaScript工程师都应懂的33个概念
 IIS部署asp.net MVC 出现错误 403.14-Forbidden解决办法
原文地址：https://www.cnblogs.com/shadow-wolf/p/6277614.html