html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>轮播图-效果</title>
<style>
*{
margin: 0;
padding: 0;
}
#contain{
width: 590px;
height: 470px;
overflow: hidden;
position: relative;
margin: 200px auto;
}
#prev{
left: 20px;
}
#next{
right: 20px;
}
#list{
position: absolute;
}
#list img{
float: left;
}
.arrow{
text-align: center;
cursor: pointer;
font-size: 36px;
position: absolute;
top: 220px;
color: #fff;
text-decoration: none;
}
</style>
</head>
<body>
    <div id="contain">
        <div id="list" style="left: 0px;">
            <img src="img/1.jpg" alt="" />
            <img src="img/2.jpg" alt="" />
            <img src="img/3.jpg" alt="" />
            <img src="img/4.jpg" alt="" />
            <img src="img/5.jpg" alt="" />
        </div>
    <a href="javascript:;" id="prev">&lt;</a>
    <a href="javascript:;" id="next">&gt;</a>
    </div>
</body>
</html>


javascript实现

<script type="text/javascript">
    var list=document.getElementById("list");
    var prev = document.getElementById("prev");
    var next = document.getElementById("next");
    var content = document.getElementById("content")
    function on2(offset){
        //获取left值
        var left = parseInt(list.style.left)+offset;
        if(left<-590*4){
            left = 0;
        }
        if(left>0){
            left = -590*4;
        }
        list.style.left = left+"px";

    }

    prev.onclick=function(){
        on2(590);
    };
    next.onclick=function () {
        on2(-590);
    }
    var time;
    function play() {
        time = setInterval(function(){
            next.onclick();
        },2000);
    }
    play();
    content.onmouseover=function(){
        clearInterval(time);
    }
    content.onmouseout=function(){
        play();
    }
</script>


jquery实现

<script type="text/javascript">
function on(offset) {
        var a = $("#list").css("left");
        var left = parseInt(a)+offset;
        if(left<-590*4){
            left=0;
        }
        if(left>0){
            left=-590*4;
        }
        $("#list").css("left",left+"px");
    }
    $("#prev").click(function(){
        on(-590);
    });
    $("#next").click(function(){
        on(590);
    });
    var time;
    function play(){
        time=setInterval(function(){
            $("#prev").click();
        },1000);
    }
    play();
    $("#content").mouseover(function(){
        clearInterval(time);
    });//鼠标放上去停止轮播
    $("#content").mouseout(function(){
        play();
    });
</script>


css实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #content{
            position: relative;
            width: 850px;
            height: 470px;
            overflow: hidden;
            margin: 100px auto;
        }
        #list{
            position: absolute;
            width: 500%;
            transform: translate(0,0); /* 初始位置位移 */
            animation: po 10s linear infinite;
        }
        #list img{
           /* 控制图片大小*/
            width: 850px;
            height: 470px;

            float: left;
        }
        span{
            position: absolute;
            font-size: 50px;
            color: #ffffff;
            top: 220px;
            cursor: pointer;
        }
        #next{
            right: 0px;
        }

    @keyframes po {
        0% {transform: translate(0,0);}
        15% {transform: translate(0,0);} /* 停留1500ms */

        20% {transform: translate(-20%,0);}  /*切换500ms 位移-20% */
        35% {transform: translate(-20%,0);}

        40% {transform: translate(-40%,0);}
        55% {transform: translate(-40%,0);}

        60% {transform: translate(-60%,0);}
        75% {transform: translate(-60%,0);}

        80% {transform: translate(-80%,0);}
        95% {transform: translate(-80%,0);}

        100% {transform: translate(0,0);} /* 复位到第一张图片 */
    }
    </style>
</head>
<body>
    <div id="content">
        <div id="list" style="left:0px">
            <img src="img/a.jpg" alt=""/>
            <img src="img/b.jpg" alt=""/>
            <img src="img/c.jpg" alt=""/>
            <img src="img/4.jpg" alt=""/>
            <img src="img/5.jpg" alt=""/>
        </div>
    </div>
</body>
</html>


bootstrap实现

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div id="carouselMenu" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="#carouselMenu" data-slide-to="0" class="active"></li>
                    <li data-target="#carouselMenu" data-slide-to="1" ></li>
                    <li data-target="#carouselMenu" data-slide-to="2" ></li>
                    <li data-target="#carouselMenu" data-slide-to="3" ></li>
                    <li data-target="#carouselMenu" data-slide-to="4" ></li>
                    
                </ol>
                <div class="carousel-inner">
                    <div class="item active"><img src="img/a.jpg" alt=""/></div>
                    <div class="item"><img src="img/b.jpg" alt=""/></div>
                    <div class="item"><img src="img/c.jpg" alt=""/></div>
                    <div class="item"><img src="img/d.jpg" alt=""/></div>
                    <div class="item"><img src="img/e.jpg" alt=""/></div>
                  
                </div>
                <a class="carousel-control left" href="#carouselMenu" data-slide="prev">‹</a>
                <a class="carousel-control right" href="#carouselMenu" data-slide="next">›</a>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $(function(){

          $('.carousel').carousel({
            interval: 3000,//轮播间隔
            pause:"hover", //鼠标悬停在轮播图上,是否停止滚动
            wrap:true,     //
            keyboard:true  //响应键盘事件
          });
         });
</script>




最后修改:2019 年 06 月 09 日 08 : 33 PM
如果觉得我的文章对你有用,请随意赞赏