左右轮播图,banner

最新推荐文章于 2024-06-20 10:18:49 发布

xyphf_和派孔明

最新推荐文章于 2024-06-20 10:18:49 发布

阅读量466

点赞数

分类专栏： DOM&BOM操作

本文链接：https://blog.csdn.net/xyphf/article/details/51957916

版权

DOM&BOM操作专栏收录该内容

64 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>左右轮播,banner</title>
<style>
*{margin:0;padding:0}
li{list-style:none}
img{border:none}
.box {width:1024px;height:410px;margin:0 auto;overflow:hidden;position:relative;}
.box p{width:40px; height:40px; line-height:40px;font-family:arial;color:#fff;text-align:center;
    font-weight: bold; background: #333; border: 1px solid #ccc; position: absolute; top:50%; z-index: 2; cursor: pointer;}
.box .prev { left: 10px; }
.box .next { right: 10px; }

.box ol {position:absolute;left:50%;bottom:5px;z-index: 2;}
.box ol li{position:relative; left:-50%;display:inline-block;width:22px;height:22px;background-color:#666;margin: 0px 10px;float:left;color:#fff;text-decoration:none;text-align: center;border-radius:50%;cursor: pointer;}
.box ol li.active{background:red;}

.box ul {position:absolute;width:9999999999px;top:0;left:0;width:99999px;}
.box ul li {float:left;width:1024px;height:410px;}
.box ul li img {float:left;width:1024px;height:410px;}
</style>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>
$(function(){
    var aImg = $("#play ul li");
    var iSize=$("#play ul li").size();
    var index = 0;
    //按照图片的多少自动生成按钮个数
    (function(){
        for (var i = 0; i < aImg.length; i++) {
            var allA = $("<li class='a'>"+(i+1)+"</li>");
            $("#play ol").append(allA);
            $("#play ol li").first().addClass('active');
        }
        //分页按钮点击
        $("#play").on('click', '.a', function() {
            var _this=$(this).text()-1;
            change(_this);
        });
    })();

    //左按钮
    $("#prev").click(function() {
        index--;
        if (index==-1) {
            index=iSize-1;
        }
        change(index);
    });

    //右按钮
    $("#next").click(function() {
        index++;
        if (index==iSize) {
            index=0;
        }
        change(index);
    });

    //封装切换函数
    function change(index){
        $("#play ol li").eq(index).addClass('active').siblings().removeClass('active');
        $("#play ul").stop().animate({left:-index*$("#play ul li").width()}, 500)
    }

    //自动
    function autoshow(){
        index++;
        if (index<iSize-1) {
            change(index);
        }else{
            index=0;
            change(index);
        }
    }

    //鼠标移入显示,移除隐藏左右按钮
    $("#play").mouseover(function() {
        clearInterval(timer);
    }).mouseout(function() {
        timer=setInterval(autoshow,3000);
    }).trigger('mouseout');
})
</script>
</head>
<body>
<div class="box" id="play">
    <p class="prev" id="prev">&laquo;</p>
    <p class="next" id="next">&raquo;</p>
    <ol>
<!--         <li class="active">1</li>
        <li>2</li>
        <li>3</li> -->
    </ol>
    <ul>
        <li><a href="javascript:;"><img src="images/1.jpg" alt="广告一" /></a></li>
        <li><a href="javascript:;"><img src="images/2.jpg" alt="广告二" /></a></li>
        <li><a href="javascript:;"><img src="images/3.jpg" alt="广告三" /></a></li>
    </ul>
</div>
</body>
</html>