注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

可自定义滚动条的图片横向滚动的jquery插件imageFlow

媒体 fishcity 1898浏览

jquery图片滚动插件imageFlow

imageFlow是一款很棒的可自定义滚动条图片横向滚动jquery插件,插件可以设置任意数量的图片,点击任意图片即可激活放大成当前图片,也可以点击左右的箭头来进行图片逐一切换,当然还有一个特点是我们可以拖动自定义的滚动条来让图片快速地翻页,这是一款动画效果非常动滑平滑的jquery插件。但当本插件用的技术有点老,还一写着兼容IE6的代码,不过也一个学习动画原来的好案例。当然,jQ酷不建议这个插件直接拿来使用,倒是建议你参照其中的原来,采用现代浏览器的功能来实现这美丽的动画效果。

其接贴下代码了

<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
<script type="text/javascript" src="js/Flow.js"></script>

html

<div id="imageFlow">
	<div class="bank">
		<a rel='images/1090.png' href='#'>
			<ul>
				<li class="ProTi" >1090笔记本型光学无线鼠标 </li>
				<li>高精度光学寻迹引擎 </li>
				<li>无线自由 </li>	
				<li>NANO接收器,即插即忘 </li>		
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/1090jzb.png' href='#'>
			<ul>
				<li class="ProTi" >1090精致版笔记本型光学无线鼠标</li>
				<li>高精度光学寻迹引擎 </li>	
				<li>无线自由 </li>	
				<li>NANO接收器,即插即忘 </li>		
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/1030.png' href='#'>
			<ul>
				<li class="ProTi" >1030无线光学鼠标</li>
				<li>高精度光学寻迹引擎 </li>
				<li>无线自由 </li>	
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/1100X.png' href='#'>
			<ul>
				<li class="ProTi" >1100X光学无线鼠标</li>
				<li>高精度光学寻迹引擎 </li>
				<li>舒适贴心 </li>
				<li>无线自由 </li>	
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/1200.png' href='#'>
			<ul>
				<li class="ProTi" >1200光学无线鼠标</li>
				<li>高精度光学寻迹引擎 </li>
				<li>无线自由 </li>
				<li>纤薄外观 </li>
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/3100.png' href='#'>
			<ul>
				<li class="ProTi" >3100光学无线鼠标</li>
				<li>高精度蓝光寻迹引擎 </li>
				<li>动感流线,时尚魅力 </li>
				<li>无线自由 </li>
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/7100.png' href='#'>
			<ul>
				<li class="ProTi" >7100光学无线鼠标</li>
				<li>高精度蓝光寻迹引擎 </li>
				<li>精巧独到、舒适贴心 </li>
				<li>无线自由 </li>	
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/3000.png' href='#'>
			<ul>
				<li class="ProTi" >3000光学无线鼠标</li>
				<li>高精度蓝光寻迹引擎 </li>
				<li>精巧独到、舒适贴心 </li>	
				<li>无线自由 </li>	
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/3710.png' href='#'>
			<ul>
				<li class="ProTi" >3710无线激光鼠标</li>
				<li>更长电池使用寿命 </li>
				<li>2.4G无线自由 </li>
				<li>激光定位精准,移动灵敏 </li>
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/6310.png' href='#'>
			<ul>
				<li class="ProTi" >6310光学无线鼠标</li>
				<li>高精度蓝光寻迹引擎 </li>	
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/3180.png' href='#'>
			<ul>
				<li class="ProTi" >3180光学无线鼠标</li>
				<li>高精度蓝光寻迹引擎 </li>
				<li>舒适手感 </li>
				<li>无线自由 </li>
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
		<a rel='images/3090.png' href='#'>
			<ul>
				<li class="ProTi" >3090笔记本型无线光学鼠标</li>
				<li>高精度光学寻迹引擎 </li>
				<li>人体工学设计 </li>
				<li>无线自由 </li>	
				<li class="ProMo">了解更多...</li>
			</ul>  
		</a>
	</div>
	
	<div class="scrollbar">
		<img class="track" src="images/sb.png" alt="" />
		<img class="arrow-left" src="images/btn_Pro_show_left.png" alt="" />
		<img class="arrow-right" src="images/btn_Pro_show_right.png" alt="" />
		<img class="bar" src="images/sc.png" alt=""/>
	</div>
	
</div>

CSS

#imageFlow{width:1050px;height:390px;overflow:hidden;position:relative;margin:30px auto 0 auto;}
#imageFlow .diapo{position:absolute;left:-1000px;cursor:pointer;overflow:hidden;}
#imageFlow .bank{visibility:hidden;overflow:hidden;}
#imageFlow ul{height:20px;margin:0 auto;width:100%;text-align:center;}
#imageFlow ul li{color:#333;font-size:12px;text-align:left;margin-left:30%;height:20px;line-height:20px;overflow:hidden;width:100%;vertical-align:bottom;}
#imageFlow .text{position:absolute;left:0px;width:80px;bottom:1%;text-align:center;color:#333;font-family:verdana, arial, Helvetica, sans-serif;z-index:1000;}
#imageFlow .title{font-size:0.9em;font-weight:bold;}
#imageFlow .legend{font-size:0.8em;}
#imageFlow .scrollbar{position:absolute;left:10%;top:0;width:80%;height:16px;z-index:1;}
#imageFlow .scrollbar img{cursor:pointer;}
#imageFlow .track{position:absolute;left:-55px;width:950px;height:16px;top:0px;}
#imageFlow .arrow-left{position:absolute;left:-105px;z-index:1;}
#imageFlow .arrow-right{position:absolute;right:-105px;z-index:1;}
#imageFlow .bar{position:absolute;height:16px;left:25px;top:0px;cursor:pointer;}
#imageFlow .ProTi{color:#ff6600;font-weight:bold;}
#imageFlow .ProRmb{font-weight:bold;}
#imageFlow .ProMo{color:#ff6600;cursor:pointer;}

JS

if($.browser.msie&&($.browser.version == "6.0")&&!$.support.style){ 
	imf.create("imageFlow", 0.78, 1, 5);
	$(document).ready(function(){
		$(".bar").attr("src","images/clear.gif");   
		$(".bar").attr("style","filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/sc.png')");
		$(".arrow-left").attr("src","images/clear.gif");   
		$(".arrow-left").attr("style","filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/btn_Pro_show_left.png')");
		$(".arrow-right").attr("src","images/clear.gif");   
		$(".arrow-right").attr("style","filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/btn_Pro_show_right.png')");
	});
} else { 
	imf.create("imageFlow", 0.5, 1.5, 5);
}

转载请注明:jQ酷 » 可自定义滚动条的图片横向滚动的jquery插件imageFlow

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。