一般企业网站首页图片轮播效果jquery.docx

下面介绍三种企业中如今最常用的网站首页图片轮播效果HTML+jquery实现代码，简单实用，具体如下：第一种，jquery全屏banner自动轮播切换，代码如下：jquery全屏banner自动轮播切换 /此处的jquery版本可以不是9.1function banner()var bn_id = 0;var bn_id2= 1;var speed33=5000;var qhjg = 1;var MyMar33;$(#banner .d1).hide();$(#banner .d1).eq(0).fadeIn(slow);if($(#banner .d1).length1)$(#banner_id li).eq(0).addClass(nuw);function Marquee33()bn_id2 = bn_id+1;if(bn_id2$(#banner .d1).length-1)bn_id2 = 0;$(#banner .d1).eq(bn_id).css(z-index,2);$(#banner .d1).eq(bn_id2).css(z-index,1);$(#banner .d1).eq(bn_id2).show();$(#banner .d1).eq(bn_id).fadeOut(slow);$(#banner_id li).removeClass(nuw);$(#banner_id li).eq(bn_id2).addClass(nuw);bn_id=bn_id2;MyMar33=setInterval(Marquee33,speed33);$(#banner_id li).click(function()var bn_id3 = $(#banner_id li).index(this);if(bn_id3!=bn_id&qhjg=1)qhjg = 0;$(#banner .d1).eq(bn_id).css(z-index,2);$(#banner .d1).eq(bn_id3).css(z-index,1);$(#banner .d1).eq(bn_id3).show();$(#banner .d1).eq(bn_id).fadeOut(slow,function()qhjg = 1;);$(#banner_id li).removeClass(nuw);$(#banner_id li).eq(bn_id3).addClass(nuw);bn_id=bn_id3;)$(#banner_id).hover(function()clearInterval(MyMar33);,function()MyMar33=setInterval(Marquee33,speed33);)else$(#banner_id).hide();*margin:0;padding:0;list-style-type:none;a,imgborder:0;bodyfont:12px/180% Arial, Helvetica, sans-serif, 新宋体;.bannerheight:400px;overflow:hidden;.banner .d1width:100%;height:392px;display:block;position:absolute;left:0px;top:0px;.banner .d2width:100%;height:30px;clear:both;position:absolute;z-index:100;left:0px;top:360px;.banner .d2 ulfloat:left;position:absolute;left:50%;top:0;margin:0 0 0 -96px;display:inline;.banner .d2 liwidth:17px;height:15px;overflow:hidden;cursor:pointer;background:url(ckpwp_005.jpg) no-repeat center;float:left;margin:0 3px;display:inline;.banner .d2 li.nuwbackground:url(ckpwp_009.jpg) no-repeat center;banner()效果图如下：不点击时自动轮播，点击时自动切换第二种，jquery小范围banner自动轮播切换，代码如下：jQuery淡出淡入带缩略图幻灯片.flashBannerwidth:782px;height:326px;overflow:hidden;margin:0 auto;.flashBannerposition:relative;.flashBanner .maskheight:32px;line-height:32px;background-color:#000;width:100%;text-align:right;position:absolute;left:0;bottom:-32px;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;overflow:hidden;.flashBanner .mask imgvertical-align:middle;margin-right:10px;cursor:pointer;.flashBanner .mask img.showmargin-bottom:3px;$(function()$(.flashBanner).each(function()var timer;$(.flashBanner .mask img).click(function()var index = $(.flashBanner .mask img).index($(this);changeImg(index);).eq(0).click();$(this).find(.mask).animate(bottom:0,700);$(.flashBanner).hover(function()clearInterval(timer);,function()timer = setInterval(function()var show = $(.flashBanner .mask img.show).index();if (show = $(.flashBanner .mask img).length-1)show = 0;elseshow +;changeImg(show);,3000););function changeImg (index)$(.flashBanner .mask img).removeClass(show).eq(index).addClass(show);$(.flashBanner .bigImg).parents(a).attr(href,$(.flashBanner .mask img).eq(index).attr(link);$(.flashBanner .bigImg).hide().attr(src,$(.flashBanner .mask img).eq(index).attr(uri).fadeIn(slow);timer = setInterval(function()var show = $(.flashBanner .mask img.show).index();if (show = $(.flashBanner .mask img).length-1)show = 0;elseshow +;changeImg(show);,3000);););效果图如下：第三种：索引按钮竖向排放jquery图片切换，代码如下：索引按钮竖向排放jquery图片切换*margin:0;padding:0;list-style-type:none;a,imgborder:0;bodyfont:12px Helvetica Neue,Helvetica,STheiti,微软雅黑,黑体,Arial,Tahoma,sans-serif,serifbodybackground:#f6f6f6.flfloat:leftatext-decoration:none.clearfix:aftercontent:.;display:block;height:0;clear:both;visibility:hidden.clearfixdisplay:inline-block*html .clearfixheight:1%.clearfixdisplay:block/* m-banner */.m-bannerpadding:10px 10px 10px 0;height:239px;border:1px solid #dedede;width:755px;margin:20px auto;.mb-newswidth:270px;padding:0 15px;line-height:1.8.mb-news h4word-break:break-all;word-wrap:break-word.mb-news h4 afont-size:18px;color:#8c3608;line-height:1.6;word-break:break-all;word-wrap:break-word.mb-news pfont-size:14px;color:#444;margin-top:15px;overflow:hidden.mb-news h4 a:hovertext-decoration:underline.mb-imgwidth:455px;height:239px.mb-inavwidth:10px;margin-right:1px.mb-inav liwidth:10px;height:79px;margin-bottom:1px.mb-inav li adisplay:block;width:10px;height:79px;background:#bdbdbd.mb-inav li a.curbackground:#671900.mb-iboxwidth:444px;height:239px;position:relative;overflow:hidden.mb-ibox adisplay:block;width:444px;height:239px;overflow:hidden;position:absolute;top:0;left:0;z-index:10;display:none$(function()/ 图片轮播bannerRotate.bannerInit(););var bannerRotate = _time: 3000,_fade: 200,_i: 0,_interval: null,_navId: #mb-inav,_navBox: #mb-ibox,_navTxt: #mb-itxt,bannerShow: function() $(this._navId).find(li a).removeClass(cur);$(this._navId).find(li:eq(+this._i+).find(a).addClass(cur);$(this._navBox).find(a).fadeOut(this._fade);$(this._navBox).find(a:eq(+this._i+).fadeIn(this._fade);$(this._navTxt).find(div).hide();$(this._navTxt).find(div:eq(+this._i+).fadeIn(this._fade);,bannerStart:function() var _this = this;_this._interval = setInterval(function() if(_this._i = 2) _this._i = 0;else _this._i+;_this.bannerShow();, _this._time);,bannerInit: function() var _this =