文档章节

原生JS代码实现图片轮播功能

临江仙卜算子
 临江仙卜算子
发布于 10/17 20:29
字数 621
阅读 14
收藏 0

index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="wrap" style="left: -600px;">
            <img src="./image/img_5.jpg" alt="5">
            <img src="./image/img_1.jpg" alt="1">
            <img src="./image/img_2.jpg" alt="2">
            <img src="./image/img_3.jpg" alt="3">
            <img src="./image/img_4.jpg" alt="4">
            <img src="./image/img_5.jpg" alt="5">
            <img src="./image/img_1.jpg" alt="1">
        </div>
        <div class="buttons">
            <span class="on"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
        <a href="javascript:void (0);" rel="external nofollow" class="arrow arrow_left">
            <</a> <a href="javascript:void (0);" rel="external nofollow" class="arrow arrow_right">>
        </a>
    </div>
    <script src="carousel.js"></script>
</body>

</html>

style.css

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

.container {
    position: relative;
    width: 600px;
    height: 400px;
    margin: 100px auto 0 auto;
    box-shadow: 0 0 5px rgb(180, 182, 180);
    overflow: hidden;
}

.container .wrap {
    position: absolute;
    width: 4200px;
    height: 400px;
    z-index: 1;
}

.container .wrap img {
    float: left;
    width: 600px;
    height: 400px;
}

.container .buttons {
    position: absolute;
    right: 5px;
    bottom: 30px;
    width: 120px;
    height: 10px;
    z-index: 2;
}

.container .buttons span {
    margin-left: 5px;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgb(211, 212, 211);
    text-align: center;
    color: white;
    cursor: pointer;
}

.container .buttons span.on {
    background-color: rgb(151, 150, 150);
}

.container .arrow {
    position: absolute;
    top: 40%;
    color: rgb(179, 182, 179);
    padding: 0px 15px;
    border-radius: 50%;
    font-size: 50px;
    z-index: 2;
    display: none;
}

.container .arrow_left {
    left: 10px;
}

.container .arrow_right {
    right: 10px;
}

.container:hover .arrow {
    display: block;
}

.container .arrow:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

carousel.js

// 下一页
function next_pic(wrap) {
    index++;
    if (index > 4) {
        index = 0;
    }
    showCurrentDot(wrap);
    var newLeft;
    if (wrap.style.left === "-3600px") {
        newLeft = -1200;
    } else {
        newLeft = parseInt(wrap.style.left) - 600;
    }
    wrap.style.left = newLeft + "px";
}
// 上一页
function prev_pic(wrap) {
    index--;
    if (index < 0) {
        index = 4;
    }
    showCurrentDot(wrap);
    var newLeft;
    if (wrap.style.left === "0px") {
        newLeft = -2400;
    } else {
        newLeft = parseInt(wrap.style.left) + 600;
    }
    wrap.style.left = newLeft + "px";
}
// 定时器 --- 自动播放
let timer = null;

function autoPlay(wrap) {
    timer = setInterval(function () {
        next_pic(wrap);
    }, 2000);
}

// 圆点导航
let index = 0;
let dots = document.getElementsByTagName("span");
// 显示当前是第几张图片
function showCurrentDot(wrap) {
    for (var i = 0, len = dots.length; i < len; i++) {
        dots[i].className = "";
    }
    dots[index].className = "on";
}
//最开始和最后的照片修整
for (var i = 0, len = dots.length; i < len; i++) {
    (function (i) {
        let wrap = document.querySelector(".wrap");
        dots[i].onclick = function () {
            var dis = index - i;
            if (index == 4 && parseInt(wrap.style.left) !== -3000) {
                dis = dis - 5;
            }
            //和使用prev和next相同,在最开始的照片5和最终的照片1在使用时会出现问题,导致符号和位数的出错,做相应地处理即可
            if (index == 0 && parseInt(wrap.style.left) !== -600) {
                dis = 5 + dis;
            }
            wrap.style.left = (parseInt(wrap.style.left) + dis * 600) + "px";
            index = i;
            showCurrentDot(wrap);

        }
    })(i);
}

function init() {
    var wrap = document.querySelector(".wrap");
    var next = document.querySelector(".arrow_right");
    var prev = document.querySelector(".arrow_left");
    // 当鼠标点击上下箭头
    next.onclick = function () {
        next_pic(wrap);
    }
    prev.onclick = function () {
        prev_pic(wrap);
    }
    //启动定时器
    autoPlay(wrap);
    // 鼠标滑过 取消自动播放
    var container = document.querySelector(".container");
    container.onmouseenter = function () {
        clearInterval(timer);
    }
    container.onmouseleave = function () {
        autoPlay(wrap);
    }
}
window.addEventListener('load', init, false);

image

img_1.jpg

img_2.jpg

img_3.jpg

img_4.jpg

img_5.jpg

 

 

 

© 著作权归作者所有

共有 人打赏支持
临江仙卜算子
粉丝 14
博文 280
码字总数 215390
作品 0
郑州
CEO
私信 提问
手把手教你封装JavaScript插件

我们可能已经用过很多JS插件,比如著名的轮播图插件Swiper.js,滚动条插件iScroll.js等等,用起来非常方便,大大提高了我们的工作效率。那么它们基本实现原理是怎样的呢?我们又该如何DIY一个...

前端王睿
08/29
0
0
手把手教你用原生JavaScript造轮子(2)——轮播图

通过上一篇文章的学习,我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图,希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Let's ...

csdoker
08/12
0
0
封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放。本篇文章的主要目的是分享封装插件的思路。 轮播图的我一开始是写成非插件形式实现的效...

daisy,gogogo
08/18
0
0
记一个JavaScript图片轮播思路与代码

说在前头 喜欢并学习前端,一路摸爬滚打过来,现在算算也快满一年的,每天或多或少都会来“拜读”大家的写的文章,学习与感悟了不少,作为一名要变的更强的前端小哥哥,在这个节点上,也想写...

柚子先生
08/06
0
0
授人以渔式解析原生JS写轮播图

需求与分析 需求: 循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片。鼠标放到轮播图的图片上时不再自动轮播并且左...

Sadhu
10/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

MariaDB 服务器在 MySQL Workbench 备份数据的时候出错如何解决

服务器是运行在 MariaDB 10.2 上面的,在使用 MySQL Workbench 出现错误: mysqldump: Couldn't execute 'SELECT COLUMN_NAME, JSON_EXTRACT(HISTOGRAM, '$."number-of-buckets-specified"'......

honeymose
今天
1
0
apache顶级项目(二) - B~C

apache顶级项目(二) - B~C https://www.apache.org/ Bahir Apache Bahir provides extensions to multiple distributed analytic platforms, extending their reach with a diversity of s......

晨猫
今天
6
0
day152-2018-11-19-英语流利阅读

“超级食物”竟然是营销噱头? Daniel 2018-11-19 1.今日导读 近几年来,超级食物 superfoods 开始逐渐走红。不难发现,越来越多的轻食餐厅也在不断推出以超级食物为主打食材的健康料理,像是...

飞鱼说编程
今天
11
0
SpringBoot源码:启动过程分析(二)

接着上篇继续分析 SpringBoot 的启动过程。 SpringBoot的版本为:2.1.0 release,最新版本。 一.时序图 一样的,我们先把时序图贴上来,方便理解: 二.源码分析 回顾一下,前面我们分析到了下...

Jacktanger
昨天
4
0
Apache防盗链配置,Directory访问控制,FilesMatch进行访问控制

防盗链配置 通过限制referer来实现防盗链的功能 配置前,使用curl -e 指定referer [root@test-a test-webroot]# curl -e "http://www.test.com/1.html" -x127.0.0.1:80 "www.test.com/1.jpg......

野雪球
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部