在注释之前先说说前一天遇到的愁闷事，昨晚八点接到供职器管理员知照，说我的网站被停了，原故是我的内存使用猛然涨到300多M，差点把供职器弄挂了。和平起见，我让管理员重开了账户，重新安设WP和上传主题&插件。把WP-super-cache插件也停用了，一直折腾到十点多才光复。至今运转一般，看着http://www.6r7.net。我也不知道原形是奈何回事，真是叫人愁闷！

jQuery随机文章推动走马灯效果—-原名“老汉推车”

换成Micro-M主题有一阵了，天天折腾Wordpress，用过的jQuery效果也有很多了，而今就摒挡分享进去，各位看官须要的就领走吧，但是也不要小器给上面留个言zZZ！

WP就是用来折腾的！知道我上一个主题–Simple-M的人不知道还记不记得，在header的上面有一排走马灯效果，是诳骗jquery告竣的。即日就把这个教程发进去，偶是个菜鸟，也折腾了很久才进去的。感动

这里是DEMO哦！调用的是随机文章~

这个效果不光只是不妨用在Simple-M主题上的，看各位自身阐明咯。想知道www.733768.com,www.tk6699.com。

1:Html代码局部 是调用随机文章代码

<div id="notice_wrap">
 
<div id="notice">
 
<ul>  = get_posts('numberposts=10&orderby=rand');
 
 foreach( $rand_posts as $post ) : ?>
 
   <li><a href="&lt;?php the_permalink(); ?>">(); ?></a></li>
 

 
</ul>
        <p id="prev">«</p>
 
        <p id="next">»</p>
 
    </div>
 
    <div id="search"><form method="get" id="searchform" action="/">
<input type="text" value="我是摸索框，吼吼……" name="s" id="s" onfocus="this.value = this.value == this.defaultValue ? '' : this.value" onblur="this.value = this.value == '' ? this.defaultValue : this.value">
</form></div>
 
</div>


将这段代码拔出你想要的位置，也就是想要显示走马灯效果的位置。

2.jQuery局部

jQuery(document).ready(function(){
	/* “老汉推车”走马灯效果 by zwwooooo | http://www.6r7.你知道www.777878.com,www.00368.com。net#otherUrl */
	var $notice=$('#notice'), //遴选器赋值
		$prev=$('#prev'),
		$next=$('#next'),
		$search=$('#search'),
		myScroll=setInterval(notice,4000); //每4秒循环
	$next.click(function(){ //点击向右翻
		var $first=$notice.find('li:first');
		$first.remove();
		$notice.find('li:last').after($first);
	});
	$prev.click(function(){ //点击向左翻
		var $last=$notice.find('li:last');
		$last.remove();
		$notice.find('li:first').before($last);
	});
	$notice.hover(function(){ //鼠标hover时停止动画 + 显示翻页按钮
		clearInterval(myScroll);
		$prev.show();
		$next.show();
	},function(){
		myScroll=setInterval(notice,4000);
		$prev.hide();
		$next.hide();
	});
	function notice(){ //老汉推车效果函数
		var first=$notice.find('li:first'),
			width=-(first.outerWidth(true))+'px';
		$search.animate({right:'28px'},{ //留意这个14px值，平凡是摸索框中right值+摸索框间隔左边撞击线的间隔（看css）
			duration:400,complete:function(){
				$search.animate({right:'14px'},400); //14px为摸索框原来的right值（看css）
				$notice.find('li').css({"border-color":"#999"});
				$notice.children('ul').animate({left:width},{
					duration:1200,complete:function(){
						$notice.children('ul').append(first).css("left","0");
						$notice.find('li').css({"border-color":"#ddd"});
					}
				});
			}
		});
	};
});


在header里调用这个JS，方法人人都会，不赘述，单文件在此（点这里下载此js），最重要一点！！！不要遗忘先加载jQuery库噢！

3.当然是CSS局部咯

CSS仅供参考，Simple-M主题间接使用该当没题目，简直见demo。

#notice_wrap{position:relative;width:958px;height:38px;margin:38px auto 2px}
#notice{overflow:hidden;position:absolute;top:0;left:0;width:700px;height:38px}
#notice ul{position:absolute;width:1500px}
#notice ul li{overflow:hidden;list-style:none;float:left;width:660px;height:38px;line-height:38px;margin-left:25px;padding-right:14px;border-right:1px solid #ddd;}
#notice ul li a{padding:0}
#prev,#next{display:none;cursor:pointer;position:absolute;top:0;width:15px;height:35px;line-height:35px;text-align:center;color:#777}
#prev{text-align:left}
#next{right:0;}
 
#search{overflow:hidden;position:absolute;top:6px;right:25px;width:200px;height:24px;line-height:24px;text-align:center;background:#fff;border:1px solid #ddd}#search form{padding:0}#search input#s{width:190px;height:14px;background:transparent;border:none;color:#1BA1E2;font-size:12px;padding:6px}#search form input#searchsubmit{cursor:pointer;position:absolute;right:2px;top:0;width:40px;height:26px;padding-left:5px;border:none;border-left:1px solid #999}


css的点窜人人自身做把，我就不回复了。
好的，第一季就写到这里了，听说www.77858.net,www.00852.net。还要早睡早起呢。人人徐徐折腾吧，折腾完的给留个言，哈哈！

版权全数: ❤2y3y.com
本文链接: http://www.6r7.net/843.html
站长声明: 除稀奇标注, 本站全数文章均为原创, 互联分享, 尊重版权, 转载请证明.