图片轮播 | 易学教程

一.纯CSS实现图片轮播

1）实现原理：

定义两个嵌套的盒子，父盒子的overflow属性需要设置成hidden；
子盒子水平排列一组图片，图片设置成固定宽高，图片和父盒子的宽高一致；
给子盒子中加动画属性，指定动画时间、执行动画的函数、是否无限循环等参数；
用@keyframes实现动画函数，通过逐步改变一个CSS样式到另一个样式，通过百分数控制过程；

2）代码示例：

<div id="div1">
    <div id="showImg">
        <img src="img/video.png" width="1270px" height="390px"/>
        <img src="img/1.jpg" width="1270px" height="390px"/>
        <img src="img/2.jpg" width="1270px" height="390px"/>
        <img src="img/3.jpg" width="1270px" height="390px"/>
        <img src="img/4.jpg" width="1270px" height="390px"/>
    </div>    
</div>

#div1{
    width:1270px;//此处宽高必须和图片一致
    height:390px;
    overflow: hidden;
}
#showImg{
    height: 390px;
    width:9999px;
    animation: 8s lunbo infinite;//设置动画时间周期，动画执行函数，无限轮播
}
#showImg img{
    float:left;//使图片水平排列
}
@keyframes lunbo{
    0%{}
    20%{transform: translateX(0px);}
    25%{transform: translateX(-1270px);}//为了加快图片的过渡，5%的动画执行时间
    40%{transform: translateX(-1270px);}
    45%{transform: translateX(-2540px);}
    60%{transform: translateX(-2540px);}
    65%{transform: translateX(-3810px);}
    80%{transform: translateX(-3810px);}
    85%{transform: translateX(-5080px);}
    100%{transform: translateX(-5080px);}
}

二.JS+CSS实现图片轮播带索引

1）实现原理：

仍然定义两个盒子，父盒子设置overflow设置为hidden，position设置为relative；
图片水平排列在子盒子中，子盒子设置position为absolute，left初始为0px，后期通过改变left值实现图片轮播，每次改变一张图片的宽度；
通过JS定时器控制图片自动轮播，定时器按照设定的周期调用方法，改变left值的同时改变索引，为当前图片的索引加效果以区分其他索引；
当鼠标点击某一索引时，停止定时器并跳到索引指定的图片，当鼠标移到图片上时暂停定时器。

2）代码示例：

<div id="div1">
    <div id="showImg">
        <img src="img/video.png" width="1270px" height="390px"/>
        <img src="img/1.jpg" width="1270px" height="390px"/>
        <img src="img/2.jpg" width="1270px" height="390px"/>
        <img src="img/3.jpg" width="1270px" height="390px"/>
        <img src="img/4.jpg" width="1270px" height="390px"/>
    </div>    
    <ul>
        <li class="selectedImg">1</li>//默认是第一张图片的索引
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

#div1{
    width:96%;
    height:390px;
    margin: 1% 2%;
    overflow: hidden;//超出边框部分隐藏
    position: relative;
}
#showImg{
    position:absolute;
    height: 390px;
    width:9999px;
    left:0px;
}
#showImg img{
    float:left;
}
#div1 ul{
    position:absolute;
    bottom:15px;
    right:90px;
}
#div1 ul li{
    background-color:black;
    color:white;
    list-style-type:none;
    width:25px;
    height:25px;
    float:left;
    font-size: 20px;
    text-align:center;
    cursor:pointer;//鼠标移动变手指状态
    margin-left:5px;
}
#div1 ul li.selectedImg{
    background: orange;//给当前图片的索引加背景颜色以示区分
}

var index = 0;
var timer = null;
function autoplay() {
    timer = setInterval(function() {
        $("#showImg").animate({left:-1270 * index}, 0);//left值每次改变一张图片的宽度
        $("#div1 ul li").eq(index).addClass("selectedImg").siblings().removeClass("selectedImg");//给当前索引加class
        index++;
        index >= 5 && (index = 0);//当index>=5为假不执行index=0
    }, 2000);
}
autoplay();
$("#div1").mouseover(function() {
    clearInterval(timer);//当鼠标移到图片上暂停轮播
})
$("#div1").mouseleave(function() {
    autoplay();//鼠标移开继续轮播
})
$(document).on("click","#div1 ul li",function(){//点击索引跳到特定图片
    index = $(this).index();
    $("#showImg").stop().animate({left:-1270 * index}, 10);
    $(this).addClass("selectedImg").siblings().removeClass("selectedImg");
})

来源：https://www.cnblogs.com/marvin-wen/p/11715118.html

标签

轮播