[插件]自适应全屏BANNER焦点图DYCMS
演示效果:
使用说明:
1、引入 jQuery库
2、安装插件:
点击下载
下载附件解压并上传到/Skin/目录下面
3、调用代码:
<div class="f...
演示效果:

使用说明:
1、引入 jQuery库
2、安装插件:
下载附件解压并上传到/Skin/目录下面
3、调用代码:
<div class="fullSlide">
<div class="bd">
<ul>
<?php
$sql="select title,suoluetu,url from flash where sortid in (".getChildrenId("flash",1).") and enable=0 order by paixu asc,addtime desc,id desc limit 0,10";
$result=$conn->query($sql);
if($result->num_rows>0){
while($data=$result->fetch_assoc()){
?>
<li _src="url(<?php echo $data['suoluetu']?>)"><a href="<?php echo $data['url']?>"></a></li>
<?php
}
}
?>
</ul>
</div>
<div class="hd"><ul></ul></div>
<span class="prev"></span>
<span class="next"></span>
</div>
<link href="Skin/superslide/css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Skin/superslide/js/superslide.2.1.js"></script>
<script type="text/javascript">
$(".fullSlide").hover(function(){
$(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
},
function(){
$(this).find(".prev,.next").fadeOut()
});
$(".fullSlide").slide({
titCell: ".hd ul",
mainCell: ".bd ul",
effect: "fold",
autoPlay: true,
autoPage: true,
trigger: "click",
startFun: function(i) {
var curLi = jQuery(".fullSlide .bd li").eq(i);
if ( !! curLi.attr("_src")) {
curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
}
}
});
</script>
<div class="bd">
<ul>
<?php
$sql="select title,suoluetu,url from flash where sortid in (".getChildrenId("flash",1).") and enable=0 order by paixu asc,addtime desc,id desc limit 0,10";
$result=$conn->query($sql);
if($result->num_rows>0){
while($data=$result->fetch_assoc()){
?>
<li _src="url(<?php echo $data['suoluetu']?>)"><a href="<?php echo $data['url']?>"></a></li>
<?php
}
}
?>
</ul>
</div>
<div class="hd"><ul></ul></div>
<span class="prev"></span>
<span class="next"></span>
</div>
<link href="Skin/superslide/css/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="Skin/superslide/js/superslide.2.1.js"></script>
<script type="text/javascript">
$(".fullSlide").hover(function(){
$(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
},
function(){
$(this).find(".prev,.next").fadeOut()
});
$(".fullSlide").slide({
titCell: ".hd ul",
mainCell: ".bd ul",
effect: "fold",
autoPlay: true,
autoPage: true,
trigger: "click",
startFun: function(i) {
var curLi = jQuery(".fullSlide .bd li").eq(i);
if ( !! curLi.attr("_src")) {
curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
}
}
});
</script>
4、调整焦点图的高度:修改/Skin/superslide/css/css.css
[可选步骤]5、调整焦点图的切换速度:修改/Skin/superslide/js/superslide.2.1.js

下一篇:[插件]仿QQ商城幻灯代码
我要评论