欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

jQuery圆弧形图片播放插件 可自动播放

程序员文章站 2022-05-29 11:02:18
...

jQuery圆弧形图片播放插件 可自动播放
这是一个基于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();
相关标签： jQuery 焦点图

上一篇： HTC公开Hero Android源代码

下一篇： ViewGroup getChildDrawingOrder与焦点Focus放大遮挡

推荐阅读