• jQuery轮播图


    		yii2 轮播	
    
    	样式:
    
    	<style type="text/css">
    	*{margin:0;padding:0}
    	body{margin:50px}
    	li{list-style:none; float:left;}	
        .div1{
    	  overflow:hidden;
    	  204px;
    	  height:204px;
    	  border:2px solid red;
    	  position:relative;
    	}
    	.div1 ul{
    	  1000px;
    	  position:absolute;
    	  left:0;
    	  top:0;
    	}
    	.div1 ol{
    	  position:absolute;
    	  bottom:-5px;
    	  left:50px;
          background:#ffffff;
    	}
    	.div1 ol li{	  
          height:30px;
    	  line-height:30px;
    	  padding:0 6px;
    	  border:2px solid #000000;
    	  cursor: pointer;  
    	}
    	.wrap p{
    	  position:absolute;
    	  bottom:0;
    	  left:10px;
          background:#00ff00;
    	  opacity:50%;//不透明度
    	}
    	.current{
    	   background:#ff0033;
    	   color:#33ff99;
    	 }
    	</style>
    
    	代码:
    	
    	<div class="div1">
    	    <div class='img'>
    			<ul>
    				<li><img src="images/1.jpg" alt="逗比1" /></li>
    				<li><img src="images/2.jpg" alt="逗比2" /></li>
    				<li><img src="images/3.jpg" alt="逗比3" /></li>
    				<li><img src="images/4.jpg" alt="逗比4" /></li>
    				<li><img src="images/5.jpg" alt="逗比5" /></li>
    			</ul>
    		</div>
    		<ol>
    			<li class='current'>1</li>
    			<li>2</li>
    			<li>3</li>
    			<li>4</li>
    			<li>5</li>
    		</ol>
    		<p class="p">逗比1</p>
    	</div>
    
    <script src="jQueryvalidate/jquery.js"></script>
    
    	jQuery代码:
    <script>
    	$(function(){
    		//获取对象
    		var puli = $('.div1 ul li');//图片 li
    		var pul = $('.div1 ul');//图片 ul
    		var poli = $('.div1 ol li');// 数字 li
    		//定义一个计数器
    		var n = 0;
    		//点击数字
    		poli.hover(function(){			
    			clearInterval(timer);
    			var _this = $(this);
    			timeout = setTimeout(function(){	//鼠标放到数字上面延迟显示		
    				var index = $(_this).index();//获取索引 //0 1 2 3 4
    				$(_this).addClass('current').siblings().removeClass();//点击谁,谁改变颜色
    				$('.p').html($('img').eq(index).attr('alt'));//获取对应的alt内容,显示p标签中
    				//点击动画
    				$(pul).animate({
    					'left':'-'+index*200+'px'
    				},200);
    				n = index;
    			},300);
    		},function(){
    			clearTimeout(timeout);
    			timer = setInterval(slider,2000);
    			var index = $(this).index();
    			n = index;
    		});
    		//动画轮播
    		function slider(){
    			//判断计数器,等于4就从0开始
    			if(n==4){
    		    	n=0;
    		  	}else{
    		      n++;			  
    		  	}
    			$('.p').html($('img').eq(n).attr('alt'));//获取对应的alt内容,显示p标签中
    			poli.eq(n).addClass('current').siblings().removeClass();//改变对应数字的颜色
    			//图片的动画
    			pul.animate({
    				'left':'-'+n*200+'px'
    			},200);
    		}
    		//定义计时器,执行动画轮播函数
    		var timer = setInterval(slider,2000);
    		//鼠标悬浮
    		$('.img').hover(function(){
    			//鼠标放上去停止,清除计时器
    			clearInterval(timer);
    		},function(){
    			//重新定义计时器
    			timer = setInterval(slider,2000);
    		});
    	});
    </script>
    		
    
  • 相关阅读:
    HDU 4389 X mod f(x)
    SRM 400(1-250pt, 1-500pt)
    FZU 2113 Jason的特殊爱好
    POJ 3208 Apocalypse Someday
    HDU 4734 F(x)
    HDU 3555 Bomb
    HDU 2089 不要62
    poj2488(A Knight's Journey)
    poj3267(The Cow Lexicon)
    poj2513(Colored Sticks)
  • 原文地址:https://www.cnblogs.com/jhy-ocean/p/5385755.html
Copyright © 2020-2023  润新知