js动画之轮播图

Posted 2021-01-04 乱了夏天蓝了海

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js动画之轮播图相关的知识，希望对你有一定的参考价值。

一、 使用Css3动画实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            body,ul{
                list-style: none;
            }
            
            
            .outer{
                width: 750px;
                height: 366px;
                margin: 100px auto;
                border: solid 2px gray;
                
                overflow: hidden;
                position: relative;
            }
            
            .inner{
                width: 500%;
                height: 100%;
                position: relative;
                left: 0;
                
                animation: myAni 15s linear infinite alternate;
            }
            
            .inner img{
                float: left;
                width: 20%;
            }
            
            @keyframes myAni{
                0%{left: 0;}
                10%{left:0}
                20%{left: -100%;}
                30%{left: -100%;}
                40%{left: -200%;}
                50%{left: -200%;}
                60%{left: -300%;}
                70%{left: -300%;}
                80%{left: -400%;}
                100%{left: -400%;}
            }
            
            .outer ul{
                position: absolute;
                bottom: 16px;
                left: 50%;
                transform: translateX(-50%);
                display: flex;
            }
            
            .outer li{
                /*width: 12px;
                height: 12px;*/
                margin: 0 10px;
                /*background: white;*/
                border: solid 8px white;
                border-radius: 50%;
            }
            
            .outer .scroll-ball{
                border-color: yellowgreen;
                position: relative;
                left: -180px;
                
                animation: myBall 15s linear infinite alternate;
            }
            
            @keyframes myBall{
                0%{left: -180px;}
                10%{left:-180px;}
                20%{left: -144px;}
                30%{left: -144px;}
                40%{left: -108px;}
                50%{left: -108px;}
                60%{left: -72px;}
                70%{left: -72px;}
                80%{left: -36px;}
                100%{left: -36px;}
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="inner">
                <img src="img/5af3df82N15a1910a.jpg"/>
                <img src="img/5afbf194Nce807c23.jpg"/>
                <img src="img/5afce833N3a41e948.jpg"/>
                <img src="img/5af3df82N15a1910a.jpg"/>
                <img src="img/5afce833N3a41e948.jpg"/>
            </div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li class="scroll-ball"></li>
            </ul>
        </div>
    </body>
</html>

二、 使用js实现

html代码：

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/slideshow.css"/>
    </head>
    <body>
        <div class="slideshow">
            <!--图片-->
            <a href="img/aaa.jpg" id="slideshow-href">
                <img src="img/aaa.jpg"  id="slideshow-item"/>
            </a>
            <!--底部导航小圆点-->
            <ul id="conLis">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <!--左右导航-->
            <div id="leftBtn">&lt;</div>
            <div id="rightBtn">&gt;</div>
        </div>
    </body>
    <script type="text/javascript" src="js/slideshow.js"></script>
</html>


css代码：

    body,ul,li{margin: 0;padding: 0;}
a{text-decoration: none;}
li{list-style: none;}

.slideshow{
    width: 800px;
    height: 500px;
    margin: 100px auto;
    overflow: hidden;
    
    position: relative;
}

#slideshow-item{
    display: block;
    width: 800px;
}

#conLis{
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
}

.slideshow li{
    margin: 0 10px;
    border: solid 6px black;
    border-radius: 50%;
    float: left;
    cursor: pointer;
}

#leftBtn,
#rightBtn{
    padding: 8px 6px;
    
    font-size: 60px;
    color: white;
    
    background: #E7E7E7;
    
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    opacity:0.3;
    cursor: pointer;
}

#leftBtn{
    left: 15px;
}

#rightBtn{
    right: 15px;
}



js代码：

    //获取元素
var slideshow = document.querySelector(‘.slideshow‘);

var scrollHref = gt("slideshow-href");
var scrollItem = gt("slideshow-item");

//console.log(scrollHref+"===="+scrollItem);

var conLis = gt(‘conLis‘);
var items = conLis.getElementsByTagName(‘li‘);

var leftBtn = gt(‘leftBtn‘);
var rigthBtn = gt(‘rightBtn‘);

//设置存储图片的容器
var imgArr = ["img/aaa.jpg","img/bbb.jpg","img/ccc.jpg","img/ddd.jpg","img/eee.jpg","img/fff.jpg"];
var hrefArr = ["img/aaa.jpg","img/bbb.jpg","img/ccc.jpg","img/ddd.jpg","img/eee.jpg","img/fff.jpg"];

//设置索引0为第一张显示的图片
var currentIndex = 0;
scrollItem.src = imgArr[0];
scrollHref.href = hrefArr[0];

//设置第一个小圆点为黄色
items[0].style.borderColor = "yellow";

//设置定时更换图片
var timer = setInterval(changeItem,2000);

function changeItem(){
    currentIndex++;//图片索引自增1,显示下一张图片
    if(currentIndex == imgArr.length){
        currentIndex = 0;
    }
    //调用图片轮播，动态的改变当前索引值来改变轮播的图片
    slideShow(currentIndex);
}


//图片轮播
function slideShow(i){
    //设置轮播图片及链接图片
    scrollItem.src = imgArr[i];
    scrollHref.href = hrefArr[i];
    
    //设置对应轮播图片的小圆点效果
    for(var j = 0; j < items.length; j++){
        //设置所有小圆点为默认样式
        items[j].style.borderColor = ‘black‘;
    }
    
    //单独设置某张轮播图对应的小圆点样式
    items[i].style.borderColor = "yellow";
}

//设置鼠标滑过底部导航小圆点显示对应的图片
for(var j = 0; j < items.length; j++){
    //for循环内有事件动作的话是先执行循环，要想按钮每一次点击都是按钮的下标值，就要先记录i值，
    //不然等到循环执行完再执行onclick事件就会等于for循环最后得到的i值。
    items[j].index = j;//将循环数据赋值给列表中的索引;防止闭包函数中无法正常获取当前索引i，而衍生出的一个绑定在dom元素上的数据index
    items[j].onmouseover = function(){
        clearInterval(timer);//停止自动轮播
        slideShow(this.index);
    }
    
    items[j].onmouseout = function(){
        currentIndex = this.index;//将元素索引赋值给currentIndex，保证下一次自动轮播继续当前这个向下轮播
        timer = setInterval(changeItem,2000);
    }
}

//设置点击左右箭头的轮播
leftBtn.onmouseover = rightBtn.onmouseover = function(){
    leftBtn.style.opacity = "1";
    rightBtn.style.opacity = "1";
    
    //鼠标移动到区域停止轮播
    clearInterval(timer);
}

leftBtn.onmouseout = rigthBtn.onmouseout = function(){
    leftBtn.style.opacity = "0.3";
    rightBtn.style.opacity = "0.3";
    
    //鼠标离开开始轮播
    timer = setInterval(changeItem,2000);
}

leftBtn.onclick = function(){
    //判断当前图片是否为第一张图片索引
    if(currentIndex == -1){
        currentIndex = imgArr.length-1;//将最后一张图片赋值给前面的索引
    }
    slideShow(currentIndex);//调用轮播方法
    
    currentIndex--;//点击左侧按钮，做减法操作
}


rightBtn.onclick = function(){
    //判断当前图片是否为最后一张图片的索引
    if(currentIndex == imgArr.length-1){
        currentIndex = 0;//将第一张图片索引赋值
    }
    slideShow(currentIndex);
    
    currentIndex++;
}

//封装通过id获取元素的方法
function gt(id){//传入字符串类型的参数
    console.log("进入方法");
    return document.getElementById(id);
    console.log("获取元素成功");
}

以上是关于js动画之轮播图的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序之轮播图

一百三十一：CMS系统之轮播图上传图片功能

Android自己定义控件之轮播图控件

web常见效果之轮播图

微信小程序之轮播图的实现（附效果图和源码）

javaScript详解数据驱动显示之轮播图案例——三-----手撕轮播图