求jquery图片轮转成效-JavaSript-爱易网页

求jquery图片轮转成效

日期：2014-05-16　浏览次数：20430 次

求jquery图片轮转效果

求如上图的图片轮转效果

谢谢大神了

------解决方案--------------------
从你的图片上看不出是翻页还是滚动，直接给你推荐几个插件吧
http://www.gbin1.com/technology/jquerynews/20120918-flip-animal-photobook/
http://www.gbin1.com/technology/jquerynews/20120926-jquery-slider-cycle2/
http://www.gbin1.com/technology/jquerynews/20121110-jquery-jqtiles/
http://www.gbin1.com/technology/jquerynews/20120819-jquery-image-3d-slider/
------解决方案--------------------
图片展示效果
------解决方案--------------------



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<BODY>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

 

<style>

	#imgbox{

		width:250px;

		height:250px;

		border:1px solid #ccc;

		position:relative;

		overflow:hidden;

	}

	#imgbox img{

		width:250px;

		height:250px;

		display:none;

		position: absolute;

		top:0;

		left:0;

	}

	#imgbox .act{ display:block;z-index:9}

	.infoBar{ text-align:center; width:250px;  }

</style>

<div id="imgbox">

<img class="act" src="http://e.hiphotos.baidu.com/pic/w%3D230/sign=8eb4edf74afbfbeddc59317c48f1f78e/e824b899a9014c08ba1d546d0b7b02087af4f4d0.jpg" />

<img src="http://e.hiphotos.baidu.com/pic/w%3D230/sign=89d9aee991ef76c6d0d2fc28ad17fdf6/fc1f4134970a304e491bdc32d0c8a786c9175c38.jpg" />

<img src="http://c.hiphotos.baidu.com/pic/w%3D230/sign=0b99fb4fd1a20cf44690f9dc46084b0c/9825bc315c6034a80cc4c449ca134954082376d7.jpg" />

<img src="http://g.hiphotos.baidu.com/pic/w%3D230/sign=501967d6b8389b5038ffe751b537e5f1/18d8bc3eb13533fae443eee6a9d3fd1f40345b04.jpg" />

<img src="http://c.hiphotos.baidu.com/pic/w%3D230/sign=20b79e70d53f8794d3ff4f2de2190ead/aec379310a55b3195936ffbd42a98226cefc172e.jpg" />

<img src="http://a.hiphotos.baidu.com/pic/w%3D230/sign=a28bbffb728da9774e2f81288050f872/a1ec08fa513d2697b1f5749554fbb2fb4216d8d0.jpg" />

<img src="http://a.hiphotos.baidu.com/pic/w%3D230/sign=f358063ad462853592e0d522a0ee76f2/32fa828ba61ea8d3951708cc960a304e241f58c4.jpg" />

<img src="http://d.hiphotos.baidu.com/pic/w%3D230/sign=380ad47ad058ccbf1bbcb23929dabcd4/a5c27d1ed21b0ef49001e596dcc451da80cb3e08.jpg" />

 

</div>

<div class="infoBar" ><a href="#" id="bntPrev" ><</a> <a id="imgInfo" ></a>  <a href="#" id="bntNext" >></a>   </div>

<script>

	function PlayImg(id,time,callBack){

		var ii=0,me=this;

		var imgs=$(id+' img'),L=imgs.length,tir,w=imgs[0].offsetWidth;

		function fn(t){

			 var t=(t
------解决方案--------------------
1)==1?1:L-1;

			 var n=$(imgs[(ii+t)%L]);

			 n.show().css({left:0,opacity:1});

			 clearTimeout(tir);

			 $(imgs[ii]).animate({ left:w*(t

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

求jquery图片轮转成效

相关资料更多>

推荐阅读更多>