文档章节

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

临江仙卜算子
 临江仙卜算子
发布于 2018/10/17 20:29
字数 621
阅读 19
收藏 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

 

 

 

© 著作权归作者所有

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

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

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

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

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

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

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

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

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

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

Sadhu
2018/10/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Windows命令行杀死占用端口的进程

假如要查看的端口号是80: netstat -aon|findstr "80" 这个时候我们会看到下面的 TCP 127.0.0.1:80 0.0.0.0:0 LISTENING 2448 最后,杀死进程 taskkill /f /t......

hengbao5
7分钟前
0
0
c++ 定义新的异常

#include <iostream> #include <exception> using namespace std; struct MyException : public exception { const char * what () const throw () { return "C++ Exception"; } }; int main......

天王盖地虎626
今天
3
0
PDMan-2.1.1 发布:用心开源,免费的国产数据库建模工具(春节前最后一个版本)

一、软件介绍 PDMan 是一款开源免费的数据库模型建模工具,是PowerDesigner之外另一种更好的选择。支持Windows,Mac,Linux等操作系统,具有上手容易,使用简单的特点。 2018年获得码云GVP (Gi...

O龙猫O
今天
20
0
OSChina 周二乱弹 —— 以后我偷小鱼干养你

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @庞巴哥 :只有这节奏瞬间变得轻松。。。。。。。。。分享Talking Eyes的单曲《In the sun (Extended Version)》: 《In the sun (Extended Ve...

小小编辑
今天
629
10
多表查询

第1章 多表关系实战 1.1 实战1:省和市  方案1:多张表,一对多  方案2:一张表,自关联一对多 1.2 实战2:用户和角色 (比如演员和扮演人物)  多对多关系 1.3 实战3:角色和权限 (比如...

stars永恒
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部