Js实现轮播图

首先说明下轮播图的实现方式:
1、通过改变图片的位置,将图片放到一个div中,设置父元素的overflow为hidden,然后改变子div的位置,达到显示图片的目的
2、控制图片是否显示{
1)改变图片的透明度,
2)改变图片的display属性
}
本文通过改变图片的display属性实现,话不多说,直接上代码


<html>
<head>
    <title>sdftitle>
<style>
*{
    padding: 0;
    margin:0;
}
.carousel{
    position: relative;
    width:400px;
    height: 400px;
    color:red;
}
img{
    width:400px;
    height: 400px;
    display: none;
}
.pre{
    position: absolute;
    top:45%;
    left:2%;
}
.pre::after{
    content: "<";
    height: 6px;
    width:6px;
    font-size: 40px;
}
.next{
    position: absolute;
    top:45%;
    right:2%;
}
.next::after{
    content: ">";
    height: 6px;
    width:6px;
    font-size: 40px;
}
style>
head>
<body>
<div class="carousel">
    <img src="./pic/1.jpg">
    <img src="./pic/2.jpg">
    <img src="./pic/3.jpg">
    <img src="./pic/4.jpg">
    <div class="pre">div>
    <div class="next">div>
div>
body>
<script>
    var imgList=document.getElementsByTagName("img");
    var show=0;
    imgList[show].style.display="inline-block";
    setInterval(nextPic,10000);
    function nextPic(){
            imgList[show].style.display="none";
            show++;
            if(show>imgList.length-1){
                show=0;
            }
            imgList[show].style.display="inline-block";
    }
    function prePic(){
            imgList[show].style.display="none";
            show--;
            if(show<0){
                show=imgList.length-1;
            }
            imgList[show].style.display="inline-block";
    }
    document.getElementsByClassName("pre")[0].addEventListener("click",prePic);
    document.getElementsByClassName("next")[0].addEventListener("click",nextPic);
script>
html>

你可能感兴趣的:(Javascript)