无缝轮播切换

最新推荐文章于 2020-07-01 08:12:18 发布

jiangfeng666

最新推荐文章于 2020-07-01 08:12:18 发布

阅读量319

点赞数

本文链接：https://blog.csdn.net/jiangfeng666/article/details/51777267

版权

<!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>

jiangfeng666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
无缝轮播切换

<!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-Ty
复制链接

扫一扫