H5实现轮播

H5实现轮播

页面代码：

联盟推荐:

css：

/*轮播图的样式*/section#lunbotu{ box-shadow: 1px 4px 15px #A39F9F;}div.wrap a{ color:#fff;}div#slide-holder { width : 628px; height : 278px;}div#slide-runner { width : 628px; height : 278px; overflow : hidden; position : absolute;}div#slide-holder img { margin : 0; display : none; position : absolute;}div#slide-controls { left : 0; bottom : 0px; width : 628px; height : 46px; display : none; position : absolute;}div#slide-controls p.text { float : left; color : #fff; display : inline; font-size : 10px; line-height : 16px; margin : 15px 0 0 20px; text-transform : uppercase;}p#slide-nav { float : right; height : 24px; display : inline; margin : 11px 15px 0 0;}p#slide-nav a { float : left; width : 24px; height : 24px; display : inline; font-size : 11px; margin : 0 5px 0 0; line-height : 24px; font-weight : bold; text-align : center; text-decoration : none; background-position : 0 0; background-repeat : no-repeat;}p#slide-nav a.on { background-position : 0 -24px;}p#slide-nav a { background-image : url(../images/silde-nav.png);}

js：

// Download by alert('JavaScript error occurred! \n' +'\nError description: \t'+desc +'\nPage address: \t'+page +'\nLine number: \t'+line );*/}$(function(){ $('a').focus(function(){this.blur();}); SI.Files.stylizeAll(); slider.init(); mc.init(); $('input.text-default').each(function(){ $(this).attr('default',$(this).val()); }).focus(function(){ if($(this).val()==$(this).attr('default')) $(this).val(''); }).blur(function(){ if($(this).val()=='') $(this).val($(this).attr('default')); }); $('input.text,textarea.text').focus(function(){ $(this).addClass('textfocus'); }).blur(function(){ $(this).removeClass('textfocus'); }); var popopenobj=0,popopenaobj=null; $('a.popup').click(function(){ var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]); var pobj=$('#'+pid); if(!pobj.length) return false; if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){ popopenobj.hide(50); $(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open'); popopenobj=null; } return false; }); $('p.images img').click(function(){ var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0]; $(document.body).css('backgroundImage','url('+_siteRoot+'images/bg/bg'+newbg+'.jpg)'); $(this).parent().find('img').removeClass('on'); $(this).addClass('on'); return false; }); $(window).load(function(){ $.each(css_ims,function(){(new Image()).src=_siteRoot+'css/images/'+this;}); $.each(css_cims,function(){ var css_im=this; $.each(['blue','purple','pink','red','grey','green','yellow','orange'],function(){ (new Image()).src=_siteRoot+'css/'+this+'/'+css_im; }); }); }); $('div.sc-large div.img:has(div.tml)').each(function(){ $('div.tml',this).hide(); $(this).append(' ').find('a').css({ left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset()-)+1 }).click(function(){ $(this).siblings('div.tml').slideToggle(); return false; }).focus(function(){this.blur();}); });});var slider={ num:-1, cur:0, cr:[], al:null, at:10*1000, ar:true, init:function(){ if(!slider.data || !slider.data.length) return false; var d=slider.data; slider.num=d.length; var pos=Math.floor(Math.random()*1);//slider.num); for(var i=0;i'+(i+1)+''); } $('img,div#slide-controls',$('div#slide-holder')).fadeIn(); slider.text(d[pos]); slider.on(pos); slider.cur=pos; window.setTimeout('slider.auto();',slider.at); }, auto:function(){ if(!slider.ar) return false; var next=slider.cur+1; if(next>=slider.num) next=0; slider.slide(next); }, slide:function(pos){ if(pos<0 || pos>=slider.num || pos==slider.cur) return; window.clearTimeout(slider.al); slider.al=window.setTimeout('slider.auto();',slider.at); var d=slider.data; for(var i=0;i

项目结构：

效果：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。