web前端js实现动态改变焦点图大小

以下就是实现改变焦点图大小功能的步骤：
<style>.flexslider {margin: 0px auto;position: relative;width: 100%;overflow: hidden;zoom: 1;max-width:100%;min-width:1309px;max-height:100%}.flexslider .slides li {width: 100%;height: 100%;}.flex-direction-nav{margin-top:-200px;}.flex-direction-nav a {width: 70px;height: 70px;line-height: 99em;overflow: hidden;margin: -35px 0 0;display: block;background: url(images/ad_ctr.png) no-repeat;position: absolute;top: 50%;z-index: 10;cursor: pointer;opacity: 0;filter: alpha(opacity=0);-webkit-transition: all .3s ease;border-radius: 35px;}.flex-direction-nav .flex-next {background-position: 0 -70px;right: 470px;}.flex-direction-nav .flex-prev {left: 470px;}.flexslider:hover .flex-next {opacity: 0.8;filter: alpha(opacity=25);}.flexslider:hover .flex-prev {opacity: 0.8;filter: alpha(opacity=25);}.flexslider:hover .flex-next:hover,.flexslider:hover .flex-prev:hover {opacity: 1;filter: alpha(opacity=50);}.flexslider .slides a img {width: 100%;display: block;max-width:100%;height: auto; }.flex-control-nav {position: absolute;bottom: 60px;left:47%;text-align: center;}.flex-control-nav li {margin: 0 2px;display: inline-block;zoom: 1;*display: inline;}.flex-control-paging li a {background: url(images/dot.png) no-repeat 0 -16px;display: block;height: 16px;overflow: hidden;text-indent: -99em;width: 16px;cursor: pointer;}.flex-control-paging li a.flex-active,.flex-control-paging li.active a {background-position: 0 0;}.flexslider .slides a img {width: 100%;display: block;height: auto; }</style><div id="banner_tabs" class="flexslider"><ul class="slides"><li><a href="category.php?id=2"><img src="images/focus/10.1.jpg" style="max-width:100%" /></a></li><li><a href="zdy1490336173.php"><img src="images/focus/JX..jpg" style="max-width:100%" /></a></li></ul><ul class="flex-direction-nav"><li><a class="flex-prev" href="javascript:;">Previous</a> </li><li><a class="flex-next" href="javascript:;">Next</a> </li></ul><ol id="bannerCtrl" class="flex-control-nav flex-control-paging"><li><a>1</a> </li><li><a>2</a> </li></ol></div><script src="/js/jquery-1.10.2.min.js"></script><script src="/js/slider.js"></script><script type="text/javascript">$(function() {/*焦点图start*/var bannerSlider = new Slider($(‘#banner_tabs‘), {time: 5000,delay: 400,event: ‘hover‘,auto: true,mode: ‘fade‘,controller: $(‘#bannerCtrl‘),activeControllerCls: ‘active‘});$(‘#banner_tabs .flex-prev‘).click(function() {bannerSlider.prev()});$(‘#banner_tabs .flex-next‘).click(function() {bannerSlider.next()});
　　　　/*焦点图end*/
　　　　/*改这宽度start*/var winWidth = 0; ?var winHeight = 0; ?function findDimensions() { //函数：获取尺寸 ?//获取窗口宽度 ?if (window.innerWidth) { ?winWidth = window.innerWidth; ?} ?else if ((document.body) && (document.body.clientWidth)) { ?winWidth = document.body.clientWidth; ?} ?//获取窗口高度 ?if (window.innerHeight) { ?winHeight = window.innerHeight; ?} ?else if ((document.body) && (document.body.clientHeight)) { ?winHeight = document.body.clientHeight; ?} ?//通过深入Document内部对body进行检测，获取窗口大小 ?if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { ?winHeight = document.documentElement.clientHeight-173; //这里是根据当前需要改变的值 winWidth = document.documentElement.clientWidth; ?} ?????????????//设置div的具体宽度=窗口的宽度的% ?if (document.getElementById("banner_tabs")) { ?document.getElementById("banner_tabs").style.height = winHeight + "px"; ?} ?} ?findDimensions(); ?window.onresize = findDimensions;
　　　　/*改这宽度end*/});</script>
写的比较简陋，如有错的地方，可以联系我哦