javascript详解，提供原生js轮轮播

前端编程 javascript

创建时间:2019-09-01 16:22

阅读:

说道js大家并不陌生，今天我就给大家讲解一下如何掌握好js，以及提供给大家原生的js代码，不过原生的js代码并不好看，需要的小伙伴可以去看一下switch轮播模板。
一、javascript介绍
二、js学习方法
三、js实战
四、原生js轮播代码
html代码

说道js大家并不陌生，今天我就给大家讲解一下如何掌握好js，以及提供给大家原生的js代码，不过原生的js代码并不好看，需要的小伙伴可以去看一下switch轮播模板。

一、javascript介绍

我们正常看到的网站，那些个花里胡哨的动画，点击之后会出现一些什么好玩的特效啊等等，这些都是Js的功劳。废话不多说，直接教小伙伴们如果去学习js吧。

二、js学习方法

当我们去学习js的时候，我们一定要知道我们学习他是想干嘛，我们是想让网页动起来，那目的就很明确了，之前在html里面，我跟大家说过，要了解一些html里面的常用标签，为什么要了解这些标签呢，因为js要用，其实我们js做的工作拿到这些标签之后，让这些标签可以动起来，比如什么几秒我让他出现，几秒我让他消失，点击让他出现，不点击的时候出现，而点击，和键盘的一些操作，我们称之为：事件，给这些标签添加事件也是一个非常关键的内容。下面直接实战。

三、js实战

比如说有一个div，id为box，现在里面我有一个图片，id为pic，图片的名称为1.jpg，现在我想让这个图片实现轮播的效果，那么我们首先需要拿到这个图片的标签，以及div标签，怎么拿呢，代码：

var jsbox = document.getElementById("box")
//这个就拿到了id为box的div标签
var jsimg = document.getElementById("pic")
//这样我就拿到了id为pic的图片的img标签
//我们可以想象一下，既然想实现轮播的样子，其实就是改变图片的src属性，这个时候就需要用到定时器，这也是我想给小伙伴们说的，大家记住了，只要是想让页面动起来的操作，都跟定时器有关
var currentpage = 1

var timer = setInterval(startloop,1000)
function startloop(){
    currentpage++
    changepage()
}
//定时器里面的startloop是需要执行的函数，1000是1秒，后面的单位是以毫秒为单位的。
function changepage(){
    if (currentpage == 5)
    {
        currentpage = 1
    }else if(currentpage == 0){
        currentpage = 4
    }
    jsimg.src = "img/" + currentpage + ".png"
}
//这里假设只有5张图片，因此，当5.png的时候，其实不存在了，那么我们就需要跳回到第一张上面去，同样0的情况也是如此

这就实现了简单的轮播效果，我们发现别人的轮播，还会有两个小箭头，点击会实现左边切换图片的效果，同样的，我们需要获取到这个箭头的标签，说明一下，这个箭头大家是可以自己创建的，其实就是个><而已，我们改变一下他的大小和样式就可以了，现在我们获取他的标签元素,假设他的id为left，var jsleft = document.getElementById("left")，现在我们既然要多他进行点击然后实现一个功能，这个就是我们所说的事件，给出代码：

jsleft.addEventListener("click",beforepage,false)
function beforepage(){
    currentpage--
    changepage()
}

这样我们点击的时候就实现了换图片的功能了。其实到这里，聪明的小伙伴也就知道怎么写js了，我们只需要拿到我们想要的元素，然后进行我们想要的操作就可以了，至于不会的操作，可以上网查看或者直接去看查找官网的api。

四、原生js轮播代码

html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <div id="box">
            <img src="img/1.png" id="pic"/>
            <ul id="lists">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
            <div id="left" class="lr"><</div>
            <div id="right" class="lr">></div>
        </div>

    </body>
    <script type="text/javascript" src="js/loop.js"></script>
</html>

css样式代码

*{
    padding: 0;
    margin: 0;
}
#box{
    width: 921px;
    height: 440px;
    position: relative;
    margin: 0 auto;
}

.lr{
    width: 50px;
    height: 80px;
    position: absolute;
    background-color: rgba(0,0,0,0.2);
    color: black;
    line-height: 80px;
    text-align: center;
    top: 180px;
    font-size: 30px;
    display: none;
}

#left{
    left: 0;
}

#right{
    right: 0;
}

#lists{
    list-style: none;
    position: absolute;
    bottom: 20px;
    left: 350px;
}

#lists li{
    float: left;
    width: 20px;
    height: 20px;
    background-color: gainsboro;
    margin: 10px;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
}

js代码：

var jsbox = document.getElementById("box")
var jsimg = document.getElementById("pic")
var jslist = document.getElementsByTagName("li")
var jsleft = document.getElementById("left")
var jsright = document.getElementById("right")

jslist[0].style.backgroundColor = "red"

var currentpage = 1

var timer = setInterval(startloop,1000)
function startloop(){
    currentpage++
    changepage()
}


function changepage(){
    if (currentpage == 5)
    {
        currentpage = 1
    }else if(currentpage == 0){
        currentpage = 4
    }
    jsimg.src = "img/" + currentpage + ".png"
    for (var i=0; i<jslist.length; i++)
        {
            jslist[i].style.backgroundColor = "gainsboro"
        }
    jslist[currentpage-1].style.backgroundColor = "red"
}


jsbox.addEventListener("mouseover",funcover,false)
function funcover(){
    clearInterval(timer)
    jsleft.style.display = "block"
    jsright.style.display = "block"
}


jsbox.addEventListener("mouseout",funcout,false)
function funcout(){
    timer = setInterval(startloop,1000)
    jsleft.style.display = "none"
    jsright.style.display = "none"
}

jsleft.addEventListener("mouseover",deepcolor,false)
jsright.addEventListener("mouseover",deepcolor,false)
function deepcolor(){
    this.style.backgroundColor = "rgba(0,0,0,0.7)"
}


jsleft.addEventListener("mouseout",orgincolor,false)
jsright.addEventListener("mouseout",orgincolor,false)
function orgincolor(){
    this.style.backgroundColor = "rgba(0,0,0,0.2)"
}


jsleft.addEventListener("click",beforepage,false)
function beforepage(){
    currentpage--
    changepage()
}
jsright.addEventListener("click",nextpage,false)
function nextpage(){
    currentpage++
    changepage()
}
for (var i=0; i<jslist.length; i++){
    jslist[i].index = i + 1 
    jslist[i].addEventListener("mouseover",skippage,false)
    function skippage(){
        currentpage = this.index
        changepage()
    }
}

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1990858822@qq.com