wordpress网站轮播切换图幻灯片「后台控制」制作（轮播图切换效果）

//缩略图eYm快乐收录网

function get_first_image() {eYm快乐收录网

global $post;eYm快乐收录网

$first_img = ;eYm快乐收录网

ob_start();eYm快乐收录网

ob_end_clean();eYm快乐收录网

$output = preg_match_all(//i, $post->post_content, $matches);eYm快乐收录网

$first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = bloginfo(template_url) . "/images/default.jpg";eYm快乐收录网

};eYm快乐收录网

return $first_img;eYm快乐收录网

}

<!--图片轮播区--> <div id="com_box" class="com_box ftl"> <?php $sticky =get_option(sticky_posts); rsort( $sticky );//对数组逆向排序，即大ID在前 $sticky = array_slice( $sticky, 0, 5);//输出置顶文章数，请修改5，0不要动，如果需要全部置顶文章输出，可以把这句注释掉 query_posts( array( post__in =>

$sticky, caller_get_posts => 1 ) );eYm快乐收录网

if (have_posts()) :while (have_posts()) : the_post();eYm快乐收录网

?>eYm快乐收录网

<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 );//对数组逆向排序，即大ID在前 $sticky = array_slice( $sticky, 0,5);//输出置顶文章数，请修改5，0不要动，如果需要全部置顶文章输出，可以把这句注释掉 query_posts( array( post__in =>

$sticky, caller_get_posts => 1 ) );eYm快乐收录网

if (have_posts()) :while (have_posts()) : the_post();eYm快乐收录网

?>eYm快乐收录网

<li></li> <?php endwhile; endif; ?> </ul> </div> <script type="text/javascript">

function com_change()eYm快乐收录网

{eYm快乐收录网

var self_now = 0;eYm快乐收录网

var self_speed = 5000;eYm快乐收录网

var self_auto_change = null;eYm快乐收录网

var self_max = $(#com_box div.img).size();eYm快乐收录网

function self_change(i)eYm快乐收录网

{eYm快乐收录网

$(#com_box div.img).hide();eYm快乐收录网

$(#com_txt_bg li).removeClass(on);eYm快乐收录网

$(#com_txt li).removeClass(on);eYm快乐收录网

$(#com_box div.img:eq( + i + )).show();eYm快乐收录网

$(#com_txt_bg li:eq( + i + )).addClass(on);eYm快乐收录网

$(#com_txt li:eq( + i + )).addClass(on);eYm快乐收录网

}eYm快乐收录网

function self_interval()eYm快乐收录网

{eYm快乐收录网

return setInterval(function(){eYm快乐收录网

self_now++;eYm快乐收录网

if (self_now >= self_max)eYm快乐收录网

{eYm快乐收录网

self_now = 0;eYm快乐收录网

}eYm快乐收录网

self_change(self_now);eYm快乐收录网

}, self_speed);eYm快乐收录网

}eYm快乐收录网

$(#com_box div:first).show();eYm快乐收录网

$(#com_txt_bg li:first).addClass(on);eYm快乐收录网

$(#com_txt li:first).addClass(on);eYm快乐收录网

$(#com_txt li).each(function(i)eYm快乐收录网

{eYm快乐收录网

$(this).mouseover(function(){eYm快乐收录网

self_now = i;eYm快乐收录网

clearInterval(self_auto_change);eYm快乐收录网

self_change(i);eYm快乐收录网

}).mouseout(function(){eYm快乐收录网

self_auto_change = self_interval();eYm快乐收录网

});eYm快乐收录网

});eYm快乐收录网

$(function(){eYm快乐收录网

$(#com_loding).hide();eYm快乐收录网

self_auto_change = self_interval();eYm快乐收录网

});eYm快乐收录网

}eYm快乐收录网

com_change();eYm快乐收录网

</script>

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

/*换灯片*/eYm快乐收录网

.com_box {width:627px;height:279px;overflow:hidden;position:relative;}eYm快乐收录网

.com_box img{width:100%;height:100%;}eYm快乐收录网

.com_box ul.title li.on {background:#3598db;}eYm快乐收录网

.com_box ul.title {position:absolute;bottom:10px;right:5px;z-index:9;}eYm快乐收录网

.com_box ul.title li {counter-increment:listxh;display:inline-block;border-radius:12px;background: #000;}eYm快乐收录网

.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: "微软雅黑";}