中文字幕在线观看,亚洲а∨天堂久久精品9966,亚洲成a人片在线观看你懂的,亚洲av成人片无码网站,亚洲国产精品无码久久久五月天

wordpress網(wǎng)站輪播切換圖幻燈片【后臺(tái)控制】制作

2018-11-02    來源:學(xué)做網(wǎng)站論壇

容器云強(qiáng)勢上線!快速搭建集群,上萬Linux鏡像隨意使用

WORDPRESS網(wǎng)站制作首頁頂部的輪播切換圖的方法,之前論壇中講過自己建網(wǎng)站如何制作輪播切換圖,但制作出來的輪播切換圖的尺寸是固定不變的,而且切換的圖片內(nèi)容也是固定設(shè)置的,如果要更換圖片,就需要通過FTP軟件去修改。

下面介紹一種非插件的方法制作WORDPRESS網(wǎng)站輪播切換圖的方法,它最大的好處在于網(wǎng)站管理員可以隨意在網(wǎng)站后臺(tái)去控制要顯示的內(nèi)容。我們先來看看它制作好后的樣式吧!

8

 

方法/步驟

第一步:將以下代碼放入自己網(wǎng)站主題的functions.php中,用于顯示縮略圖

//縮略圖
function get_first_image() {
global $post;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = bloginfo('template_url') . "/images/default.jpg";
};
return $first_img;
}

第二步:在網(wǎng)站上需要顯示輪播切換圖的位置,放上以下的HTML代碼。

<!--圖片輪播區(qū)-->
<div id="com_box" class="com_box ftl">

<?php
$sticky = get_option('sticky_posts');
rsort( $sticky );//對(duì)數(shù)組逆向排序,即大ID在前
$sticky = array_slice( $sticky, 0, 5);//輸出置頂文章數(shù),請(qǐng)修改5,0不要?jiǎng),如果需要全部置頂文章輸出,可以把這句注釋掉
query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );
if (have_posts()) :while (have_posts()) : the_post();
?>

<div class="img dpn"><a href="<?php the_permalink(); ?>" target="_blank" title="<?php the_title(); ?>"><img class="img_directly_load" src="<?php echo get_first_image(); ?>" alt="<?php the_title(); ?>" /></a></div>
<?php endwhile; endif; ?>

<ul id="com_txt" class="title">
<?php
$sticky = get_option('sticky_posts');
rsort( $sticky );//對(duì)數(shù)組逆向排序,即大ID在前
$sticky = array_slice( $sticky, 0, 5);//輸出置頂文章數(shù),請(qǐng)修改50不要?jiǎng),如果需要全部置頂文章輸出,可以把這句注釋掉
query_posts( array( 'post__in' => $sticky, 'caller_get_posts' => 1 ) );
if (have_posts()) :while (have_posts()) : the_post();
?>
<li></li>
<?php endwhile; endif; ?>
</ul>

</div>
<script type="text/javascript">

function com_change()
{
var self_now = 0;
var self_speed = 5000;
var self_auto_change = null;
var self_max = $('#com_box div.img').size();
function self_change(i)
{
$('#com_box div.img').hide();
$('#com_txt_bg li').removeClass('on');
$('#com_txt li').removeClass('on');
$('#com_box div.img:eq(' + i + ')').show();
$('#com_txt_bg li:eq(' + i + ')').addClass('on');
$('#com_txt li:eq(' + i + ')').addClass('on');
}
function self_interval()
{
return setInterval(function(){
self_now++;
if (self_now >= self_max)
{
self_now = 0;
}
self_change(self_now);
}, self_speed);
}
$('#com_box div:first').show();
$('#com_txt_bg li:first').addClass('on');
$('#com_txt li:first').addClass('on');
$('#com_txt li').each(function(i)
{
$(this).mouseover(function(){
self_now = i;
clearInterval(self_auto_change);
self_change(i);
}).mouseout(function(){
self_auto_change = self_interval();
});
});
$(function(){
$('#com_loding').hide();
self_auto_change = self_interval();
});
}
com_change();
</script>

第三步:即然是切換圖片,就少不了JS的幫助,下載JS文件: ?jquery.js
將下載的JS文件放到images文件夾下,在header.php上面放上一個(gè)js代碼:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/images/jquery.js"></script>

第四步:下面就是通過CSS來控制圖片顯示的樣式了,復(fù)制以下的CSS樣式,放到自己網(wǎng)站的CSS文件的最下方。(width:627px代表輪播切換圖幻燈片寬度,可以根據(jù)自己需要修改)

/*換燈片*/
.com_box {width:627px;height:279px;overflow:hidden;position:relative;}
.com_box img{width:100%;height:100%;}
.com_box ul.title li.on {background:#3598db;}
.com_box ul.title {position:absolute;bottom:10px;right:5px;z-index:9;}
.com_box ul.title li {counter-increment:listxh;display:inline-block;border-radius:12px;background: #000;}
.com_box ul.title li:before{content:counter(listxh);display:inline-block;text-align:center;color:#fff;width:24px;height:24px;line-height:24px;font-weight:600;font-size:11px;font-family: "微軟雅黑";}

第五步:如何在網(wǎng)站后臺(tái)去控制切換圖片的內(nèi)容呢?很簡單了,只需要在網(wǎng)站后臺(tái)設(shè)置哪些要顯示的內(nèi)容的文章置頂即可,這樣這些文章中的圖片就會(huì)自動(dòng)的調(diào)用到切換圖中來了。
2

標(biāo)簽: isp seo 代碼 建網(wǎng)站 網(wǎng)站如何制作 網(wǎng)站制作

版權(quán)申明:本站文章部分自網(wǎng)絡(luò),如有侵權(quán),請(qǐng)聯(lián)系:west999com@outlook.com
特別注意:本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)!
本站所提供的圖片等素材,版權(quán)歸原作者所有,如需使用,請(qǐng)與原作者聯(lián)系。

上一篇:wordpress網(wǎng)站無法上傳圖片解決方法

下一篇:WP網(wǎng)站后臺(tái)打開慢原因及解決方法