Carousel carousel special effects
There are five pictures in total, and each picture is arranged symmetrically in the middle. The image size and opacity are not the same, but the style of the symmetrical image is the same.
Presents a three-dimensional carousel effect.
The effect diagram is as follows:
practice:
1. Set the layout
in:
A ul is placed in a large box, and there are five li tags in the ul, which are used to place pictures respectively.
and have two divs used as left and right arrows for switching pictures
<div class="box">
<ul>
<li class="li1"><img src="images/slidepic1.jpg" alt=""></li>
<li class="li2"><img src="images/slidepic2.jpg" alt=""></li>
<li class="li3"><img src="images/slidepic3.jpg" alt=""></li>
<li class="li4"><img src="images/slidepic4.jpg" alt=""></li>
<li class="li5"><img src="images/slidepic5.jpg" alt=""></li>
</ul>
<div class="left"><img src="images/prev.png" alt=""></div>
<div class="right"><img src="images/next.png" alt=""></div>
</div>2. Set the style
The box is centered, and each li is set to absolute positioning, and then the relevant styles of the left and right arrows are set.
.box {
text-align: center;
position: relative;
width: 1260px;
height: 600px;
margin: 0 auto;
}
ul {
width: 800px;
margin: 0 auto;
}
li {
list-style: none;
position: absolute;
}
li img {
width: 100%;
height: 100%;
}
.left {
cursor: pointer;
position: absolute;
z-index: 5;
top: 50%;
left: 100px;
opacity: 0;
}
.right {
cursor: pointer;
position: absolute;
z-index: 5;
top: 50%;
right: 100px;
opacity: 0;
}3. Define an array in JS to set the position of these five li (absolute positioning)
var jsonArr = [
//第一张li位置
{ "opacity": 30,
"zIndex": 1,
"top": 80,
"left": 80,
"width": 400,
"height": 300
},
//第二张li位置
{ "opacity": 80,
"zIndex": 2,
"top": 140,
"left": 0,
"width": 650,
"height": 400
},
//第三张li位置
{ "opacity": 100,
"zIndex": 3,
"top": 110,
"left": 250,
"width": 800,
"height": 500
},
//第四张li位置
{ "opacity": 80,
"zIndex": 2,
"top": 140,
"left": 640,
"width": 650,
"height": 400
},
//第五张li位置
{ "opacity": 30,
"zIndex": 1,
"top": 80,
"left": 830,
"width": 400,
"height": 300
}
];4. Compatibility writing to get style value
function getStyle(ele,attr) {
if(window.getComputedStyle){
return window.getComputedStyle(ele,null)[attr];
}
return ele.currentStyle[attr];
}
5. Define an animate() method (easing animation method)
//重新封装animate方法 解决某些兼容性问题如：opacity，zIndex等兼容性问题
function animate(ele,json,fn) {
clearInterval(ele.timer);
ele.timer = setInterval(function () {
//利用开闭原则，判断所有属性是否一定全部到位，全部到位就清除定时器，否则将继续
var bool = true;
for(var i in json){
//parseInt(getStyle(ele,i)) || 0
//由于getStyle函数返回的类型不是number类型，所以要用进行转为number类型
// || 0 是为了避免出现某些属性没有定义而导致报错
var leader;
if(i == "opacity"){
leader = getStyle(ele,i)*100 || 1;
//用getStyle(ele,i)得到的opacity值时小数制，所以要乘以100
}else {
leader = parseInt(getStyle(ele,i)) || 0;
}
var step = (json[i]-leader)/10;
step = step>0?Math.ceil(step):Math.floor(step);
leader = leader+step;
//要进行特殊情况的判断，当属性是zIndex，opacity，不能加单位
if(i == "zIndex"){
//层级问题不能用缓动动画做，否则会一闪一闪的
ele.style[i] = json[i];
} else if(i == "opacity"){
ele.style[i] = leader/100;
ele.style.filter = "alpha(opacity="+leader+")";
} else{
ele.style[i] = leader+"px";
}
//判断属性是否到位(不考虑有小数的情况)
if(json[i] !== leader){
bool = false;
}
}
if(bool){
clearInterval(ele.timer);
if(fn){
fn();
}
}
},20);
}6. Define a move() method to move the corresponding li to the specified position
In the beginning, all the li's are placed in the same position inside the box.
When the page is loaded, the move() method is executed once, so that each li moves to the corresponding position.
Before explaining the move() method, we need to introduce some array methods:
1. pop() removes the last element
2. push() adds an element to the back
3. shift() removes the front element
4. unshift() adds an element to the front
Ideas:
1. When clicking the left arrow, place the last element in the jsonArr array at the very beginning of the array.
Use the pop() method here to remove the last element, and then use the push() method to add the element to the beginning
2. When clicking the right arrow, place the first element in the jsonArr array at the end of the array
Use the shift() method here to remove the first element, and then use the unshift() method to add the element to the end
3. The specific implementation code is as follows:
//封装一个move方法，完善旋转轮播图
//当bool为true时，为点击右箭头，否则就为左箭头
function move(bool) {
//在执行第一次move时，并不需要传递bool值
// 所以当bool不是undefined时，再进行判断即可
if(bool !== undefined){
if(bool){
var first = jsonArr.shift();
jsonArr.push(first);
}else {
var last = jsonArr.pop();
jsonArr.unshift(last);
}
}
for(var i=0;i<liArr.length;i++){
animate(liArr[i],jsonArr[i],function () {
flag = true;
});
}
}# 7. Finally, bind the click event to the left and right arrows, so that the li can move
//点击左侧按钮，图片逆时针旋转，jsonArr最后一个元素放在最开头
left.onclick = function () {
if(flag){
//一发生点击事件，就让flag为false
// 当animate方法执行完毕，执行了回调函数，下一次点击才会有效，这样可以避免恶意点击
flag = false;
move(false);
}
}
//点击右侧按钮，图片顺时针旋转，jsonArr第一个元素放在最末尾
right.onclick = function () {
if(flag){
flag = false;
move(true);
}
}