这是一个基于jQuery圆弧形图片播放插件。之前我们介绍的jQuery轮播图要么是左右切换，要么是上下切换，然后带有不同的过渡动画特效。但这款jQuery图片切换插件是沿着圆弧进行轮播切换的，更具有立体感，而且它也支持自动循环播放。实现这个效果的代码如下：
html：
<div class="user_callback">
<div class="user_pic" id="user_pic">
<span class="prev"></span> <span class="next"></span>
<ul id="user_call">
<li class="user_pic1">
<a href="#"> <img src="img/57f8c4ccN6a433b82.png" alt="1" width="248" height="285" /></a>
</li>
<li class="user_pic2">
<a href="#"> <img src="img/57f8c4d6Nd425f6a3.png" alt="2" width="247" height="285" /></a>
</li>
<li class="user_pic3">
<a href="#"> <img src="img/57f8c4e1Nbd6f109e.png" alt="3" width="248" height="285" /></a>
</li>
<li class="user_pic4">
<a href="#"> <img src="img/57f8c4ecN92c22efc.png" alt="4" width="247" height="285" /></a>
</li>
<li class="user_pic5">
<a href="#"> <img src="img/583691e7Na26009a0.png" alt="5" width="247" height="285" /></a>
</li>
<li class="user_pic6">
<a href="#"> <img src="img/583691e7Ne2adc3c4.png" alt="6" width="247" height="285" /></a>
</li>
<li class="user_pic7">
<a href="#"> <img src="img/583691e7N058f6f5a.png" alt="7" width="247" height="285" /></a>
</li>
<li class="user_pic8">
<a href="#"> <img src="img/583691e7N36b67a44.png" alt="8" width="247" height="285" /></a>
</li>
</ul>
</div>
</div>
css：
img {
border: 0;
}
li {
list-style: none;
}
.user_callback #user_pic {
position: relative;
overflow: hidden;
height: 450px;
width: 1200px;
z-index: 2;
margin: 0 auto;
}
.user_callback #user_pic ul {
width: 990px;
height: 285px;
position: relative;
top: 20px;
left: 105px;
}
.user_callback #user_pic ul li {
position: absolute;
}
.user_callback #user_pic ul img {
position: relative;
top: 0;
left: 0;
}
.user_callback #user_pic ul .user_pic1 {
top: -285px;
left: -231px;
z-index: 0;
}
.user_callback #user_pic ul .user_pic2 {
top: -23px;
left: -99.5px;
z-index: 2;
}
.user_callback #user_pic ul .user_pic3 {
top: 66px;
left: 68px;
z-index: 3;
}
.user_callback #user_pic ul .user_pic4 {
top: 110px;
left: 247.5px;
z-index: 4;
}
.user_callback #user_pic ul .user_pic5 {
top: 110px;
left: 495px;
z-index: 3;
}
.user_callback #user_pic ul .user_pic6 {
top: 66px;
left: 695.5px;
z-index: 2;
}
.user_callback #user_pic ul .user_pic7 {
top: -23px;
left: 852px;
z-index: 1;
}
.user_callback #user_pic ul .user_pic8 {
top: -285px;
left: 1000px;
z-index: 0;
}
.user_callback #user_pic ul .user_pic1 a {
width: 216.5px;
height: 248px;
}
.user_callback #user_pic ul .user_pic2 a {
width: 225.5px;
height: 259px;
}
.user_callback #user_pic ul .user_pic3 a {
width: 247.5px;
height: 285px;
}
.user_callback #user_pic ul .user_pic4 a {
width: 247.5px;
height: 285px;
}
.user_callback #user_pic ul .user_pic5 a {
width: 247.5px;
height: 285px;
}
.user_callback #user_pic ul .user_pic6 a {
width: 247.5px;
height: 285px;
}
.user_callback #user_pic ul .user_pic7 a {
width: 225.5px;
height: 259px;
}
.user_callback #user_pic ul .user_pic8 a {
width: 216.5px;
height: 248px;
}
.user_callback #user_pic ul li:hover {
background: #d9bb83;
}
.user_callback #user_pic ul li.user_pic1 {
opacity: 0.2;
filter: alpha(opacity:20);
}
.user_callback #user_pic ul li.user_pic2 {
opacity: 0.6;
filter: alpha(opacity:60);
}
.user_callback #user_pic ul li.user_pic3 {
opacity: 0.8;
filter: alpha(opacity:80);
}
.user_callback #user_pic ul li.user_pic4 {
opacity: 1;
filter: alpha(opacity:100);
}
.user_callback #user_pic ul li.user_pic5 {
opacity: 1;
filter: alpha(opacity:100);
}
.user_callback #user_pic ul li.user_pic6 {
opacity: 0.8;
filter: alpha(opacity:80);
}
.user_callback #user_pic ul li.user_pic7 {
opacity: 0.6;
filter: alpha(opacity:60);
}
.user_callback #user_pic ul li.user_pic8 {
opacity: 0.2;
filter: alpha(opacity:20);
}
.user_callback #user_pic ul li.user_pic1 img {
width: 216.5px;
height: 248px;
}
.user_callback #user_pic ul li.user_pic2 img {
width: 225.5px;
height: 259px;
}
.user_callback #user_pic ul li.user_pic3 img {
width: 230.5px;
height: 264px;
}
.user_callback #user_pic ul li.user_pic4 img {
width: 247.5px;
height: 285px;
}
.user_callback #user_pic ul li.user_pic5 img {
width: 247.5px;
height: 285px;
}
.user_callback #user_pic ul li.user_pic6 img {
width: 230.5px;
height: 264px;
}
.user_callback #user_pic ul li.user_pic7 img {
width: 225.5px;
height: 259px;
}
.user_callback #user_pic ul li.user_pic8 img {
width: 216.5px;
height: 248px;
}
.user_callback #user_pic span {
display: inline-block;
*display: inline;
*zoom: 1;
width: 80px;
height: 80px;
position: absolute;
top: 160px;
z-index: 30;
cursor: pointer;
opacity: 0.7;
filter: alpha(opacity=70);
}
.user_callback #user_pic:hover span {
opacity: 1;
filter: alpha(opacity=100);
}
.user_callback #user_pic span img {
width: 80px;
height: 80px;
display: block;
}
.user_callback #user_pic span.prev {
background: url(img/5836af12Neb8a5654.png) no-repeat;
position: absolute;
top: 100px;
left: 5px;
display: inline-block;
width: 60px;
height: 60px;
}
.user_callback #user_pic span.next {
background: url(img/5836af12N536e472b.jpg) no-repeat;
position: absolute;
top: 100px;
right: 5px;
display: inline-block;
width: 60px;
height: 60px;
}
.user_callback #user_pic span.prev:hover {
background: url(img/5836af12Neb8a56523.png) no-repeat;
}
.user_callback #user_pic span.next:hover {
background: url(img/5836b011N9a4d4531.jpg) no-repeat;
}
.user_callback {
background: #ccab6e;
overflow: hidden;
}
js：
function arcSlip() {
var oPic = document.getElementById('user_pic');
var oPrev = getByClass(oPic, 'prev')[0];
var oNext = getByClass(oPic, 'next')[0];
var aLi = oPic.getElementsByTagName('li');
var arr = [];
for(var i = 0; i < aLi.length; i++) {
var oImg = aLi[i].getElementsByTagName('img')[0];
arr.push([parseInt(getStyle(aLi[i], 'left')), parseInt(getStyle(aLi[i], 'top')),
getStyle(aLi[i], 'zIndex'), oImg.width, parseFloat(getStyle(aLi[i], 'opacity') * 100)
]);
}
oPrev.onclick = function moveTP() {
arr.push(arr[0]);
arr.shift();
for(var i = 0; i < aLi.length; i++) {
var oImg = aLi[i].getElementsByTagName('img')[0];
aLi[i].style.zIndex = arr[i][2];
startMove(aLi[i], { left: arr[i][0], top: arr[i][1], opacity: arr[i][4] });
startMove(oImg, { width: arr[i][3] });
}
}
oNext.onclick = function moveTN() {
arr.unshift(arr[arr.length - 1]);
arr.pop();
for(var i = 0; i < aLi.length; i++) {
var oImg = aLi[i].getElementsByTagName('img')[0];
aLi[i].style.zIndex = arr[i][2];
startMove(aLi[i], { left: arr[i][0], top: arr[i][1], opacity: arr[i][4] });
startMove(oImg, { width: arr[i][3] });
}
}
var moveTime = setInterval(function() {
oNext.click();
}, 1000);
$('#user_pic').hover(function() {;;
clearInterval(moveTime);
}, function() {
moveTime = setInterval(function() {
oNext.click();
}, 1000);
});
function getStyle(obj, name) {
if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; }
}
}
function getByClass(oParent, sClass) {
var aResult = [];
var aEle = oParent.getElementsByTagName('*');
for(var i = 0; i < aEle.length; i++) {
if(aEle[i].className == sClass) {
aResult.push(aEle[i]);
}
}
return aResult;
}
function getStyle(obj, name) {
if(obj.currentStyle) {
return obj.currentStyle[name];
} else {
return getComputedStyle(obj, false)[name];
}
}
function startMove(obj, json, fnEnd) {
clearInterval(obj.timer);
obj.timer = setInterval(function() {
var bStop = true;
for(var attr in json) {
var cur = 0;
if(attr == 'opacity') {
cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
} else {
cur = parseInt(getStyle(obj, attr));
}
var speed = (json[attr] - cur) / 6;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if(cur != json[attr]) bStop = false;
if(attr == 'opacity') {
obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')';
obj.style.opacity = (cur + speed) / 100;
} else {
obj.style[attr] = cur + speed + 'px';
}
}
if(bStop) {
clearInterval(obj.timer);
if(fnEnd) fnEnd();
}
}, 30)
}
arcSlip();
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
