emlog资源分类轮播图调用代码修改版 - 华雨啦

emlog资源分类轮播图调用代码修改版

作者头像

作者: 华雨啦

请牢记域名 huayula.com (华雨拉) 或 CTRL+D 收藏!

标签:

emlog插件

温馨提示:本站公开发布的资源供测试,更多高质量高价值的资源,可加入华雨拉官方群在群文件下载获取,并在第一时间获得有效的代码和资源,还可在群内提问互助交流!华雨拉官方QQ群:497385575 华雨啦交流群

简要说明:

    有很多人都喜欢轮播图,所以都喜欢在自己网站首页加上这个代码,一共两个部分两个文件,一个是php文件,一个是js文件,当然可能有人已经发布了类似的文章,但是只是适用于FLY与Meta模板!其他模板框架可能不适配,需要修改代码,也就是修改一下文件中的css,本教程适用fee模板。

首先看调用代码

在需要调用的地方插入以下代码。有些模块不支持哦!本站调用在最近更新下面。

 

 <?php include View::getView('index_1');?> 

调用文件主要代码

新建一个命名为“index_1.php”的PHP文件上传到模板目录下即可。调用对应分类填入对应ID号即可,多个分类可使用英文的,逗号隔开。(适用于fee模板,其他自测或者看原文件修改)

 

<?php 
/**
 * 站点首页模板
 */
if(!defined('EMLOG_ROOT')) {exit('error!');} 
if(isset($_GET["setting"])){include View::getView('setting');exit();}

?>
	<script src="<?php echo TEMPLATE_URL; ?>lunbo.js"></script>
<style>
.phb_cont li{ padding: 0px 20px; margin-top: 15px; height: 40px; line-height: 40px; font-size: 15px; }
.phb_cont li a{display: inline-block;width: 85%;text-overflow: ellipsis;white-space: nowrap;float: right;overflow: hidden;text-align: left;padding-left: 0px;}
.phb_cont li a:hover{color:#FF00FF;}
.phb_cont li i{display: inline-block;height: 26px;width: 10%;color: #FFF;background: #aaa;text-align: center;font-style: normal;margin-top: 5px;line-height: 26px;float: left;border-radius: 4px;}
	.phb_cont li:nth-child(1) i{color:#fff;background:#F30;}
	.phb_cont li:nth-child(2) i{color:#fff;background:#FFBA00;}
.phb_cont li:nth-child(3) i{color: #FFF;background: #19b5fe;}
.xyddx{float: right;font-size: 15px;margin: 0px 2px;cursor: pointer;height: 29px;padding: 0px 7px;line-height: 29px;border-radius: 6px;margin-top: 13px;}
.hover{background:#19b5fe;color:#FFF;}
.xyddx:hover{background:#D6D6D6;color:#FFF;}
	/*houmianjiade */
 .pro_detail:hover {
    border-color: red;}
.pro_detail {
    height: 170px;
	width:368px;
    margin-bottom: 20px;
    display: inline-block;
    border: 1px solid #eee;
    background-color: #fffcfd;
}
.list ul li a:hover, a, a:hover {
    text-decoration: none;
}
				.pro_detail .pro_intro {
    width: 180px;
    margin: 12px 0 0 12px;
}.pro_detail .pro_intro .pro_title {
    font-size: 15px;
    overflow: hidden;
		    height: 46px;
}.pro_detail .pro_intro .pro_title a {
    color: #787878;
}.pro_detail .pro_intro .pro_price {
    font-size: 14px;
    position: relative;
    overflow: hidden;
}.pro_detail .pro_intro .pro_price .coupon {
    position: relative;
    left: 0;
    font: 12px Simsun;
    text-align: center;
    background: #fff7fa;
    color: #ff0060;
    height: 24px;
    line-height: 24px;
    padding: 0 8px;
    margin: 0 10px 0 0;
    border: 1px dotted #ff0060;
    float: left;
    border-left: none;
    border-right: none;
}.pro_detail .pro_intro .pro_price .out-time {
    
    height: 16px;
    line-height: 19px;
    color: #fc7e91;
    padding-right: 5px;
} .pro_detail .pro_intro .residue {
    
    font-size: 12px;
    color: #333;
}.pro_detail .pro_intro .residue i {
    padding: 0 5px;
    color: #FF435E;
    font-size: 14px;
    font-weight: 700;
    font-family: Arial;
} .pro_detail .pro_intro .pro_nowPri {
    background-color: #FF435E;
    color: #fff;
    font-size: 15px;
    margin-top: 5px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    position: relative;
    display: block;
}.pro_detail .pro_intro .pro_nowPri .buy-price {
    font: 26px/30px Arial;
    font-weight: 700;
    padding-left: 15px;
    float: left;
}.pro_detail .pro_intro .pro_nowPri .old-price {
    float: left;
    height: 15px;
    margin: 0px 0 1px 10px;
    text-align: left;
}.pro_detail .pro_intro .pro_nowPri .old-price p {
    display: block;
    height: 16px;
    margin: 0;
    padding: 0;
    color: #fef181;
    line-height: 16px;
    text-decoration: line-through;
}.pro_detail .pro_intro .pro_nowPri .old-price span {
    display: block;
    height: 12px;
    font: 12px/12px "Microsoft Yahei";
    color: #fff;
}.pro_detail .pro_intro .pro_nowPri .go-buy {
    position: absolute;
    right: 0;
    background: #fef490;
    background: -webkit-gradient(linear,0 0,right 0,from(#fef490),to(#fee44d));
    background: -moz-linear-gradient(left,#fef490,#fee44d);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#fef490, endColorstr=#fee44d);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=1, startColorstr=#fef490, endColorstr=#fee44d)";
    background: -o-linear-gradient(left,#fef490,#fee44d);
    width: 80px;
    font-size: 16px;
    text-align: center;
    font-family: "Microsoft Yahei";
}.pro_detail .pro_intro .pro_nowPri .go-buy a:before {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: -12px;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 12px solid #fef490;
    width: 0;
    height: 0;
} .pro_detail .pro_intro .pro_nowPri .go-buy a {
    color: #f61d5a;
    display: block;
}
</style>
<?php //首页滚动图片
function index_xy(){	
	$ysort = array(9);//分类id,多个请用英文逗号隔开
$num = 12;//显示文章数量
$db = MySql::getInstance();global $CACHE; $sort_cache = $CACHE->readCache('sort');foreach($ysort as $key => $i){$key = $key+1;?>
<div class="container trrollimg " id="trtollimg178888" style="background:rgba(255, 255, 255, 0.8588235294117647)">
	<div class="trtitle2 "><span style="float:right;margin-right:12px;color:#ddd;">
        <section style=" display: inline-block; margin-left: -0.2em; box-sizing: border-box;-webkit-transform: skew(-45deg); ">
            <section style=" border-right-width: 2px; border-right-style: solid; border-right-color: #2196F3; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #2196F3; padding:2px 25px;box-sizing: border-box;" class="bc">
                <section style=" text-align: right; box-sizing: border-box;-webkit-transform: skew(45deg);">
					 <p style="color: #2196F3; font-size: 20px; white-space: normal;" class="fc">
                        
                    </p>
                </section>
            </section>
        </section>
        <section style=" display: inline-block;-webkit-transform: skew(-45deg); box-sizing: border-box; ">
            <section style=" border-left-width: 2px; border-left-style: solid; border-left-color: #2196F3; border-top-width: 1px; border-top-style: solid; border-top-color:#2196F3; padding: 1px 5px 0px 15px; box-sizing: border-box;" class="bc">
                <section style="-webkit-transform: skew(45deg); box-sizing: border-box;">
                    <p style="color: #2196F3; font-size: 14px; white-space: normal;" class="fc">
						<a href="<?php echo Url::sort($i);?>" title="<?php echo $sort_cache[$i]['sortname'];?>" style="text-align: right; font-size: 14px;color: #2196F3;">更多</a>
                    </p>
                </section>
            </section>
       </section>
    </span>
<div class="trtitle2text  "><i class="fa fa-mars-double" aria-hidden="true"></i>&nbsp;<?php echo $sort_cache[$i]['sortname'];?>
</div></div>
	
<div id="trrollimgnr" class="trrollimgnr" style="overflow: hidden; width: 1140px; height: 210px; position: relative;" >	
	<ul id="trrollimgul" style="padding: 0px; border: 0px; font-size: 0px; display: inline-block; margin: 0px; list-style: none; width: 3936px; height: 210px;">
<?php $logs = $db->query("SELECT * FROM ".DB_PREFIX."blog WHERE sortid='$i' AND type='blog' AND hide='n' order by date DESC limit 0,$num");
while($value = $db->fetch_array($logs)){$img_url = TEMPLATE_URL.'images/news.jpg';if(img_fj($value['gid'])){$img_url = img_fj($value['gid']);}elseif(img_zw($value['content'])){$img_url = img_zw($value['content']);}else{$img_url;}?>
	<li style="list-style: none; margin-left: 7px; margin-right: 7px; border-left-width: 0px; border-right-width: 0px; float: left; display: inline;"><a href="<?php echo Url::log($value['gid']);?>"><img src="<?php echo $img_url;?>"title="<?php echo $value['title'];?>" width="150" height="163" data-bd-imgshare-binded="1" /></a>
		<span style="width:150px;overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;"><a><?php echo $value['title'];?></a></span></li><?php }?></ul></div></div><?php }}?>
<?php index_xy();?>
  <script type="text/javascript">
new Marquee(
{
	MSClass	  : ["trrollimgnr","trrollimgul"],
	Direction : 2,
	Step	  : 0.3,
	
	Height	  : 210,
	Timer	  : 20,
	DelayTime : 3000,
	WaitTime  : 0,
	ScrollStep: 164,
	SwitchType: 0,
	AutoStart : true
});
</script> 
<style>
	
	.video_icon:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: 13px;
    left: 18px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 16px solid #fff;
}.video_icon {
    width: 50px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -27px;
    background: rgba(0,0,0,.5);
}
	/*滚动图片*/
.trrollimg { height: auto; margin-top:10px;}
	.trrollimgnr { width: 100%!important; height: 180px; border: 0px solid #000000; overflow: hidden; margin: 5px auto 5px auto; }
.trrollimgnr ul li { float: left; list-style: none; border: 0px solid red; margin: 10px 7px; }
.trrollimgnr ul li img {box-shadow: 0 0 10px gray;}
	.trrollimgnr ul li img:hover{transform: scale(1.3); box-shadow: 0 0 10px gray;border:1px solid #2196f3;border-radius:6px;padding:1px; background:#fff;}
.trrollimgnr ul li span { display: block; text-align: center; font-size: 12px; margin-top: 8px; }
.trtitle2 { width: 100%; padding-left: 0px; overflow: hidden; color: #006A88; border-bottom: 1px solid #00AEFF; }
.trtitle2text { padding-left: 10px; padding-right: 10px; text-align: center; width: 130px; height: 35px; line-height: 35px; font-size: 14px; font-weight: 600; color: #fff; background: #00AEFF; }
</style>

轮播动作JS代码

没有js是不会轮播的,只有样式不会动的,js是通用的,尾部已打包。

 

提示

 

不懂代码的请勿随意修改文件名,直接把压缩包上传到模板目录下,解压即可,文件包含了JS动作、Css、和主要的调用文件。

 

打包的文件源码仅适合FLY与Meta模板,fee模板把上面的代码弄成一个index_1.php,替换原文件里的index_1.php,就可以了,说的怎么详细,如果还不会那我也没办法了,别找我。

 

文件下载:蓝奏云下载

 

 

亲爱的宝宝们!喜欢华雨拉(huayula.com)吗?喜欢就按 CTRL+D 收藏吧!
华雨啦(huayula.com)将持续测试与提供可用的QQxml、QQjson代码及网站源码,更新维护不易,期待您的支持!
如果要支持我们,可点击或扫描下面的二维码加入本站QQ群,加入可获得收藏级的工具和代码,新人有好礼相赠!


分享到:
打赏
未经允许不得转载:

作者: 华雨啦, 转载或复制请以 超链接形式 并注明出处 华雨啦
原文地址: 《emlog资源分类轮播图调用代码修改版》 发布于2020-3-14

评论

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

emlog资源分类轮播图调用代码修改版

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

召唤伊斯特瓦尔