jQuery焦点图桨式翻转轮播代码



127 506 169



特效描述:jQuery焦点图 桨式翻转轮播代码,jQuery焦点图桨式翻转轮播代码

代码结构

1. 引入JS

<script src="js/jquery-1.10.2.js"></script>

2. HTML代码

<div id="box">
<ul>
	<li><img src="img/1.png" alt="pho"/></li>
	<li><img src="img/2.png" alt="pho"/></li>
	<li><img src="img/3.png" alt="pho"/></li>
	<li><img src="img/4.png" alt="pho"/></li>
	<li><img src="img/5.png" alt="pho"/></li>
</ul>
<div id="show"></div>
</div>
<input type="button" id="prev" value="上一张"/>
<input type="button" id="next" value="下一张"/>
<script>
	var oShow = document.getElementById("show");
	var oBox = document.getElementById('box');
	var prev = document.getElementById("prev");
	var next = document.getElementById("next");
	var oLi = oBox.getElementsByTagName("ul")[0].getElementsByTagName("li");
	var oImg = oBox.getElementsByTagName("ul")[0].getElementsByTagName("img");
	oShow.iNow = 0;
	oShow.urls = []; /*当前背景  给oshow对象添加一个自定义属性保存当前显示的图片*/
	oShow.off = false;
	/*保存图片路径*/
	for (var i = 0; i < 5; i++) {
		var oDiv1 = document.createElement("div");
		var oDiv2 = document.createElement("div");
		oDiv2.className = "div2";
		oDiv1.innerHTML = "<em class='em1' style='background-position: 0-" + i * 72 + "px'></em><span class='span1'></span>" +
				"<em class='em2' style='background-position: 0-" + i * 72 + "px'></em><span class='span2'></span>";
		oDiv2.innerHTML = "<em class='em1' style='background-position: -525px+" + (5 - i) * 72 + "px'></em><span class='span1'></span>" +
				"<em class='em2' style='background-position: -525px+" + (5 - i) * 72 + "px'></em><span class='span2'></span>";
		oShow.appendChild(oDiv1);
		oShow.appendChild(oDiv2);
	}
	oLi[0].style.display = "block";
	/***********/
	//获取图片
	for (var i = 0; i < oImg.length; i++) {
		oShow.urls.push(oImg[i].getAttribute("src"));
	}
		prev.onclick = function () {
			if(oShow.off){
				return; //
			}
			oShow.off = true;
			var iNext = oShow.iNow - 1;
			if (iNext < 0) {
				iNext = oShow.urls.length - 1;
			}
			tab(iNext);//切换图片
		};
	next.onclick = function () {
		if(oShow.off){
			return; //
		}
		oShow.off = true;
		var iNext = oShow.iNow + 1;
		if (iNext >= oShow.urls.length) {
			iNext = 0;
		}
		tab(iNext);//切换图片
	};
	function tab(iNext) {
		var oEm1 = oShow.getElementsByClassName("em1");
		var oEm2 = oShow.getElementsByClassName("em2");
		var oDiv = oShow.getElementsByTagName("div");
		for (var i = 0; i < oEm1.length; i++) {
			//当前的这一张
			oEm1[i].style.backgroundImage = "url(" + oShow.urls[oShow.iNow] + ")";
			//后面的哪一张
			oEm2[i].style.backgroundImage = "url(" + oShow.urls[iNext] + ")";
		}
		oShow.style.display = "block";
		oLi[oShow.iNow].style.display = "none";
		//给具体的十个div绑定定时器  实现旋转效果
		for (var i = 0; i < oDiv.length; i+=2) {
			var time = (i+1)*50;
			oDiv[i].style.transform = "rotateX(0deg)";//左边
			oDiv[i + 1].style.transform = "rotateX(0deg)";//右边
			//具体每个div绑定定时器
			setTimer(oDiv[i], time,"move1");
			setTimer(oDiv[i + 1], time,"move2")
		}
		//动画执行完成之后
		setTimeout(function(){
			oShow.iNow = iNext;
			oLi[oShow.iNow].style.display = "block";///inext.inow
			oShow.style.display = "none";
			oShow.off = false;
		},(oDiv.length*50+1500))
	}
	function setTimer(obj,time,name){
		obj.timer = setTimeout(function(){
			//开启定时器之前先清除定时器
			clearTimeout(obj.timer);
			obj.style.animation = name + " 1.5s";
			obj.style.transform = "rotateX(180deg)";
			obj.timer = setTimeout(function(){
				obj.style.animation = "";
				clearTimeout(obj.timer);
				obj.timer = null;
			},1500);
		},time)
	}
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 旋转翻转 切换按钮 表单 焦点图 幻灯片 图片轮播 图片翻转旋转 图片切换 图片轮播 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到