css或Js制作简易轮播图

最新推荐文章于 2023-04-13 16:25:26 发布

小小竹子

最新推荐文章于 2023-04-13 16:25:26 发布

阅读量369

点赞数

分类专栏： HTML+CSS JavaScript

本文链接：https://blog.csdn.net/qq_44606649/article/details/102764670

版权

HTML+CSS 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

我学习的时候总结了几种简易的轮播图设计方式，总结如下。

1. 仅使用CSS+HTML=淡入淡出型

html代码如下（使用animation方法,具体如何使用，请参考：https://blog.csdn.net/cuishizun/article/details/82347015）

<div class="banner_out_head">
<!--三个轮播图所需要的图片，放在div中-->
    <div class="banner_out_img_container lunboOne">
        <img src="../Heww/images/1557311466098_.png" style="opacity: 1">
    </div>
    <div class="banner_out_img_container lunboTwo" style="opacity: 0">
        <img src="../Heww/images/1565487491854_.jpg">
    </div>
    <div class="banner_out_img_container lunboThree" style="opacity: 0">
        <img src="../Heww/images/1565762826951_.jpg">
    </div>
</div>

CSS代码如下

*{
margin：0；
padding：0；
}
 .banner_out_head{
    width:1118px;
    height:322px;
    position: relative;
}
.banner_out .banner_out_img_container{
    width: 1118px;
    height: 322px;
    }
.lunboOne{
    animation: lunbo1 9s infinite;
}
.lunboTwo{
    animation: lunbo2 9s infinite;
}
.lunboThree{
    animation: lunbo3 9s infinite;
}
@keyframes lunbo1 {
    0%{opacity: 1}
    33.3333%{opacity: 0}
    66.6666%{opacity: 0}
    100%{opacity: 1}
}
@keyframes lunbo2 {
    0%{opacity: 0}
    33.3333%{opacity: 1}
    66.6666%{opacity: 0}
    100%{opacity: 0}
}
@keyframes lunbo3 {
    0%{opacity: 0}
    33.3333%{opacity: 0}
    66.6666%{opacity: 1}
    100%{opacity: 0}
}

结果
在这里插入图片描述

使用CSS做出快速移动的轮播图

这里我仅写下思路。首先要有一个大小和图片一样的div，该div设置属性：overflow：hidden；然后将若干张图片排成一行，让他们通过animation方法在div中按照顺序左或右滑动，每次只显示一张图片，其他图片在div外不显示。当所有图片滑动到尽头时，再让所有图片快速逆着滑动，滑动到第一张的位置，接着循环。

使用js写出简易可点击的轮播图

这一点是我看别人的视频自己摸索出来的，其中的几个重要方法都是独创。
这里也是利用到了animation。
html代码如下

<body>
<div id="slider" class="slider">
    <div id="slider_scroll" class="slider_scroll">
        <div id="slider_main" class="slider_main">

            <div class="item">
                <a href="#">
                <img src="图片1" alt="">
            </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="图片2" alt="">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="图片3" alt="">
                </a>
            </div>
            <div class="item">
                <a href="#">
                    <img src="图片4" alt="">
                </a>
            </div>
        </div>
        <!--此处用作上下翻页的按钮-->
        <span class="next" id="next"></span>
        <span class="prev" id="prev"></span>
    </div>
    <!--用于设置轮播图的索引-->
    <div class="slider_index" id="slider_index">
<!--通过js动态的生成-->
    </div>
</div>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</body>~

CSS代码如下

*{
    padding: 0;
    margin: 0;
}
.slider{
    width: 300px;
    height: 150px;
    margin: 100px auto;
    position: relative;
    overflow: hidden;//超出部分隐藏
}
.slider .slider_scroll{
    position: relative;
    width: 300px;
    height: 150px;
}
.slider_main{
    position: relative;
    width: 300px;
    height: 150px;
}
.slider_main .item{
    width: 300px;
    height: 150px;
    position:absolute;
}
.slider_main .item img{
    width: 300px;
    height: 150px;
}
.slider_main .item img:nth-child(1){
    transition: left 1s;
}
.slider_index{
    width: 300px;
    height: 40px;
    text-align: center;
    color: #fff;
    font-weight: 700;
    z-index: 20;
    position: absolute;
    bottom:0;
    background-color: rgb(0,0,0);
    cursor:pointer;
}
/*索引*/
.slider_index .slider_index_icon{
    margin: 0 10px;
}
.slider_index .slider_index_icon.current{
    color: red;
}
.slider_scroll span{
    position: absolute;
    width: 30px;
    height: 60px;
    background: url("../images/翻页按钮.png")no-repeat;
    top: 50%;
    margin-top: -34px;
    cursor: pointer;
}
.slider_scroll span.next{
    right:0;
    background-position: -40px 0;
}
.slider_scroll span.prev{
    left:0;
    background-position: 0 0;
}
.er{
    z-index: 31;
    position: absolute;
    top:10px;
    left: 30px;
}
/*显示的图片左移*/
.move1{
    animation: 1s move1-left 1;
    /*动画结束后，保留结束状态*/
    animation-fill-mode:forwards;
    animation-direction: normal;
}
@keyframes  move1-left {
    /*from{left:0;}*/
    0%{
        left:0;
    }
100%{left:-300px;}
}
/*未显示的图片左移*/
.move2{
    animation: 1s move2-left 1;
    /*动画结束后，保留结束状态*/
    animation-fill-mode:forwards;
    animation-direction: normal;}
@keyframes  move2-left {
    from{left:300px;}
    to{left:0;}
}
/*显示的图片右移*/
.move3{
    animation: 1s move3-right 1;
    /*动画结束后，保留结束状态*/
    animation-fill-mode:forwards;
    animation-direction: normal;
}
@keyframes move3-right{
    from{left:0;}
    to{left:300px;}
}
/*未显示的图片右移*/
.move4{
    animation: 1s move4-right 1;
    /*动画结束后，保留结束状态*/
    animation-fill-mode:forwards;
    animation-direction: normal;
}
@keyframes move4-right{
    from{left:-300px;}
   to{left:0;}
}

下面是JS代码

window.onload=function(){
    //1.获取标签
    var slider=document.getElementById("slider");
    var slider_main=document.getElementById('slider_main');
    var allBoxs=slider_main.children;
    var er=document.getElementById('er');
    var next=document.getElementById('next');
    var prev=document.getElementById('prev');
    var slider_index=document.getElementById('slider_index');
    var item=document.getElementsByClassName("item");
    var iNow=0;//当前可视元素的索引
    var timer = null;
    //2. 创建动态索引器
    for (var i=0;i<allBoxs.length;i++){
        var span=document.createElement('span');//createElement(stly)方法用来创建一个stly类型的对象
        if(i==0){
            span.className='slider_index_icon current';
        }
        else{
            span.className='slider_index_icon'
        }
        span.innerHTML=i+1;
        slider_index.appendChild(span);//appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。
    }
    //3.让滚动的元素归位
    var scroll_w = parseInt(slider.offsetWidth);
    //console.log(scroll_w);
    for(var j=1;j<allBoxs.length;j++){
    allBoxs[j].style.left=scroll_w+'px';
   }

    // setInterval(动画事件，时间).//js中的动画方法

//点击左滑按钮，触发图片向左滑动事件
    prev.onclick=function(){
        moves("left");
    };
    //获得向右事件
    next.onclick=function(){
        moves("right");
    };
    function  moves(fangxiang){
        var noe=iNow;
        clearMove(noe);
        if(fangxiang=="left"){
            noe++;
            if(iNow==(allBoxs.length-1)){
                noe=0;
            }
            console.log(1111);
        }
        else if(fangxiang=="right"){
            noe--;
            if(iNow==0){
                noe=3;
            }
        }
       clearMove(noe);

        if(fangxiang=="left"){
            allBoxs[iNow].classList.add("move1");
            iNow++;
            if(iNow==allBoxs.length){
                iNow=0;
            }
            //console.log(iNow+"按下二");
            allBoxs[iNow].style.left=scroll_w+'px';
            allBoxs[iNow].classList.add("move2");
        }
        else if(fangxiang=="right"){
            allBoxs[iNow].classList.add("move3");
            iNow--;
            if(iNow==-1){
                iNow=3;
            }
            allBoxs[iNow].style.left=-scroll_w+"px";
            allBoxs[iNow].classList.add("move4")
        }
        changeIndex();
    }
//清除所有添加的移动类
    function clearMove(Now){
        allBoxs[Now].classList.remove("move2");
        allBoxs[Now].classList.remove("move1");
        allBoxs[Now].classList.remove("move3");
        allBoxs[Now].classList.remove("move4");

    }

    var slider_index_icons=slider_index.children;
     //6.便利索引器，添加监听的事件
    for(var k=0;k<slider_index_icons.length;k++){

        slider_index_icons[k].onmousedown= function(){
            //6。2  获得点击的索引
            var index=parseInt(this.innerText)-1;
            clearMove(iNow);
            clearMove(index);
            //点击的索引与当前索引进行对比
            if(index>iNow){
                //下一个操作

                allBoxs[iNow].classList.add("move1");
                allBoxs[index].style.left=scroll_w+'px';
                allBoxs[index].classList.add("move2");

            }
            else if(index<iNow){
                //上一个操作
                allBoxs[index].style.left=-scroll_w+'px';
                allBoxs[iNow].classList.add("move3");

                allBoxs[index].classList.add("move4");

            }
                iNow=index;
               changeIndex();
        }
    }
       //7. 开启定时器，自动播放
    timer=setInterval(autoPlay,2000);

    function autoPlay(){
        clearMove(iNow);

        allBoxs[iNow].classList.add("move1");
        iNow++;
        if(iNow==allBoxs.length){
            iNow=0;
        }
        clearMove(iNow);
        //console.log(iNow+"按下二");
        allBoxs[iNow].style.left=scroll_w+'px';
        allBoxs[iNow].classList.add("move2");
        console.log(2);
        changeIndex();
    }
    //鼠标监听事件必须全部小写，不能使用驼峰命名法
    slider.onmouseover=function(){
    //clearInterval(timer);
    //    console.log("鼠标悬停");
        clearInterval(timer);
     };
    slider.onmouseout=function(){
        //console.log("鼠标离开时定时器开启")
        timer=setInterval(autoPlay,2000);
    };
 //控制当前的索引
 function  changeIndex(){
     for(var i=0;i<slider_index.children.length;i++){
         slider_index.children[i].className='slider_index_icon';
     }
     slider_index.children[iNow].className='slider_index_icon current';
 }
};~

结果
在这里插入图片描述

小小竹子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css或Js制作简易轮播图

我学习的时候总结了几种简易的轮播图设计方式，总结如下。1. 仅使用CSS+HTML=淡入淡出型html代码如下（使用animation方法,具体如何使用，请参考：https://blog.csdn.net/cuishizun/article/details/82347015）<div class="banner_out_head"><!--三个轮播图所需要的图片，放在di...
复制链接

扫一扫