你的位置:首页 > 网页设计

[网页设计]简单图片banner轮播


/**************【css】****************/

    <style type="text/css">
          *{margin:0px;padding:0px;}

     .banner{width:100%;height:300px;background:rgb(63,12,9);position:relative;}
          .cont{width:760px;height:300px;margin:0px auto;background:#cc9999;position:relative;}
          .cont ul li{list-style-type:none;width:760px;height:300px;position:absolute;top:0px;left:0px;display:none;}
          .cont .prev{width:50px;height:55px;position:absolute;top:100px; left:0px;background:url("images1/button-prev-next.png");background-position:60px -140px;display:none;cursor:pointer;}
          .cont .next{width:50px;height:55px;position:absolute;top:100px; right:0px;background:url("images1/button-prev-next.png");background-position:-60px -140px;display:none;cursor:pointer;}
          .motbig{width:175px;height:17px;position:absolute;bottom:10px;left:0px;right:0px;margin:0px auto;list-style-type:none;}
          .motbig ul li{list-style-type:none;width:12px;height:12px;border:1px #ffffff solid;float:left;margin:1px 5px;border-radius:50%;cursor:pointer;}
          .motbig ul li.hover{background:#fff;}
     </style>

 

/*****************************/

/************【布局】*************/

<div >
        <div >
            <ul>
                <li barbg="rgb(63,12,9)">
                    <img src="../images1/1.jpg" alt="" />
                </li>
                <li barbg="rgb(4, 28, 98)">
                    <img src="../images1/2.jpg" alt="" />
                </li>
                <li barbg="rgb(134, 162, 210)">
                    <img src="../images1/3.png" alt="" />
                </li>
                <li barbg="rgb(215, 222, 228)">
                    <img src="../images1/4.jpg" alt="" />
                </li>
                <li barbg="rgb(140, 150, 212)">
                    <img src="../images1/5.jpg" alt="" />
                </li>
                <li barbg="rgb(12, 18, 34)">
                    <img src="../images1/6.jpg" alt="" />
                </li>
                <li barbg="rgb(56, 162, 210)">
                    <img src="../images1/7.jpg" alt="" />
                </li>
            </ul>
            <div ></div>
            <div ></div>
        </div>
        <div >
            <ul>
                <li ></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

/*******************************************/

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

/************【js】*******************/

<script type="text/javascript">
        var _index = 0;
        var time;
         //点击小圆点按钮切换图片
        $(".motbig ul li").click(function () {
            $(this).addClass("hover").siblings().removeClass("hover");
            _index = $(this).index(); //获取当前序号
            play(_index);
        })
       
        //向左切换
        $(".cont .prev").click(function () {
            _index--;
            if (_index < 0) { _index = 6; }
            play(_index);
            $(".motbig ul li").eq(_index).addClass("hover").siblings().removeClass("hover");
        })

        //向右切换
        $(".cont .next").click(function () {
            autoPaly();
        })

        function autoPaly() {
            _index++;
            if (_index > 6) { _index = 0; }
            play(_index);
            $(".motbig ul li").eq(_index).addClass("hover").siblings().removeClass("hover");
        }

        function play(_index) {
            var bg = $(".cont ul li").eq(_index).attr("barbg");
            $(".banner").css({ background: bg });
            $(".cont ul li").eq(_index).fadeIn().siblings().fadeOut();
        }

        //移动到banner区域显示左右切换按钮,移开banner区域隐藏左右切换按钮
        $(".cont").hover(function () {
            $(".cont .prev").show();
            $(".cont .next").show();
            clearInterval(time);
        }, function () {
            $(".cont .prev").hide();
            $(".cont .next").hide();
            time = setInterval("autoPaly()", 3000);
        });

        time=setInterval("autoPaly()", 3000);
    </script>

/*****************************/

效果: