js无缝轮播图(手动轮播+自动轮播+定时器+过渡动画)

喜欢ヅ旅行 2022-11-25 10:20 456阅读 0赞

为了方便大家使用，我把Html，CSS，以及js 和用到图片都放在下面了。\*\*

> 特此说明：这个无缝轮播的代码是可以直接复制粘贴使用，嘻嘻！

1.先新建一个文件，随意命名即可。  
2.然后打开文件夹，再新建。  
3.把文章底部的5张图片保存到images文件夹里面。  
4.用你的编辑器打开这个文件夹  
5.剩下的就是复制粘贴到对应的里面就可以了  
![在这里插入图片描述][20200808091441862.png]  
**Html和Css**  
这里再说一下我是直接把css样式直接写在了style里面，这个没有引入，js的代码比较长，直接外部引入的js，就是这两句

**Html和Css代码在这里开始**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="无缝轮播.js"></script>
        <script src="animate.js"></script>
        <style>
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
    
            .banner {
                position: relative;
                width: 1000px;
                height: 428px;
                margin: 100px auto;
                cursor: pointer;
                /* overflow: hidden; */
            }
    
            .banner .ul {
                position: absolute;
                height: 428px;
              
                
            }
    
            .banner .ul img {
                float: left;
                width: 1000px;
                height: 428px;
            }
    
            .left,
            .right {
                position: absolute;
                top: 50%;
                width: 50px;
                height: 50px;
                font-size: 40px;
                margin-top: -25px;
                color: #fff;
                cursor: pointer;      
                text-align: center;
                line-height: 40px;
                display: none;
                /* right: 10px;
                left: 10px; */
            }
    
            .left:hover,
            .right:hover {
                color: #ff6700;
                background-color: #eee;
            }
    
            .banner .left {
                left: 10px;
            }
    
            .banner .right {
                right: 10px;
            }
    
            .curcle {
                position: absolute;
                right: 0;
                bottom: 5px;
            }
    
            .curcle li {
                float: left;
                width: 10px;
                height: 10px;
                border: 3px solid #333;
                border-radius: 50%;
                color: #000;
                background-color: #fff;
                margin: 5px;
                cursor: pointer;
            }
            .curcle .select {
                float: left;
                width: 10px;
                height: 10px;
                border: 3px solid #fff;
                border-radius: 50%;
                color: #000;
                background-color: #ff6700;
                margin: 5px;
                cursor: pointer;
            }
        </style>
    </head>
    
    <body>
        <div class="banner">
            <div class="ul">
                <img src="images/1.jpg" alt="">
                <img src="images/2.jpg" alt="">
                <img src="images/3.jpg" alt="">
                <img src="images/4.jpg" alt="">
                <img src="images/5.jpg" alt="">
    
            </div>
            <div class="curcle"></div>
            <div class="left">‹</div>
            <div class="right">›</div>
    
    </body>
    
    </html>

这里就是js的代码了，一共两个，一个叫**无缝轮播.js**,另一个叫**animate.js**

## 无缝轮播.js ##

## ainimate.js ##

下面是用到的轮播图片以及我的样式目录  
1.jpg  
![1.jpg][]  
2.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw_size_16_color_FFFFFF_t_70]  
3.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw_size_16_color_FFFFFF_t_70 1]  
4.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw_size_16_color_FFFFFF_t_70 2]  
5.jpg  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw_size_16_color_FFFFFF_t_70_pic_center]

[20200808091441862.png]: /images/20221124/e908c95fbd2e48c4b4b734024ed4d0a7.png
[1.jpg]: /images/20221124/df80fd18f36e4546b87dd72255cceba1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw_size_16_color_FFFFFF_t_70]: /images/20221124/fc4a2cac421b4c66abf3fc79d988816b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw_size_16_color_FFFFFF_t_70 1]: /images/20221124/30d83d8678e94f9bbbee7eec0490089f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw_size_16_color_FFFFFF_t_70 2]: /images/20221124/45846c9b03234713ba71b9965ab0048a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDA2NzM0Nw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/863809875c7e4a8490e0563bec3119a9.png