无缝轮播切换

来源：互联网发布：linux下关闭防火墙编辑：程序博客网时间：2024/06/09 18:29
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无缝轮播切换</title><script src="jquery.min.js" type="text/javascript"></script><style>*{    margin:0;    padding:0;    list-style-type:none;    }.bannerBg{    width:1080px;    height:400px;    margin:0 auto;    border:1px solid #CCC;    overflow:hidden;    position:relative;    }#bannerImg{    width:6000px;    position:absolute;    left:0;    top:0;    }#bannerImg li{    width:1080px;    float:left;    }.bannerBg .pointBg{    width:50%;    position:absolute;    left:0;    bottom:10px;    text-align:center;    margin-left:50%;    }.bannerBg .pointBg li{    width:10px;    height:10px;    border-radius:50%;    background:#eee;    margin-left:3px;    float:left;    } .bannerBg .pointBg li.on{    background:#F60;    }.pre{    width:40px;    height:50px;    position:absolute;    left:0;    top:50%;    color:#FFF;    font-size:35px;    background:#000;    font-family:"宋体";    text-align:center;    line-height:50px;    cursor:pointer;    }.nex{    width:50px;    height:50px;    position:absolute;    right:0;    top:50%;    color:#FFF;    font-size:35px;    background:#000;    font-family:"宋体";    text-align:center;    line-height:50px;    cursor:pointer;    }</style></head><body><!--整个banner的容器--><div class="bannerBg">    <!--banner图的容器-->    <ul id="bannerImg">        <li><a href="#"><img src="images/banner-1.jpg" /></a></li>        <li><a href="#"><img src="images/banner-2.jpg" /></a></li>        <li><a href="#"><img src="images/banner-3.jpg" /></a></li>        <li><a href="#"><img src="images/banner-4.jpg" /></a></li>    </ul>    <!--banner图的容器 结束-->    <!--banner底部圆点容器-->    <ul class="pointBg"></ul>    <!--banner前进后退容器-->    <div class="pre"><</div>    <div class="nex">></div></div><!--整个banner的容器 结束--> <script>        $(function(){            $(".pre").hide();//隐藏前进后退按钮，鼠标划入banner容器时显示            $(".nex").hide();            var i=0;//定义i变量            var clone=$("#bannerImg li").first().clone();//查找#bannerImg li的第一个元素并复制。            $("#bannerImg").append(clone);//把复制的图添加到banner最后            var size = $("#bannerImg li").size();//查找banner图的数量并赋值给变量size            for(var j=0;j<size-1;j++){          //动态添加圆点                $(".pointBg").append("<li></li>")                }            $(".pointBg li").first().addClass("on");            //左            $(".pre").click(function(){                    moveL()                })            function moveL(){    //封装向左滑动函数                i++                if(i==size){                    $("#bannerImg").css({left:0});                    i=1;                    }                $("#bannerImg").animate({left:-i*1080},500);                if(i==size-1){                    $(".pointBg li").eq(0).addClass("on").siblings().removeClass("on");                    }                else{                    $(".pointBg li").eq(i).addClass("on").siblings().removeClass("on");                    }                }            //圆点,鼠标滑过圆点，banner变为对应的图。            $(".pointBg li").hover(function(){                var index=$(this).index();                i=index;                $("#bannerImg").animate({left:-index*1080});                $(this).addClass("on").siblings().removeClass("on");                })            //定时器，banner自动滚动            var t=setInterval(moveL                ,2000)            $(".bannerBg").hover(function(){//鼠标进入，停止计时器，鼠标滑出，开始执行滑动函数                clearInterval(t);                },function(){                moveL()                    })            //右                $(".nex").click(function(){                moveR()                })            function moveR(){  //封装向右滑动函数                i--                if(i==-1){                    $("#bannerImg").css({left:-(size-1)*1080});                    i=size-2                    }                $("#bannerImg").animate({left:-i*1080},500);                $(".pointBg li").eq(i).addClass("on").siblings().removeClass("on");                }            //前进后退按钮隐藏显示            $(".bannerBg").mouseenter(function(){                $(".pre").show();                $(".nex").show();                })            $(".bannerBg").mouseleave(function(){                $(".pre").hide();                $(".nex").hide();                })            })    </script></body></html>
0 0