前端全栈大佬是如何使用javaScript实现一个无缝轮播(最终版)

81 阅读1分钟

效果图:

代码如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>优化后的无缝轮播图</title>
    <style>
        body{-webkit-user-select: none; }
        ul,li{
            list-style: none;
        }
        #outer{
            width: 400px;
            height: 300px;
            position: relative;
            margin: 50px auto;
            overflow: hidden;
            cursor: pointer;
        }
        #inner{
            width: 2000px;
            height: 300px;
            position: absolute;
            left:0;
        }
        #inner div{
            width: 400px;
            height: 300px;
            float: left;
        }
        #ulHead{
            position: absolute;
            top: 250px;