首页 > 代码修改 > 点点博客幻灯片及广告代码
2012
08-28

点点博客幻灯片及广告代码

今天经过实验,将点点网的幻灯片解决了,是根据网友的广告代码修改的,下图为二者同处一界面上的效果:

点点博客幻灯片及广告代码 - 第1张  | 心岛博客

幻灯片代码如下:

<!-- 幻灯片开始 --> 
			<script type="text/javascript"
    src="https://t.libdd.com/js/libs/jquery/jquery-1.7-latest.js">
</script>

<script type="text/javascript"
    src="https://x.libdd.com/farm1/caf5e7/467ac489/g.base.js">
</script>
<script type="text/javascript"
    src="https://x.libdd.com/farm1/2cff64/95878503/hd.base.js">
</script>
<div id="hdeng"></div>
{#image:幻灯.图片1|value:""}
{#text:幻灯.网址1|value:""}
{#text:幻灯.描述1|value:""}
{#image:幻灯.图片2|value:""}
{#text:幻灯.网址2|value:""}
{#text:幻灯.描述2|value:""}
{#image:幻灯.图片3|value:""}
{#text:幻灯.网址3|value:""}
	{#text:幻灯.描述3|value:""}
	{#image:幻灯.图片4|value:""}
			{#text:幻灯.网址4|value:""}
	{#text:幻灯.描述4|value:""}
	<script type="text/javascript">
	$("#hdeng").jdhdeng({width:1000,height:330,pics:[
	{src:"{$_幻灯.图片1}",href:"{$_幻灯.网址1}",
	alt:"{$_幻灯.描述1}",breviary:"#",type:"img"},
	{src:"{$_幻灯.图片2}",href:"{$_幻灯.网址2}",
	alt:"{$_幻灯.描述2}",breviary:"#",type:"img"},
	{src:"{$_幻灯.图片3}",href:"{$_幻灯.网址3}",
	alt:"{$_幻灯.描述3}",breviary:"#",type:"img"},
	{src:"{$_幻灯.图片4}",href:"{$_幻灯.网址4}",
	alt:"{$_幻灯.描述4}",breviary:"#",type:"img"}]})
	</script>

广告代码:

<!--广告-->

<div id="slide"></div>
{#image:广告.图片1|value:""}
{#text:广告.网址1|value:""}
{#text:广告.描述1|value:""}
{#image:广告.图片2|value:""}
{#text:广告.网址2|value:""}
{#text:广告.描述2|value:""}
{#image:广告.图片3|value:""}
{#text:广告.网址3|value:""}
{#text:广告.描述3|value:""}
{#image:广告.图片4|value:""}
{#text:广告.网址4|value:""}
{#text:广告.描述4|value:""}
<script type="text/javascript">
$("#slide").jdSlide({width:247,height:330,pics:[
{src:"{$_广告.图片1}",href:"{$_广告.网址1}",
alt:"{$_广告.描述1}",breviary:"#",type:"img"},
{src:"{$_广告.图片2}",href:"{$_广告.网址2}",
alt:"{$_广告.描述2}",breviary:"#",type:"img"},
{src:"{$_广告.图片3}",href:"{$_广告.网址3}",
alt:"{$_广告.描述3}",breviary:"#",type:"img"},
{src:"{$_广告.图片4}",href:"{$_广告.网址4}",
alt:"{$_广告.描述4}",breviary:"#",type:"img"}]})
</script>
<!--广告/结束-->

幻灯片CSS代码如下:

		/*--幻灯片--*/
		
		#hdeng {
    background: url("https://x.libdd.com/farm1/caf5e7/7b977607/loading.gif") no-repeat scroll center center transparent;
    float: left;
    height: 330px;
    margin: 6px ;
    overflow: hidden;
	width: 980px;
		border:3px solid #E0E0E0;
    position: relative;
    
}
#hdeng ul {
    position: absolute;
}
#hdeng li {
    float: left;
    height: 330px;
    overflow: hidden;
    width: 980px;
}
#hdeng .o-control {
    background: none repeat scroll 0 0 #000000;
    cursor: pointer;
    display: none;
    height: 80px;
    opacity: 0.3;
    position: absolute;
    top: 125px;
    width: 50px;
}
#hdeng .control {
    background: url("https://x.libdd.com/farm1/caf5e7/16160b36/bgindex.png") repeat scroll 0 0 transparent;
    display: inline-block;
    height: 55px;
    left: 8px;
    opacity: 0.6;
    position: relative;
    top: 15px;
    width: 30px;
}
#hdeng #back {
    left: 0;
}
#back .control {
    background-position: 0 -35px;
}
#hdeng #next {
    right: 0;
}
#next .control {
    background-position: -35px -35px;
    left: 15px;
}
#hdeng div {
    bottom: 10px;
    float: left;
    height: 22px;
    overflow: hidden;
    position: absolute;
    right: 10px;
}
#hdeng span {
    background: none repeat scroll 0 0 #996633;
    cursor: pointer;
    float: left;
    font-family: arial;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
    margin: 2px;
    opacity: 0.7;
    text-align: center;
    width: 22px;
}
#hdeng span a {
    color: #FFFFFF;
    text-decoration: none;
}
#hdeng span.curr, #hdeng span.hover {
    background: none repeat scroll 0 0 #000000;
    opacity: 1;
}
#hdeng .curr a:link, #hdeng .curr a:visited {
    color: #FFFFFF;
}

广告CSS代码如下:

/*slide*/
#slide{position:relative; float:left; width:247px; height:330px; margin:10px 0 0 5px; 
_display:inline;
overflow:hidden; background:url(https://x.libdd.com/farm1/caf5e7/7b977607/loading.gif) no-repeat center;}
#slide ul{position:absolute;}
#slide li{float:left; width:247px; height:330px; overflow:hidden; }
#slide .o-control{display:none;position:absolute;top:125px;width:50px;height:80px;background:#000;filter:alpha(opacity=30);opacity:0.3;cursor:pointer;}
#slide .control{position:relative;top:14px;left:8px;display:inline-block;width:30px;height:55px;background:url(https://x.libdd.com/farm1/caf5e7/16160b36/bgindex.png);filter:alpha(opacity=60);opacity:0.6;}
#slide #goback{left:0px;}
#goback .control{background-position:0px -35px;}
#slide #forward{right:0px;}
#forward .control{left:15px;background-position:-35px -35px;}
#slide div{position:absolute; float:left; bottom:20px; right:10px; height:32px; overflow:hidden; zoom:1; }
#slide span{width:32px;font-size:14px;height:32px;margin:2px 2px; background:#963;float:left;text-align:center;line-height:32px;cursor:pointer;font-family:arial;filter:alpha(opacity=70);opacity:0.7;}
#slide span a{color:#fff;text-decoration:none;}
#slide span.curr,#slide span.hover{background:#000;filter:alpha(opacity=100);opacity:1;}
#slide .curr a:link, #slide .curr a:visited{color:#fff;}
#control{font-size:18px;font-weight:bold;padding-left:3px;}
#control li{display:block;float:left;width:80px;height:32px;line-height:32px;border:1px dotted #ccc;}
#control li a{display:block;width:80px;height:32px;text-align:center;background:#000;}
#control li a:hover{background:#efefef;border:0;color:#ccc;}

说明:幻灯片中的三个调用js为共用js代码!大家赶紧试试吧!

最后编辑:
作者:xindao
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。