html5 右轮播图代码 html5轮播图代码效果图

转载

IT剑客风云 2023-06-05 12:26:51

文章标签 javascript 前端 css3 html5 i++ 文章分类 HTML5 移动开发

基于H5,JavaScript实现的轮播图

具体实现方法全部以注释形式写在代码中了，实现的方式还是很基础的。

实现效果如下：

html5 右轮播图代码 html5轮播图代码效果图_前端

html5 右轮播图代码 html5轮播图代码效果图_前端_02

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
</head>
<body>
    <div id="swiper" class="swiper">
        <!-- 图片下标 -->
        <div id="num" class="num"></div>
        <!-- 图片 -->
        <img id="imgs" class="imgs" alt="">
        <!-- 左滚按钮 -->
        <div id="left" class="bt left">◁</div>
        <!-- 按钮列表 -->
        <ul id="ul">     
        </ul>
        <!-- 右滚按钮 -->
        <div id="right" class="bt right">▷</div>
    </div>
</body>
<script>
    //图片数组
    var imglist = new Array(
    "../index/images/1.jpg",
    "../index/images/2.jpg",
    "../index/images/3.jpg",
    "../index/images/4.jpg",
    "../index/images/5.jpg",
    "../index/images/6.jpg",);

    //获取dom元素
    var imgs = document.getElementById("imgs");
    var left = document.getElementById("left"); 
    var right = document.getElementById("right");
    var num = document.getElementById("num");
    var ul = document.getElementById("ul");
    
    //根据图片数量设置圆点个数
    for(var i = 0 ; i < imglist.length ; i++){
        ul.innerHTML+="<li></li>"
    }
    var li = document.getElementsByTagName("li");

    //将轮播图默认设置为第一张图片
    imgs.src = imglist[0];
    //将小圆点默认设置为第一个
    li[0].className="active"
    //将下标默认设置为第一个
    num.innerHTML="1/"+imglist.length
    //设置全局下标
    var index = 0;
    
    //向左滚点击事件
    left.onclick=function(){
        change(0);
    }
    //向右滚点击事件
    right.onclick=function(){
        change(1);
    }
    //切换图片函数
    function change(type){
        if(type == 0){//如果为0则为左滚动
            if( index == 0){
                index = imglist.length-1;
            }else if(index > 0 && index <= imglist.length-1){
                index--;
            }
        }else if(type == 1){//如果为1则为右滚动
            if(index == imglist.length-1){
                index = 0;
            }else if(index >= 0 && index < imglist.length-1){
                index++;
            }   
        }
        //更改图片序号
        num.innerHTML=index + 1 + "/" + imglist.length
        //更改图片背景
        imgs.src = imglist[index];
        // 清除之前的样式
        for(var i = 0;i<li.length;i++){
            li[i].className=""
        }
        //设置当前li点击样式
        li[index].className="active"
    }
    //使用for循环为每一个li添加点击事件
    for(var i = 0 ;i<li.length;i++){
        //为每一个li绑定一个名为index的属性
        li[i].index = i
        //为每一个li绑定一个点击事件
        li[i].onclick = function(){
            // 清除之前的样式
            for(var i = 0;i<li.length;i++){
                li[i].className=""
            }
            //设置当前点击样式
            this.className="active"
            //更改全局下标，以保证和左右滚动按钮同步
            index=this.index
            //更改图片序号
            num.innerHTML=index + 1 + "/" + imglist.length
            //更改背景
            imgs.src = imglist[index];
        }
    }
</script>

<style>
    .swiper{
        width: 300px;
        height: 300px;
        margin: 0 auto;
        margin-top: 100px;
        position:relative;
        box-shadow: 2px 2px 11px 2px rgb(61 61 61);
    }
    .imgs{
        background-size: cover;
    }
    .bt{
        position:absolute;
        background-color: #fff;
        border-radius: 2px;
        box-shadow: 2px 0px 6px 3px rgb(241 241 241);
        cursor: pointer;
    }
    .left{
        top:150px;
        left:0px;
    }
    .right{
        top:150px;
        right:0px;
    }
    .num{
        background-color: #fff;
        border-radius: 2px;
        box-shadow: -1px 2px 6px 1px rgb(61 61 61);
        position: absolute;
        top: 0px;
    }
    #ul{
        position: absolute;
        list-style: none;
        bottom: 0px;
        left: 9%;
    }
    li{
        box-sizing: border-box;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        border: solid 1px rgb(0, 0, 0);
        background-color: #fff;
        margin-right: 15px;
        float: left;
        box-shadow: -2px 0px 6px 3px rgb(241 241 241);
        cursor: pointer;
    }
    .active{
        box-shadow:inset -2px 0px 6px 3px rgb(0 0 0);
        background-color: rgb(0, 0, 0);
        border: solid 1px rgb(255, 255, 255);
    }
</style>
</html>