This is written by a group of friends based on jquery. You can go to ingress first.
JS:
(function($){$.fn.appleShow = function(opts){var set = $.extend({itemsClass:'',conctrolClass:'',arrowClass:'',auto:false,timer:3000,type:'click'},opts||{});var $t = $(this),$items = $('.'+set.itemsClass,$t),width = $items[0].offsetWidth,$conctrolbox = $('.'+set.conctrolClass,$t);var $conctrols = $conctrolbox.find('a'),$arrow = $conctrolbox.find('.'+set.arrowClass),len=$conctrols.length;var current = 0,timer = null,isSliding = false,P = [],m=0;$items.each(function(i){var $lis = $(this).find('li'),pos=[];$lis.each(function(i){pos[i] = this.offsetLeft;});P[i] = pos;$lis.each(function(i){$(this).css({'position':'absolute','top':0,'left':pos[i]});});}); $items.hide().eq(current).show();$arrow.stop(true).animate({'left':$conctrols.eq(current).position().left+$conctrols.eq(current).outerWidth(true)/2});set.auto && auto();function auto(){timer = setInterval(function(){m = (current+1)%len;$conctrols.eq(m).trigger(set.type);},set.timer);};function go(items,dir,callback){var d = {'left':'-=','right':'+='}[dir],l = items.length,n=1;items.each(function(i){var t = $(this);setTimeout(function(){t.animate({'left':d+width},'normal','easeOutElastic',function(){if(l === n++){callback && callback();}});},i*100);});};function goLeft(items,callback){go(items,'left',callback);};function goRight(items,callback){var r = [];items.each(function(){r.push(this)});r = $('').pushStack(r.reverse());go(r,'right',callback);};function setPos(items,dir){items.css('left',function(i,v){ v = parseInt(v,10);return dir === 'left' ? (v-width) : (v+width)});}$conctrols.each(function(i){$(this)[set.type](function(event){event.preventDefault();if(isSliding || i === current) return;if(timer) clearInterval(timer);isSliding = true;var go,dir;var pos = $(this).position(),w = this.offsetWidth;var C = $items.eq(current),N = $items.eq(i);i > current ? (go = goLeft,dir = 'right') : (go = goRight,dir = 'left');$arrow.stop(true).animate({'left':pos.left+w/2});$conctrols.removeClass('show').eq(i).addClass('show');go(C.find('li'),function(){C.hide().find('li').each(function(i){ $(this).css('left',P[current][i]);});setPos(N.find('li'),dir);go(N.show().find('li'),function(){current = i;isSliding = false;set.auto && auto();});})});});};$.extend($.easing,{easeOutElastic: function (x, t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;if (a < Math.abs(c)) { a=c; var s=p/4; }else var s = p/(2*Math.PI) * Math.asin (c/a);return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;}})})(jQuery);
HTML:
<!DOCTYPE html>CSS:
@charset "utf-8";/* CSS Document */*{margin:0;padding:0;}body{background:#EBEBED;_position:relative;_height:100%;}img{border:none;display:block;}li{list-style:none;}.page{-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;box-shadow: rgba(0,0,0,0.3) 0 1px 3px; background:#FFFFFF;border-color: #E5E5E5 #DBDBDB #D2D2D2;border-style: solid;border-width: 1px;margin:5px auto 0;width:980px;}.zns_box{overflow: hidden;position: relative;width: 840px;z-index: 0;height:158px;margin: 0 70px;}.zns_box_head{width: 840px;height:158px;position: absolute;top:0;left:0;}.zns_box_head li{width:140px; float:left;text-align: center;}a{text-decoration:none;font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;color:#7F7F7F;}.zns_box_head li a:hover{color:#333;}.zns_box_foot{height:30px; text-align:center; background:#fff; overflow:hidden;background:url(../img/nav_bg.png) no-repeat 0 0;background:-moz-linear-gradient(center bottom, rgba(223,223,223,1) 0%, rgba(242,242,242,1) 66%, rgba(242,242,242,1) 90%, rgba(230,230,230,1) 93%, rgba(190,190,190,1) 96%, rgba(150,150,150,1) 100%);background:-webkit-gradient(linear, left bottom, left top, from(rgba(223,223,223,1)), color-stop(66%, rgba(242,242,242,1)), color-stop(90%, rgba(242,242,242,1)), color-stop(93%, rgba(230,230,230,1)), color-stop(96%, rgba(210,210,210,1)), to(rgba(140,140,140,1)));border-bottom:1px solid #ebebeb;position:relative;}.caret{background: url(../img/caret_active.gif) no-repeat scroll 0 0; display: block; height: 8px; margin: 0 0 -8px -7px; position: absolute; width: 15px;}.zns_box_foot a{ display: inline-block; padding: 8px 15px 6px;cursor:pointer; text-shadow: 0 1px 0 #FFFFFF;}.zns_box_foot .show{ cursor: default; color:#2B2B2B;}.zns_box_foot a:hover{color:#000;}.zns{height:36px;line-height:26px;text-align:center;position:fixed;_position:absolute;bottom:0;width:100%;}.zns a{color:#777;font-size:16px;}.zns a:hover{color:#555;}.zns_head{height:36px;width:980px;overflow:hidden;margin:0 auto;}.zns_head .left{float:left;}.zns_head .right{float:right;}.zns_head a{line-height:36px;color:#777;}.zns_head a:hover{color:#555;}Go to the Apple website for pictures.
Note: This is written in the form of a plug-in. It is easy to call. You can set whether to automatically switch $('xx00 '). appleshow ({Auto: true}), where you can set switching events, click, and Mouseover. The default value is click, $ ('xxoo '). appleshow ({type: 'click '}).
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
