使用懒人图库创建动态图片轮播效果-优快云博客

本文链接：https://blog.youkuaiyun.com/jacky_Jxchen/article/details/6713045

今天工作不算忙，浏览网页时在懒人图库上看到这个效果感觉不错，自己也按照上面效果写了一个方便以后使用

HTML:

<div class="picFocus-a">
	<span class="btnL"><em><</em></span>
	<div class="picWap picWapa">
		<ul>
			<li><a href="#" title=""><img src="images/01.jpg" alt=""/></a></li>
			<li><a href="#" title=""><img src="images/02.jpg" alt=""/></a></li>
			<li><a href="#" title=""><img src="images/03.jpg" alt=""/></a></li>
			<li><a href="#" title=""><img src="images/04.jpg" alt=""/></a></li>
			<li><a href="#" title=""><img src="images/05.jpg" alt=""/></a></li>
			<li><a href="#" title=""><img src="images/06.jpg" alt=""/></a></li>
		</ul>
	</div>
	<span class="btnR"><em>></em></span>
	<div class="subBtn">
		<a class="cur" href="#" title="" target="_blank">1</a>
		<a href="#" title="" target="_blank">2</a>
		<a href="#" title="" target="_blank">3</a>
		<a href="#" title="" target="_blank">4</a>
		<a href="#" title="" target="_blank">5</a>
		<a href="#" title="" target="_blank">6</a>
	</div>
</div>

CSS:

body,h1,h2,h3,h4,h5,h6,blockquote,p,pre,
dl,dd,menu,ol,ul,
caption,th,td,
form,fieldset,legend,input,button,textarea{margin:0;padding:0}
h1,h2,h3,h4,h5,h6{font-size:100%}
menu,ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,cite,dfn,em,var{font-style:normal}
code,kbd,pre,samp{font-family:'courier new',courier,monospace}
input,button,textarea,select{font-size:100%}
abbr[title]{border-bottom:1px dotted;cursor:help}
a{text-decoration:none;}
body,input,button,textarea,select,option,optgroup{font:12px/1.5 tahoma,\5b8b\4f53,sans-serif}
legend{ display:none;}
label{ cursor:pointer;}
/* Float Clear 
:after
{content:".";display:block;height:0;clear:both;visibility:hidden;}

{zoom:1;} */

.picFocus-a{ width:960px; margin:50px auto; zoom:1; position:relative;}
.picFocus-a img{ display:block; padding:1px; background-color:#FFF; border:1px solid #CCC;

}
.picFocus-a .picWap{ width:960px; height:304px; overflow:hidden; zoom:1; position:relative;
 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2),-2px 2px 5px rgba(0, 0, 0, 0.2),2px -2px 5px rgba(0, 0, 0, 0.2);}
  .picFocus-a .picWap ul{ position:relative;}
 .picFocus-a .picWap ul li{ position:absolute; }
 .picFocus-a .picWapa ul{ width:10000px; overflow:hidden; zoom:1; }
  .picFocus-a .picWapa ul li{ float:left; position:static;}
.picFocus-a span{ display:block; width:36px; position:absolute; top:50%; z-index:3; height:71px; padding:5px; margin-top:-40px; cursor:pointer;
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7FFFFFFF', endColorstr='#7FFFFFFF');background:rgba(255,255,255,0.5);

}
.picFocus-a .btnL,
.picFocus-a .btnL em{ left:0;
-webkit-border-radius:0 40px 40px 0;
-moz-border-radius:0 40px 40px 0;
-o-border-radius:0 40px 40px 0;
border-radius:0 40px 40px 0 ;
}
.picFocus-a .btnR,
.picFocus-a .btnR em{ right:0;
-webkit-border-radius:40px 0 0 40px;
-moz-border-radius:40px 0 0 40px;
-o-border-radius:40px 0 0 40px;
border-radius:40px 0 0 40px ;
}
.picFocus-a span em{ text-align:center; font:bold 16px/71px \5B8B\4F53; width:36px; display:block; height:71px; background-color:#fff; color:#f60;}
.picFocus-a .subBtn{ position:absolute;z-index:3; padding:5px; border:1px solid #ccc;  zoom:1; bottom:20px; width:120px; left:50%; margin-left:-50px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
border-radius:15px;
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#4C000000', endColorstr='#4C000000');background:rgba(0,0,0,0.3);
}
.picFocus-a .subBtn a{ float:left;width:10px; height:10px; background-color:#ccc; text-indent:-9999px; overflow:hidden; margin:0 5px; display:inline;
-webkit-border-radius:5px;
-moz-border-radius:5px;
-o-border-radius:5px;
border-radius:5px;
}

.picFocus-a .subBtn a:hover,
.picFocus-a .subBtn .cur{background-color:#f60;}

JS:

<script type="text/javascript">
	<!--
	$(function(){
		var page = 1;
		var i = 1;
		var $parent = $('.picFocus-a');
		var $picWap = $parent.find('div.picWap');
		var $scorll = $parent.find('div.picWap ul');
		var w_picWap = $picWap.width();
		var li_len = $scorll.find('li').length; 
		var count = Math.ceil(li_len/i);
		var $btnL = $('.btnL');
		var $btnR = $('.btnR');
		var inter = setInterval(fn,3000)
			function fn(){
				$btnR.click();
			}
		$btnR.click(function(){
			$('div.picWap').addClass('picWapa');
			if(!$scorll.is(':animated')){
				if(page == count){
					$scorll.animate({left:'0'},'slow');
					page = 1;
				}else{
					$scorll.animate({left:'-='+w_picWap + 'px'},'slow');
					page++;
				}
			}
			$('.subBtn a').eq(page-1).addClass('cur').siblings('a').removeClass('cur');
		}).hover(function(){
			clearInterval(inter)
		},function(){
			inter = setInterval(fn,3000);
		});
		$btnL.click(function(){
			$('div.picWap').addClass('picWapa');
			if(!$scorll.is(':animated')){
				if(page == 1){
					$scorll.animate({left:'-=' + w_picWap * (count -1) + 'px'},'slow')
					page = count;
				}else{
					$scorll.animate({left:'+=' + w_picWap + 'px'},'slow');
					page--;
				}
			}
			$('.subBtn a').eq(page-1).addClass('cur').siblings('a').removeClass('cur');
		}).hover(function(){
			clearInterval(inter)
		},function(){
			inter = setInterval(fn,3000);
		});
		$('.subBtn a').click(function(){
			clearInterval(inter)
			var index = $('.subBtn a').index(this);
			$(this).addClass('cur').siblings('a').removeClass('cur');
		
			var scrollL = $scorll.css('left');
			$scorll.css({left:-w_picWap*(index),opacity:'0.5'}).animate({opacity:'1'},'slow');
			page = (index+1);
			return false;
		}).hover(function(){
			clearInterval(inter)
		},function(){
			inter = setInterval(fn,3000);
		});
	});
	//-->
</script>

注：图片大小为956X300请自行加图片看效果……