基于jQuery实现的焦点轮播图

这一版是无上一页下一页功能的，后面有再加的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图实验--无上一页下一页功能</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .banner-lb{
            min-width: 1200px;
            height: 700px;
            background: #74ACCF;
            overflow: hidden;
        }
        .banner-lb #banner_box{
            width: 1200px;
            height: 600px;
            margin: 50px auto;
            position: relative;
        }
        /*轮播图片*/
        .banner-lb #banner_box .banner-ula{
            width: 100%;
            height: 600px;
            background: #666666;
        }
        .banner-lb #banner_box .banner-ula li{
            position: absolute;
            left: 0;
            bottom: 0;
            display: none;
            width: 1200px;
            height: 600px;
        }
        .banner-lb #banner_box .banner-ula li img{
            width: 1200px;
            height: 600px;
        }
        /*点点*/
        .banner-lb #banner_box .banner-point{
            width: 100px;
            height: 30px;
            position: absolute;
            left: 50%;
            margin-left: -50px;
            bottom: 0;
        }
        .banner-lb #banner_box .banner-point li{
            float: left;
            margin-right: 10px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #888888;
        }

        .banner-lb #banner_box .banner-point .point-bg{
            background: red;
        }
    </style>
</head>
<body>
<div class="banner-lb">
    <div id="banner_box">
        <ul class="banner-ula">
            <li style="display: block;"><img src="images/a.jpg" alt="" ></li>
            <li><img src="images/b.jpg" alt=""></li>
            <li><img src="images/c.jpg" alt=""></li>
            <li><img src="images/d.jpg" alt=""></li>
        </ul>
        <ul class="banner-point">
            <li class="point-bg"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>

<script src="js/jquery-1.12.4.js"></script>
<script>
var boss = 0; //大总管变量
var len = $("#banner_box .banner-ula li").length;
//设置定时器
var timer = setInterval(runImg,1000);

//设置图片切换
function runImg() {
    boss++;
    if(boss > len-1){
        boss = 0;
    }
    //这里不能直接找img，因为img没有兄弟元素，他被外层的li隔开了
    $("#banner_box .banner-ula li").eq(boss).fadeIn(500).siblings().fadeOut(500);
    $("#banner_box .banner-point li").eq(boss).addClass("point-bg").siblings().removeClass("point-bg");

}

//鼠标移入清除定时器,移出恢复定时器
$("#banner_box").hover(function () {
    clearInterval(timer);
},function () {
    timer = setInterval(runImg,1000);
})
//移入小点点后显示相应的图片
$(".banner-point li").mouseenter(function () {
    boss = $(this).index();
    //换图片
    $("#banner_box .banner-ula li").eq(boss).fadeIn(600).siblings().fadeOut(500);
    //点点变色
    $("#banner_box .banner-point li").eq(boss).addClass("point-bg").siblings().removeClass("point-bg");
})
    
</script>
</body>
</html>

研究之后加上上一页下一页功能啦---完整版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图完整版</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .banner-lb{
            min-width: 1200px;
            height: 700px;
            background: #74ACCF;
            overflow: hidden;
        }
        .banner-lb #banner_box{
            width: 1200px;
            height: 600px;
            margin: 50px auto;
            position: relative;
        }
        /*轮播图片*/
        .banner-lb #banner_box .banner-ula{
            width: 100%;
            height: 600px;
            background: #666666;
        }
        .banner-lb #banner_box .banner-ula li{
            position: absolute;
            left: 0;
            bottom: 0;
            display: none;
            width: 1200px;
            height: 600px;
        }
        .banner-lb #banner_box .banner-ula li img{
            width: 1200px;
            height: 600px;
        }
        /*点点*/
        .banner-lb #banner_box .banner-point{
            width: 100px;
            height: 30px;
            /*overflow: hidden;*/
            position: absolute;
            left: 50%;
            margin-left: -50px;
            bottom: 0;
        }
        .banner-lb #banner_box .banner-point li{
            float: left;
            margin-right: 10px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #888888;
        }

        .banner-lb #banner_box .banner-point .point-bg{
            background: red;
        }
        /*左右按钮*/
        .banner-lb #banner_box .btns{
            display: inline-block;
            width: 30px;
            height: 33px;
            background: rgba(0,0,0,0.6);
            position: absolute;
            top: 50%;
            margin-top: -20px;
            font-size: 23px;
            color: red;
            text-align: center;
            cursor: default;
            z-index: 10;
        }
        .banner-lb #banner_box .btn-left{
            left: 0;
        }
        .banner-lb #banner_box .btn-rigth{
            right: 0;

        }
    </style>
</head>
<body>
<div class="banner-lb">
    <div id="banner_box">
        <ul class="banner-ula">
            <li style="display: block;"><img src="images/a.jpg" alt="" ></li>
            <li><img src="images/b.jpg" alt=""></li>
            <li><img src="images/c.jpg" alt=""></li>
            <li><img src="images/d.jpg" alt=""></li>
        </ul>
        <ul class="banner-point">
            <li class="point-bg"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>

        <span class="btns btn-left"><</span>
        <span class="btns btn-rigth">></span>
    </div>
</div>

<script src="js/jquery-1.12.4.js"></script>
<script>
var boss = 0; //大总管变量
var len = $("#banner_box .banner-ula li").length;
//设置定时器
var timer = setInterval(runImg,2000);

//设置图片切换
function runImg() {
    boss++;
    if(boss > len-1){
        boss = 0;
    }
    //这里不能直接找img，因为img没有兄弟元素，他被外层的li隔开了
    $("#banner_box .banner-ula li").eq(boss).fadeIn(500).siblings().fadeOut(500);
    $("#banner_box .banner-point li").eq(boss).addClass("point-bg").siblings().removeClass("point-bg");

}

//鼠标移入清除定时器,移出恢复定时器
$("#banner_box").hover(function () {
    clearInterval(timer);
},function () {
    timer = setInterval(runImg,2000);
});

//移入小点点后显示相应的图片
$(".banner-point li").mouseenter(function () {
    boss = $(this).index();
    //换图片
    $("#banner_box .banner-ula li").eq(boss).fadeIn(500).siblings().fadeOut(500);
    //点点变色
    $("#banner_box .banner-point li").eq(boss).addClass("point-bg").siblings().removeClass("point-bg");
});

//左右按钮
$("#banner_box .btn-left").click(function () {
    // alert(123);
    boss --;
    if(boss < 0){
        boss = len-1;
    }
    //换图片
    $("#banner_box .banner-ula li").eq(boss).fadeIn(500).siblings().fadeOut(500);
    //点点变色
    $("#banner_box .banner-point li").eq(boss).addClass("point-bg").siblings().removeClass("point-bg");
});

$("#banner_box .btn-rigth").click(runImg);

</script>
</body>
</html>

基于jQuery实现的焦点轮播图

猜你喜欢