很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出。

 

原理

  将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播。

 

步骤一:建立html基本布局

如下所示:

万码学堂,电脑培训,计算机培训,Java培训,JavaEE开发培训,青岛软件培训,软件工程师培训

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <div class="container">
        <div class="wrap" style="left:-600px;">
            <img src="./img/5.jpg" alt="">
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt="">
            <img src="./img/5.jpg" alt="">
           &nb