轮播图的实现

原创 于 2017-04-19 16:37:12 发布 · 493 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

html

 <div class="index-banner">
    <div class="banner-div">
        <ul class="banner-image" oldScoll="0" newScoll="">
            <li>
            <img class="bannerImg" src="/Img/artwork/ArtWorkHome/yspsy_1.png"></li>
            <li class="action">
            <img class="bannerImg" src="~/Img/artwork/ArtWorkHome/banner2.jpg"></li>
            <li class="action">
            <img class="bannerImg" src="~/Img/artwork/ArtWorkHome/banner1.jpg"></li>
            <li class="action">
            <img class="bannerImg" src="~/Img/artwork/ArtWorkHome/banner4.jpg"></li>
        </ul>
    </div>
</div>

css

.index-banner
{width:100%;height:710px;margin-top:25px;position:fixed;}
.index-banner .banner-div
{height:100%;position:relative;overflow:hidden;}
.index-banner .banner-div .left,.index-banner .banner-div .right
{width:50px;height:50px;display:inline-block;background-position:center;background-repeat:no-repeat;position:absolute;top:50%;cursor:pointer;display:none}
.index-banner .banner-div:hover .left,.index-banner .banner-div:hover .right
{display:inline-block;}
.index-banner .banner-div .left
{left:20px;background-image:url(/homeImg/head/z-hei.png);}
.index-banner .banner-div .right
{right:20px;background-image:url(/homeImg/head/y-hei.png);}
.index-banner .banner-div ul
{width:100%;height:100%;position:relative;}
.index-banner .banner-div ul li
{float:left;width:100%;height:100%;background-size:100% 100%;background-position:center;position:absolute;top:0;left:100%;}
.index-banner .banner-div ul li:first-child{left:0;}
/*.index-banner .banner-div ul li.action{cursor:pointer;}*/
.index-banner .banner-div .bannerImg
{background-size:cover;width:100%;height:100%;}

js

//初始化banner切换，以及添加点击小圆点切换
function setBanner() {
    //设置8秒后再次执行滑动
    setInterval(function () {
        scollBanner(0, $(".banner-image"), $(".banner-image li"));
    }, 10000);
}

//进行banner图切换
var scollType = 0;//滑动类型--1：点击活动；0：自动滑动
function scollBanner(scollType,id,liId) {
    var oldScoll = parseInt(id.attr("oldScoll"));
    var newScoll = parseInt(id.attr("newScoll"));
    if (0 == scollType) {
        newScoll = oldScoll + 1;//当前滑动值
    }

    var bannerCount = liId.length;
    if (newScoll < 0) {
        newScoll = bannerCount - 1;
    } else if (bannerCount <= newScoll) {
        newScoll = 0;
    }
    id.attr("newScoll", newScoll);
    runBannerScoll(id,liId)//处理具体的滑动逻辑
}

//banner具体的滑动事件
function runBannerScoll(id,liId) {
    var bannerWidth = id.width();
    var oldScoll = id.attr("oldScoll");//当前滑动值
    var newScoll = id.attr("newScoll");//待滑动值

    bannerWidth = bannerWidth * -1;

    liId.eq(newScoll).css({ left: bannerWidth * -1 });
    liId.eq(newScoll).animate({ left: 0 }, 2000, function () { });

    liId.eq(oldScoll).animate({ left: bannerWidth }, 2000, function () {
        id.attr("oldScoll", newScoll);
    });
    //if (oldScoll < newScoll) {
    //    bannerWidth = bannerWidth * -1;
    //}

    //liId.eq(newScoll).animate({ left: 0 }, 2000, function () {
    //    id.attr("oldScoll", newScoll);
    //});
    //liId.eq(oldScoll).animate({ left: bannerWidth }, 2000, function () {
    //    //将两者之间的li left进行更新
    //    if (oldScoll < newScoll - 1) {
    //        for (var i = oldScoll + 1; i < newScoll; i++) {
    //            liId.eq(i).css({ left: bannerWidth });
    //        }
    //    } else if (newScoll < oldScoll - 1) {
    //        for (var i = newScoll + 1; i < oldScoll; i++) {
    //            liId.eq(i).css({ left: bannerWidth });
    //        }
    //    }
    //});
}

以上为只有图没有底标，下面代码为加入底标和左右按钮
html

<div class="index-banner">
    <div class="w-1200 banner-div">
        <ul class="banner-image" oldScoll="0" newScoll="">
            <li class="action" col="#d3d7d8" style="background-image:url(/temp/bannerNew/banner4.png);" urlPath="/Artist/ArtistHome/30132"></li>
            <li col="#D87735" style="background-image:url(/temp/bannerNew/banner1.png);"></li>
            <li class="action" col="#fa9f44" style="background-image:url(/temp/bannerNew/banner2.png);" urlPath="/ManYiNews/Detail/3249"></li>
            @*<li class="action" col="#e7e3e4" style="background-image:url(/temp/bannerNew/banner3.png);" urlPath="/Artist/ArtistHome/30155"></li>*@
        </ul>
        <div class="banner-dot">
            <div class="all-dot">
                <i class="current"></i>
                <i></i>
                <i></i>
            </div>
        </div>
        <span class="left"></span>
        <span class="right"></span>
    </div>
</div>

css

/* 顶部banner图 */
.index-banner{width:100%;height:400px;line-height:400px;}
.index-banner .banner-div{height:100%;position:relative;overflow:hidden;}
.index-banner .banner-div .left,.index-banner .banner-div .right{width:50px;height:50px;display:inline-block;background-position:center;background-repeat:no-repeat;position:absolute;top:50%;cursor:pointer;display:none;}
.index-banner .banner-div:hover .left,.index-banner .banner-div:hover .right{display:inline-block;}
.index-banner .banner-div .left{left:20px;background-image:url(/homeImg/head/z-hei.png);}
.index-banner .banner-div .right{right:20px;background-image:url(/homeImg/head/y-hei.png);}
.index-banner .banner-div ul{width:100%;height:100%;position:relative;}
.index-banner .banner-div ul li{float:left;width:1200px;height:100%;background-size:100% 100%;background-position:center;position:absolute;top:0;left:1200px;}
.index-banner .banner-div ul li:first-child{left:0;}
.index-banner .banner-div ul li.action{cursor:pointer;}
.banner-dot{width:100%;height:16px;line-height:16px;position:absolute;left:0;bottom:20px;text-align:center;}
.banner-dot .all-dot{height:100%;padding:0 15px;background-color:#cdcdcd;opacity:0.8;border-radius:8px;display:inline-block;}
.banner-dot .all-dot i{width:10px;height:10px;margin-right:10px;background-color:#fff;border-radius:50%;cursor:pointer;display:inline-block;}
.banner-dot .all-dot i:last-child{margin-right:0;}
.banner-dot .all-dot i.current{width:50px;border-radius:5px;}

js

//这段应该不需要，没仔细看，都贴出来
function init() {
    //根据第一张banner修改背景色
    var col = $(".banner-image li:first-child").attr("col");
    $(".index-banner").css("backgroundColor" , col);
    //banner底板切换按钮
    var bannerCount = $(".banner-image li").length;
    var bannerHtml = "<i class=\"current\"></i>";
    for (var i = 1; i < bannerCount; i++) {
        bannerHtml += "<i></i>";
    }
    $(".all-dot").html(bannerHtml);

    $(".action").bind("click", function () {
        urlPath = $(this).attr("urlPath");
        document.location.href = urlPath;
    });
}

//初始化banner切换，以及添加点击小圆点切换
function setBanner() {
    //设置6秒后再次执行滑动
    setInterval(function () {
        scollBanner(0);
    }, 8000);
    //鼠标覆盖banner停止滑动
    $(".banner-image").bind("mouseover", function () {
        bannerScollOverBoo = false;
    });
    //鼠标覆盖banner停止滑动
    $(".banner-image").bind("mouseleave", function () {
        bannerScollOverBoo = true;
    });
    //添加点击小圆点切换
    $(".all-dot i").bind("click", function () {
        if (bannerScollBoo) {
            $(".banner-image").attr("newScoll", $(this).index());
            scollBanner(1);
        }
    });
    //添加鼠标覆盖小圆点切换
    $(".all-dot i").bind("mouseover", function () {
        if (bannerScollBoo) {
            $(".banner-image").attr("newScoll", $(this).index());
            scollBanner(1);
        }
    });
    //添加左滑动点击事件
    $(".banner-div .left").bind("click", function () {
        if (bannerScollBoo) {
            var oldScoll = parseInt($(".banner-image").attr("oldScoll"));
            $(".banner-image").attr("newScoll", --oldScoll);
            scollBanner(2);
        }
    });
    //添加右滑动点击事件
    $(".banner-div .right").bind("click", function () {
        if (bannerScollBoo) {
            var oldScoll = parseInt($(".banner-image").attr("oldScoll"));
            $(".banner-image").attr("newScoll", ++oldScoll);
            scollBanner(1);
        }
    });
}

//进行banner图切换
var bannerScollBoo = true;//当前是否在滑动、
var bannerScollOverBoo = true;//鼠标是否在banner上
var scollType = 0;//滑动类型--1：点击活动；0：自动滑动；2：左滑动
function scollBanner(scollType) {
    if (bannerScollBoo && bannerScollOverBoo) {
        bannerScollBoo = false;
        var oldScoll = parseInt($(".banner-image").attr("oldScoll"));
        var newScoll = parseInt($(".banner-image").attr("newScoll"));
        if (0 == scollType) {
            newScoll = oldScoll + 1;//当前滑动值
        }

        var bannerCount = $(".banner-image li").length;
        if (newScoll < 0) {
            newScoll = bannerCount - 1;
        } else if (bannerCount <= newScoll) {
            newScoll = 0;
        }
        $(".banner-image").attr("newScoll", newScoll);
        scollMangerDot();//更新小圆点选中状态
        runBannerScoll(scollType)//处理具体的滑动逻辑
    }
}

//更新小圆点选中状态
function scollMangerDot() {
    var oldScoll = $(".banner-image").attr("oldScoll");//当前滑动值
    var newScoll = $(".banner-image").attr("newScoll");//待滑动值
    $(".all-dot i").removeClass("current");
    $(".all-dot i").eq(newScoll).addClass("current");
}

//banner具体的滑动事件
function runBannerScoll(scollType) {
    var bannerWidth = $(".banner-image").width();
    var oldScoll = $(".banner-image").attr("oldScoll");//当前滑动值
    var newScoll = $(".banner-image").attr("newScoll");//待滑动值
    if (2 != scollType) {
        bannerWidth = bannerWidth * -1;
    }

    $(".banner-image li").eq(newScoll).css({ left: bannerWidth * -1 });
    $(".banner-image li").eq(newScoll).animate({ left: 0 }, 2000, function () {});

    $(".banner-image li").eq(oldScoll).animate({ left: bannerWidth }, 2000, function () {
        $(".banner-image").attr("oldScoll", newScoll);
        bannerScollBoo = true;
    });

    //更新背景色
    var color = $(".banner-image li").eq(newScoll).attr("col");
    $(".index-banner").css("backgroundColor", color);
}
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值