[Show] hands-on teach you how to DIY portal slideshow

The first step is to create a new page in the background: this doesn't have to be a new one. The following template page appears in FTP

the second step from the FTP download template index.htm file to the homepage template page to add JS code as follows

Add this JS code to the red part of index.htm home template year
<script language= "JavaScript" src= "{@g:design.url.js}/global.js" ></script>

The

third step is to put the following code into the CSS file under the Style.css

/* Focus Chart */
. forum_recommend. home_push_slide{
Float:left;
}
. home_push_slidewrap{
Float:left;
width:260px;
Display:inline;
height:300px;
}
. home_push_slide {
height:300px;
Overflow:hidden;
position:relative;
width:260px;
Background: #f5f5f5;
}
. Home_push_slide img{
Display:block;
}
. home_push_slide. num {
bottom:5px;
right:5px;
Position:absolute;
Z-index:6;
}
. home_push_slide. Num Li {
Float:left;
margin-left:5px;
}
. home_push_slide. Num Li a {
Background: #fff;
Color: #000;
padding:0 5px;
}
. home_push_slide Num Li A:hover,
. home_push_slide Num Li.current a {
Background: #f60;
Color: #fff;
Text-decoration:none;
}
. home_push_slide. Caption {
Background: #000;
Background:rgba (0,0,0,.5);
bottom:0px;
height:30px;
/*opacity:0.6;*/
Position:absolute;
width:100%;
Z-index:6;
}
. h2:{line-height:30px;}
. home_push_slide. Caption p {
Color: #fff;
height:30px;
line-height:30px;
text-indent:10px;
width:100%;
}
. home_push_slide. Caption. h2 {
height:30px;
line-height:30px;
Overflow:hidden;
text-indent:10px;
}
. home_push_slide. Caption. H2 a {
Color: #fff;
font-size:12px;
}

The fourth step new JS file will be the following JS code into the JS file, and then uploaded to the JS directory

Wind.ready (' Global.js ', function () {
Wind.use (' Slides ', function () {
$ (' #J_slides '). Slides ({
Preload:false,
Preloadimage: ' {@theme: Images}/common/loading.gif ',
play:5000,
PAUSE:100,
Hoverpause:true,
Effect: ' Slide ',//fade toggle fade, default to ' slide ' scrolling
Crossfade:true,//blanking fade gap
Paginationclass: ' J_slides_num ',
Generatepagination:false,
Animationstart:function (current) {
$ ('. Caption '). Animate ({
Bottom:-55
},100);
},
Animationcomplete:function (current) {
$ ('. Caption '). Animate ({
bottom:0
},200);
},
Slidesloaded:function () {
$ ('. Caption '). Animate ({
bottom:0
},200);
}
});
})
});

Fifth Step Background module template Add a module name as a slide sorter write a post and copy the following code in

<div id= "J_slides" class= "Home_push_slide" >
<div class= "Slides_container" >
<for:>
<div class= "Slide" >
<a
href= "{URL}" title= "" target= "_blank" >Width= "height=" alt= "{title}" ></a>
<div class= "caption" >
<div class= "H2" ><a href= "{URL}" target= "_blank" >{title|12}</a></div>
</div>
</div>
</for>
</div>
<ul class= "J_slides_num num" >
<for:>
<li><a href= "" >{$__k+1}</a></li>
</for>
</ul>
</div>

The

sixth step, the front desk added is done if there is anything you do not understand can leave a message

This tutorial is referring to the address of a predecessor of the forum that's what I did.

because I have always wanted to DIY a portal, I do not know how to DIY slide, so for a long time there is no DIY out of

the door

want to be the same as I need to slide friends, you don't have to go so many detours

[Show] hands-on teach you how to DIY portal slideshow