下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家,也给大家做个参考。
<html> <head> <title>华欣达纺织首页第二版</title> <Meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="basicrun.js"></script> <script type="text/javascript" src="jquery.backstretch.min.js"></script> <script type="text/javascript" src="jquery.bxSlider.min.js"></script> <script type="text/javascript" src="preloader.js"></script> </head> <script type="text/javascript"> var slider; var images = [ "images/img_1.jpg","images/img_2.jpg","images/img_3.jpg" ]; var index = 0; var transitionSpeed = 400; var imageIntervals = 5000; var startIntervals; var intervalSetTime; var contentOpen = false; $(document).ready(function(){ slider = $('#slider1').bxSlider({ mode: 'fade',controls: false,pause: imageIntervals }); for (i=0;i<=images.length - 1;i++){ $('#thumb-container').append('<a href="javascript:goToContent('+ i +')"><img src="'+ images[i] +'?size=thumb" alt="Image '+ i +'" /></a>'); } $(function() { $.preload(images,{ init: function(loaded,total) { $("#indicator").html("<img src='images/load.gif' />"); },loaded_all: function(loaded,total) { $('#indicator').fadeOut('slow',function() { $('#left-side').fadeIn('slow'); $('#thumb-container').fadeIn('slow'); $.backstretch(images[index],{speed: transitionSpeed}); startIntervals = function (){ intervalSetTime = setInterval(function() { index = (index >= images.length - 1) ? 0 : index + 1; $.backstretch(images[index]); slider.goToNextSlide() },imageIntervals)}; startIntervals(); }); } }); }); }); function goToContent(slideNum){ clearInterval(intervalSetTime); index = slideNum; $.backstretch(images[index]); slider.goToSlide(slideNum); if (contentOpen == false){ startIntervals(); } }; //function showContent(){ //$('.content-bg').fadeIn('slow'); //clearInterval(intervalSetTime); //contentOpen = true; //}; //function closeContent(){ //$('.content-bg').fadeOut('slow'); //startIntervals(); //contentOpen = false; //}; </script> <style> #indicator{width:48px; position:absolute; left:50%; margin:300px 0px 0px -24px;} #thumb-container{position:absolute; bottom:0px; right:20px; background:url(images/content-bg.png); padding:15px 15px 0px 5px; margin-left:20px; display:none;} #thumb-container img{float:left; width:75px; padding:0px 0px 15px 10px; opacity:.8; border:0px;} #thumb-container img:hover{opacity:1;} .bx-wrapper{float:left;} </style> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <!-- Save for Web Slices (华欣达纺织首页第二版.psd) --> <table id="__01" width="1440" height="760" border="0" cellpadding="0" cellspacing="0"> <tr> <!-- <td> <script> $(function(){ $('.banner').bgStretcher({ images: ['banner1.jpg','banner2.jpg','banner3.jpg'],links: ['/','/','/'],texts: ['1','2','3'],imageWidth: 1440,imageHeight: 660,slideDirection: 'E',slideShowSpeed: 3000,nextSlideDelay: 6000,transitionEffect: 'fade',sequenceMode: 'normal',buttonPrev: '#prev',buttonNext: '#next',pagination: '#nav',anchoring: 'center center',anchoringImg: 'center center' }); }); </script> <div class="banner"></div> </td> --> <div id="indicator"></div> <div id="slider1"> </div> <div id="thumb-container"></div> </tr> </table> <!-- End Save for Web Slices --> </body> </html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。