首页 > 代码库 > 【jQuery】--图片轮播

【jQuery】--图片轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet"  href="http://www.mamicode.com/style.css">
    <script src="http://www.mamicode.com/jquery-2.1.4.min.js"></script>
    <script>
        //手动轮播效果
        $(function () {
            var size=$(".img li").size();

       //根据图片数量,动态添加,<li>标签个数,无需再下文手动添加
for (var i=1;i<=size;i++){ var li="<li>"+i+"</li>" $(".num").append(li); } $(".num li").eq(0).show(); //eq根据索引选择 $(".num li").mouseover(function () { $(this).addClass("active").siblings().removeClass("active"); //当前标签加上active效果,其他兄弟标签取消active效果 var index=$(this).index(); i = index; $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000); }); i=0; var t= setInterval(move,1500) function move() { i++; if(i==size){ i=0; } $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); }; function moveL() { i--; if (i==-1){ i = size-1; } $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } $(".out").hover(function () { clearInterval(t); }),function () { t=setInterval(move,1500); }; $(".out .right").click(function () { move() }); $(".out .left").click(function () { moveL() }); }); </script> </head> <body> <div class="out"> <ul class="img"> <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/001.jpg" ></a></li> <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/002.jpg" ></a></li> <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/003.jpg" ></a></li> <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/004.jpg" ></a></li> <li><a href="http://www.mamicode.com/#"><img src="http://www.mamicode.com/images/005.jpg" ></a></li> </ul> <ul class="num"> <!--<li class="active">1</li>--> <!--<li>2</li>--> <!--<li>3</li>--> <!--<li>4</li>--> <!--<li>5</li>--> </ul> <div class="left btn"><</div> <div class="right btn">></div> </div> </body> </html>

 

技术分享
*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}

.out{
    width: 730px;
    height: 454px;
    /*border: 8px solid mediumvioletred;*/
    margin: 50px auto;
    position: relative;
}

.out .img li{
    position: absolute;
    left: 0;
    top: 0;
}

.out .num{
    position: absolute;
    left:0;
    bottom: 20px;
    text-align: center;
    font-size: 0;
    width: 50%;
}


.out .btn{
    position: absolute;
    top:50%;
    margin-top: -30px;
    width: 30px;
    height: 60px;
    background-color: aliceblue;
    color: black;
    text-align: center;
    line-height: 60px;
    font-size: 40px;
    display: none;





}

.out .num li{
    width: 20px;
    height: 20px;
    background-color: grey;
    color: #fff;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    display: inline;
    font-size: 18px;
    margin: 0 10px;
    cursor: pointer;
}
.out .num li.active{
    background-color: red;
}


.out .left{
    left: 0;
}
.out .right{
    right: 0;
}

.out:hover .btn{
    display: block;
}
style

 

【jQuery】--图片轮播