zoukankan      html  css  js  c++  java
  • jq 无限点击轮播

    <style type="text/css">
    		*{margin: 0;padding: 0;}
    		.fl{
    			float: left;
    		}
    			
    		.fr{
    			float: right;
    		}
    		.cl:after{display:block;clear:both;content:"";visibility:hidden;height:0}
    		.cl{zoom:1}
    		
    		.banner{
    			 800px;
    			height: 265px;
    			margin: 40px auto;
    			position: relative;
    			overflow: hidden;
    		}
    		.banner ul li,.banner ol li{
    			list-style: none;
    		}
    		.banner ul{
    			 800px; 
    			position: absolute;
    		}
    		.banner ul li img{
    			 400px;
    		}
    		.banner ol{
    			position: absolute; 
    			top: 0;
    			 40px;
    			left: calc((100% - 40px)/2);
    		}
    		.banner ol li{
    			 40px;
    			height: 40px;
    			border-radius: 50%;
    			background: #00DD1C;
    			color: #fff;
    			line-height: 40px;
    			text-align: center;
    			margin-bottom: 10px;
    		}
    		.banner ol li.active{
    			background: #007FFF;
    		}
    		 .btns {
    			margin-top: 10px auto;
    			
    		}
    		 .btns b{
    			 100px;
    			height: 40px;
    			line-height: 40px;
    			text-align: center;
    			background: #039702;
    			color: #fff;
    			display: block;
    			float: left;
    			margin: 0 10px;
    			cursor: pointer;
    		}
    		.btns b:hover{
    			background: #00A03C;
    		}
    	</style>
    

      

    <div class="banner">
    			<ul>
    				<li class="cl">
    					<img class="fl" src="images/img3.jpg" />
    					<div class="txt fr">
    						<h3>1</h3>
    						<p>这是1</p>
    					</div>
    				</li>
    				<li class="cl">
    					<img class="fl" src="images/img4.jpg" />
    					<div class="txt fr">
    						<h3>2</h3>
    						<p>这是2</p>
    					</div>
    				</li> 
    				<li class="cl">
    					<img class="fl" src="images/img2.jpg" />
    					<div class="txt fr">
    						<h3>3</h3>
    						<p>这是3</p>
    					</div>
    				</li> 
    				<li class="cl">
    					<img class="fl" src="images/img1.jpg" />
    					<div class="txt fr">
    						<h3>4</h3>
    						<p>这是4</p>
    					</div>
    				</li> 
    				<li class="cl">
    					<img class="fl" src="images/img1.jpg" />
    					<div class="txt fr">
    						<h3>5</h3>
    						<p>这是4</p>
    					</div>
    				</li> 
    			</ul>
    			<ol>
    				<li>1</li>
    				<li>2</li>
    				<li>3</li>
    				<li>4</li>
    				<li>5</li>
    			</ol>
    		</div>
    		
    		<div class="btns cl">
    			<b class="prev">上一个</b>
    			<b class="next">下一个</b>
    		</div>
    

      

    <script>
    			$(function(){
    				var Hg = $('.banner ul li').height();
    				var lg = $('.banner ul li').length;
    				$('.banner ul').height(Hg*lg);
    				
    				
    				$('.banner ul li').each(function(index,i){
    					$(this).attr('vl',index);
    				})
    				
    				$('.banner ol li').click(function(){
    					var index = $(this).index();
    					con(index)
    				})
    				
    				 $('.btns .next').click(function () {
    					 var _index = $(".banner ul>li:first-child").attr('vl');
    					$(".banner ul").stop().animate({top: -Hg},600, function () {
    						$(".banner ul>li").eq(0).appendTo($(".banner ul"));
    						$(".banner ul").css('top','0px');
    					});
    					console.log(_index);
    					con(_index)
    					
    				})
    				$('.btns .prev').click(function () {
    					 $(".banner ul").css('top',-Hg);
    					$(".banner ul>li").eq(lg - 1 ).prependTo($(".banner ul"));
    					$(".banner ul").stop().animate({top:"0px"},600);
    					
    					var _index = $(".banner ul>li:first-child").attr('vl');
     
    						 console.log(_index);
    						 con(_index)
    					})
    					function con(index){
    					$('.banner ol li').eq(index).addClass('active').siblings().removeClass('active');
    					//$('.banner ol li').parent('ol').siblings('ul').animate({'top': - Hg * index},1000);
    				}
    			})
    		</script>
    

      prependTo,

      appleTo

  • 相关阅读:
    Account group in ERP and its mapping relationship with CRM partner group
    错误消息Number not in interval XXX when downloading
    错误消息Form of address 0001 not designated for organization
    Algorithm类介绍(core)
    梯度下降与随机梯度下降
    反思
    绘图: matplotlib核心剖析
    ORB
    SIFT
    Harris角点
  • 原文地址:https://www.cnblogs.com/yjgbk/p/9927478.html
Copyright © 2011-2022 走看看