用jQ方法实现轮播

其他 2018-06-14 20:07:19 阅读次数: 2

一、传统轮播

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{
		margin: 0;
		padding:0;
	}
	.box{
		height: 300px;
		width:560px;
		border:1px solid pink;
		margin: 100px auto;
		position: relative;
		overflow: hidden;
	}
	.m_unit{
		width:5000px;
		height:300px;
		position: absolute;
		left:0;
		top:0;
	}
	.m_unit ul{
		overflow: hidden;
	}
	.m_unit ul li{
		list-style: none;
        float: left;
	}
	
	.btn span{
		width:55px;
		height:55px;
		position: absolute;
		top:50%;
		margin-top: -28px;
	}
	.btn .left{
		background: url('image/btnL.png');
		left:0;
	}
	.btn .right{
		background: url('image/btnR.png');
		right:0;
	}
	.circle ul{
        position: absolute;
        bottom:10px;
        right:0;
	}
	.circle ul li{
		float: left;
		list-style: none;
		width:20px;
		height:20px;
		border-radius: 50%;
		background: orange;
		margin-right: 10px;
	}
	.circle ul li.current{
		background:red;
	}

</style>
<body>
	<div class="box" id="box">
		<div class="m_unit" id='m_unit'>
			<ul id='imgUl'>
				<li><a href="javascript:;"></a><img src='image/0.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/1.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/2.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/3.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/4.jpg'></li>
			</ul>
		</div>
		<div class="btn">
			<span class='left' id='leftBtn'></span>
			<span class='right' id='rightBtn'></span>
		</div>
		<div class='circle' id='circle'>
			<ul>
				<li class='current'></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>

	<script src='../js/jquery-1.12.3.min.js'></script>
	<script>
	    var imgLength = $('#imgUl li').length;
	    $circleLis = $('.circle ul li');
	    $('#imgUl').append($('#imgUl li').eq(0).clone());  
	          
        var timer = setInterval(function (){
        	rightHandler();
        }, 2000);
        $('#box').mouseenter(function(){
        	clearInterval(timer);
        })
        $('#box').mouseleave(function(){
        	timer = setInterval(function (){
        	    rightHandler();
            }, 2000);
        })
        

        var idx = 0;
        $('#rightBtn').click(rightHandler);
	    function rightHandler(){
	    	// if($('#m_unit').isanimated) return;
            idx++;
	        $('#m_unit').animate({'left':-560*idx},1000,function(){
	            if(idx > imgLength-1){
	            	idx=0;
	            	$(this).css('left',0);
	            }
	        })
	    	changeCircle();
	    }
        $('#leftBtn').click(function(){
        	// if($('#m_unit').isanimated) return;
        	idx--;
        	if(idx < 0){
            	   idx=imgLength-1;
            	   $('#m_unit').css('left',-560*imgLength);
                }
            $('#m_unit').animate({'left':-560*idx},1000);
            changeCircle();
        });

       $('.circle ul li').each(function (i){
       	   $(this).click(function(){
               idx = i;
               $('#m_unit').animate({'left':-560*idx},1000);
       	   	   changeCircle();
       	   })
       })
        
        function changeCircle(){
	    var n = idx;
            if(n == $circleLis.length)  n=0;
            $circleLis.eq(n).css('background','red').siblings().css('background','orange');
	    }	    
	</script>
	
</body>
</html>

二、呼吸轮播

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{
		margin: 0;
		padding:0;
	}
	.box{
		height: 300px;
		width:560px;
		border:1px solid pink;
		margin: 100px auto;
		position: relative;
		/*overflow: hidden;*/
	}
	.m_unit{
		width:5000px;
		height:300px;
		position: absolute;
		left:0;
		top:0;
	}
	.m_unit ul{
		overflow: hidden;
	}
	.m_unit ul li{
		list-style: none;
        position: absolute;
        left:0;
        top:0;
        opacity: 0;
        filter:alpha(opacity=0);
  	}
  	.m_unit ul li.current{
  		opacity: 1;
  		filter:alpha(opacity=1);
  	}
	.btn{
		overflow: hidden;
	}
	.btn span{
		width:55px;
		height:55px;
		position: absolute;
		top:50%;
		margin-top: -28px;
	}
	.btn .left{
		background: url('image/btnL.png');
		left:0;
	}
	.btn .right{
		background: url('image/btnR.png');
		right:0;
	}
	.circle ul{
                position: absolute;
                bottom:10px;
                right:0;
	}
	.circle ul li{
		float: left;
		list-style: none;
		width:20px;
		height:20px;
		border-radius: 50%;
		background: orange;
		margin-right: 10px;
	}
	.circle ul li.current{
		background:red;
	}

</style>
<body>
	<div class="box" id="box">
		<div class="m_unit" id='m_unit'>
			<ul id='imgUl'>
				<li class='current'><a href="javascript:;"></a><img src='image/0.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/1.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/2.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/3.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/4.jpg'></li>
			</ul>
		</div>
		<div class="btn">
			<span class='left' id='leftBtn'></span>
			<span class='right' id='rightBtn'></span>
		</div>
		<div class='circle' id='circle'>
			<ul>
				<li class='current'></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>


	<script src='../js/jquery-1.12.3.min.js'></script>
	<script>
        var $imgLis = $('#imgUl li');
        var $circleLis = $('#circle ul li');
        var timer = setInterval(function (){
        	rightHandler();
        }, 2000);
        $('#box').mouseenter(function(){
        	clearInterval(timer);
        })
        $('#box').mouseleave(function(){
        	timer = setInterval(function (){
        	     rightHandler();
            }, 2000);
        })

        var idx = 0;
	    $('#rightBtn').click(rightHandler);
	    function rightHandler(){
	    	$imgLis.eq(idx).animate({'opacity':0},1000);
	    	idx++;
	    	if(idx == $imgLis.length){
	    		idx = 0;
	    	}
	    	$imgLis.eq(idx).animate({'opacity':1},1000);

	    	changeCircle();
	    }

	     $('#leftBtn').click(function(){
	    	$imgLis.eq(idx).animate({'opacity':0},1000);
	    	idx--;
	    	if(idx < 0){
	    		idx = $imgLis.length-1;
	    	}
	    	$imgLis.eq(idx).animate({'opacity':1},1000);
	    	changeCircle();
	    
	     })
	    	
	    $circleLis.each(function(i){
	    	$(this).click(function(){
	    		$imgLis.eq(idx).animate({'opacity':0}, 1000);
	    		idx = i;
	    		$imgLis.eq(idx).animate({'opacity':1}, 1000);
	    		changeCircle();
	    	})
	    })

	    function changeCircle(){   
            	var n = idx;
	    	    $circleLis.eq(n).css('background','red').siblings().css('background','orange');
	    }


	// </script>
	
</body>
</html>

三、间歇轮播

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	.box{
		width:500px;
		height:200px;
		border:1px solid gray;
		margin: 100px auto;
		position: relative;
		overflow: hidden;
	}
	ul{
		position: absolute;
		left:0;
		top:0;
	}
	li{
		width: 500px;
		height:50px;
		line-height: 50px;
		list-style: none;
	}
</style>
<body>
	<div class="box" id='box'>
		<ul id = 'boxUl'>
			<li>红红在摇头</li>
			<li>黄黄跟着摇头</li>
			<li>粉粉一直摇头</li>
			<li>蓝蓝看着红红</li>
			<li>青青不知所措</li>
			<li>橙橙也在摇头</li>
			<li>紫紫疯了</li>
		</ul>
	</div>
    <script src='../js/jquery-1.12.3.min.js'></script>
	<script>

    $('#box').mouseenter(function(){
    	clearInterval(timer);
    });
    $('#box').mouseleave(function(){
    	timer = setInterval(function (){
        idx++;
        
    	boxUl.animate({'top':-50*idx},1000,function(){
	    		if(idx == lisLength/2){
	        	idx = 0;
	        	boxUl.css('top',0);
	        }
    	});
    }, 2000)
    });

	
	var boxUl = $('#boxUl');
	var boxLis = $('#boxUl li');
	boxUl.innerHTML += boxUl.innerHTML;
	lisLength = boxLis.length;

    var idx = 0;
    var timer = setInterval(function (){
        idx++;
        
    	boxUl.animate({'top':-50*idx},1000,function(){
	    		if(idx == lisLength/2){
	        	idx = 0;
	        	boxUl.css('top',0);
	        }
    	});
    }, 2000)
	</script>
	
</body>
</html>

四、三位置轮播

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	*{
		margin: 0;
		padding:0;
	}
	.box{
		height: 300px;
		width:560px;
		border:1px solid pink;
		margin: 100px auto;
		position: relative;
		/*overflow: hidden;*/
	}
	
	.m_unit ul{
		overflow: hidden;
	}
	.m_unit ul li{
		position: absolute;
		left:560px;
		top:0;
		list-style: none;
	}
	.m_unit ul li.current{
		left:0;
	}
	.btn{
		overflow: hidden;
	}
	.btn span{
		width:55px;
		height:55px;
		position: absolute;
		top:50%;
		margin-top: -28px;
	}
	.btn .left{
		background: url('image/btnL.png');
		left:0;
	}
	.btn .right{
		background: url('image/btnR.png');
		right:0;
	}
	.circle ul{
        position: absolute;
        bottom:10px;
        right:0;
	}
	.circle ul li{
		float: left;
		list-style: none;
		width:20px;
		height:20px;
		border-radius: 50%;
		background: orange;
		margin-right: 10px;
	}
	.circle ul li.current{
		background:red;
	}

</style>
<body>
	<div class="box" id="box">
		<div class="m_unit" id='m_unit'>
			<ul id='imgUl'>
				<li class='current'><a href="javascript:;"></a><img src='image/0.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/1.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/2.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/3.jpg'></li>
				<li><a href="javascript:;"></a><img src='image/4.jpg'></li>
			</ul>
		</div>
		<div class="btn">
			<span class='left' id='leftBtn'></span>
			<span class='right' id='rightBtn'></span>
		</div>
		<div class='circle' id='circle'>
			<ul>
				<li class='current'></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>


	<script src='../js/jquery-1.12.3.min.js'></script>
	<script>	    
	    var imgLength = $('#imgUl li').length;
        var timer = setInterval(function (){
        	rightHandler();
        }, 2000);
        $('#box').mouseenter(function(){
        	clearInterval(timer);
        })
        $('#box').mouseleave(function(){
        	timer = setInterval(function (){
        	    rightHandler();
            }, 2000);
        })
        var idx = 0;
	    $('#rightBtn').click(rightHandler);
	    function rightHandler(){
	    	$('#imgUl li').eq(idx).animate({'left':-560},1000);
            idx++;
            if(idx > imgLength-1){
            	idx = 0;	
            }
            $('#imgUl li').eq(idx).css('left',560); 
	        $('#imgUl li').eq(idx).animate({'left':0},1000);
	    	changeCircle();
	    }

	    $('#leftBtn').click(function(){
	    	$('#imgUl li').eq(idx).animate({'left':560},1000);
            idx--;
            if(idx < 0){
            	idx = imgLength - 1; 
            }
            $('#imgUl li').eq(idx).css('left',-560);
            $('#imgUl li').eq(idx).animate({'left':0},1000);
	    	changeCircle();
	    })


	    $('#circle ul li').each(function(){
	    	$(this).click(function(){
	    		var idxx =  $(this).index();
	    		console.log(idx);
	    		console.log(idxx);
	    		if(idx > idxx){
	    			$('#imgUl li').eq(idxx).css('left',-560);
	    			$('#imgUl li').eq(idxx).animate({'left':0},1000);
                    $('#imgUl li').eq(idx).animate({'left':560},1000);		   		   
	    		}else if(idx < idxx){
	    			$('#imgUl li').eq(idxx).css('left',560);
	    			$('#imgUl li').eq(idxx).animate({'left':0},1000);
                    $('#imgUl li').eq(idx).animate({'left':-560},1000);
	    		}
	    		idx = idxx;
	    		changeCircle();
	    	})
	    })

         function changeCircle(){
         	$('#circle ul li').each(function(i){
         		$(this).removeClass('current');
         	})
         	$('#circle ul li').eq(idx).addClass('current');
         }
	</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_42129143/article/details/80586757
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022