I. Description
A series of pictures can be displayed with the effect of carousel. The effect is as follows:
II. Implementation steps
2.1 Template settings
Create a new dashboard and drag in an Absolute Layout Block, as follows:
2.2 Add JavaScript event
Select the Absolute Layout Block component and add an After Initialization event, as follows:
The JavaScript code is as follows:
setTimeout(function() {
$("div[widgetname='ABSOLUTE0']").append("<div id=\"box\">
<div class=\"slide\">
<ul>
<li><a href=\"#\"><img src=\"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg\" alt=\"aaa\"></a>
</li>
<li><a href=\"#\"><img src=\"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg\" alt=\"aaa\"></a>
</li><li><a href=\"#\"><img src=\"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg\" alt=\"aaa\"></a>
</li><li><a href=\"#\"><img src=\"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg\" alt=\"aaa\"></a>
</li><li><a href=\"#\"><img src=\"http://img.mukewang.com/52da54ed0001ecfa04120172.jpg\" alt=\"aaa\"></a>
</li>
</ul>
<div class=\"arraw\">
<a href=\"javascript:;\" class=\"next\"></a><a href=\"javascript:;\" class='prev'></a>
</div>
</div>
</div>
<script>
var box = document.querySelector('#box');
var slide = document.querySelector('.slide');
var arraw = document.querySelector('.arraw');
var lis = document.querySelectorAll('li');
var json = [ {
width:400,top:20,left:120,opacity:20,z:2,id:1},{
width:600,top:70,left:50,opacity:60,z:3,id:2},{
width:800,top:100,left:150,opacity:100,z:4,id:3},{
width:600,top:70,left:350,opacity:60,z:3,id:4},{
width:400,top:20,left:370,opacity:20,z:2,id:5
}];
var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
var timer = null;
var flag = true;
move();
run();
function run(){
clearInterval(timer);
timer = setInterval(function(){
if(flag == true){
flag = false;move(true);
}
},500);}function move(x){
if(x != undefined){
if(x){
json.push(json.shift());
}else{
json.unshift(json.pop());
};
};
for(var i = 0; i<json.length; i++){
animate(lis[i],{
width: json[i].width,
top: json[i].top,
left: json[i].left,
opacity: json[i].opacity,
zIndex: json[i].z},
function(){
flag = true;
}
)};
}
function animate(obj, json, callback){
clearInterval(obj.timer);obj.timer = setInterval(function(){
var stoped = true;
for(var k in json){
var leader = 0;
if(k == 'opacity'){
leader = Math.round(getStyle(obj, k)*100) || 100;
}else {
leader = parseInt(getStyle(obj, k)) || 0;
};
var step = (json[k]-leader)/10;
step = step > 0? Math.ceil(step) : Math.floor(step);
leader = leader + step;if(k == 'opacity'){
obj.style[k] = leader/100;
obj.style['filter'] = 'alpha(opacity='+ leader +')';
}else if(k == 'zIndex'){
obj.style['zIndex'] = json[k];
console.log(666);
}else{
obj.style[k] = leader + \"px\";
}if(leader != json[k]){
stoped = false;
}
};
if(stoped){
clearInterval(obj.timer);
callback && callback();
};
},50);
};
function getStyle(obj, attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return window.getComputedStyle(obj, null)[attr];
};
};
</script>")
},
20);
2.3 Setting the style
Create a new file 1.css, write the following style code, and save it in the folder %FR_HOME%\webapps\webroot\css.
ul li {
list-style: none;
}
*{margin:0;padding:0;}
#box {
width: 1200px;
margin: 20px auto;
}
.slide {
height: 200px;
position: relative;
}
.slide ul {
height: 50%;
}
.slide li {
position: absolute;
left:200px;
top:0;
}
.slide li img{
width: 50%;
}
2.4 Introducing CSS files
Select Server > Server Configuration Management > Reference Css, and import the CSS file just created, as follows:
III. Save the preview
Preview. The effect is as shown in the beginning.
Note: When replacing your own photo, you can directly change the image link in JavaScript.
Previous：JS Realizes the Clock Effect
