固定宽度的轮播

最新推荐文章于 2022-05-13 15:37:37 发布

dongsdh

最新推荐文章于 2022-05-13 15:37:37 发布

阅读量355

点赞数

分类专栏：轮播

本文链接：https://blog.csdn.net/dongsdh/article/details/83579011

版权

轮播专栏收录该内容

5 篇文章 0 订阅

订阅专栏

前言：固定宽度的轮播1200px

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.banner2{
        	height: 400px;
		    width: 1200px;
		    /*margin: 0 auto;*/
		    overflow: hidden;
		    position: relative;
		    background: #FE0;
        	z-index: 22;
        }
        .banner2 .img{
        	width:5000000px;
        	position:absolute;
        	left:0;
        	top:0;
        	height: 400px;
        }
        .banner2 .img li{width: 1200px;height: 500px;float: left;list-style: none;}
        
        .banner2 .num{position:absolute;width:100%;bottom:10px;left:0;text-align:center;font-size:0;}
        .banner2 .num li{width:10px;height:10px;background:#888;border-radius:50%;display:inline-block;
        margin:0 3px;cursor:pointer;}
        .banner2 .num .on{background:#f60;}
        
        .banner2 .btnn{width:30px;height:50px;background:rgba(0,0,0,0.5);
        position:absolute;top:50%;margin-top:-25px;cursor:pointer;  text-align:center;line-height:50px;
        color:#fff;font-size:40px;font-family:"SimSun";
        display:none;
        }
        .banner2:hover .btnn{display:block;}
        
        .banner2 .btn_l{left:0;}
        .banner2 .btn_r{right:0;}
        .banner2 .img li a{display: inline-block;width: 100%;height: 100%;}
       
       
        .banner2 .img li img{
            width:100%;
            height: 400px;
        }
        .banner2 .bannernum{
        	position: absolute;
        	left: 50%;
        	transform: translate(-50%);
        	font-size:20px;
        	bottom: 15px;
        	/*display: none;*/
        }
        .banner2>.computertxt{
        	width: 230px;
        	font-size: 46px;
		    color: #333;
		    font-weight: bold;
		    position: absolute;
		    bottom:13px;
		    right: 40px;
		    
        }
        .banner2>.computertxt img{width: 100%;}
	</style>
</head>
<body>
	<div class=" banner2">
     	<ul class="img">
     		<li>
     			<a target="_blank" href="##">这里放图片1</a>
     		</li><li>
     			<a target="_blank" href="##" >这里放图片2</a>
     		</li>
     	</ul>
        <ul class="num">
		</ul>
        <div class="btnn btn_l">&lt;</div>
		<div class="btnn btn_r">&gt;</div>
    </div>
    <script src="jquery.min.js"></script>
    <script>
    	$(function(){
            var i=0;
            var clone=$(".banner2 .img li").first().clone();
            $(".banner2 .img").append(clone);
            var size=$(".banner2 .img li").size();
            for(var j=0;j<size-1;j++){
                $(".banner2 .num").append("<li></li>");
            }
//            鼠标滑入原点
            $(".banner2 .num li").hover(function(){
                var index=$(this).index();
                i=index;
                $(".banner2 .img").stop().animate({left:-index*1200},500);
                $(this).addClass("on").siblings().removeClass("on");
            });
//            自动轮播
            var t=setInterval(moveL,2000);
//            对banner2的定时器操作
            $(".banner2").hover(function(){
                clearInterval(t);
            },function(){
                t=setInterval(moveL,2000);
            });
//第一个li样式

            $(".banner2 .num li").first().addClass("on");

//            左
            $(".banner2 .btn_l").click(function(){
                moveL();
            });

            //        右
            $(".banner2 .btn_r").click(function(){
                moveR();
            });




//           封装的动画函数
            function moveL(){
                i++;
                if(i==size){
//                    i=0;
                    $(".banner2 .img").css({left:0});
                    i=1;
                }
                $(".banner2 .img").stop().animate({left:-i*1200},500);
                if(i==size-1){
                    $(".banner2 .num li").eq(0).addClass("on").siblings().removeClass("on");
                }else{
                    $(".banner2 .num li").eq(i).addClass("on").siblings().removeClass("on");
                }
            }



            function moveR(){
                i--;
                if(i==-1){
                    $(".banner2 .img").css({left:-(size-1)*1200});
                    i=size-2;
                }
                $(".banner2 .img").stop().animate({left:-i*1200},500);
                $(".banner2 .num li").eq(i).addClass("on").siblings().removeClass("on");
            }




        });
    </script>
</body>
</html>

效果：

dongsdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
固定宽度的轮播

前言：固定宽度的轮播1200px&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0; } .banne
复制链接

扫一扫

专栏目录