js焦点图myFocus插件

js焦点图myFocus插件

1. 引入CSS

<link href="css/main.css"  rel="stylesheet" type="text/css" />

2. 引入JS

<script src="dist/myfocus-2.0.4.min.js"  type="text/javascript"></script>

3. HTML代码

<br>
<div id="container" class="mbox">
	<div id="content" class="single">
		<div class="cbx post">
			<!--内容区域-->
			<div id="focus_wrap">
				<div id="focus_box">
						<div id="focus">
								<div class="loading"><img src="picture/loading.gif"  alt="请稍候..." /></div>
								<!--载入画面(可删除)-->
							  <div class="pic">
								<!--图片列表-->
								<ul>
								  <li><a href="http://hppts://www.51qianduan.com
/"><img src="picture/1.jpg" thumb="" alt="图片1说明" text="图片1更详细的描述文字" /></a></li>
								  <li><a href="http://hppts://www.51qianduan.com
/"><img src="picture/2.jpg" thumb="" alt="图片2说明" text="图片2更详细的描述文字" /></a></li>
								  <li><a href="http://hppts://www.51qianduan.com
/"><img src="picture/3.jpg" thumb="" alt="图片3说明" text="图片3更详细的描述文字" /></a></li>
								  <li><a href="http://hppts://www.51qianduan.com
/"><img src="picture/4.jpg" thumb="" alt="图片4说明" text="图片4更详细的描述文字" /></a></li>
								  <li><a href="http://hppts://www.51qianduan.com
/"><img src="picture/5.jpg" thumb="" alt="图片5说明" text="图片5更详细的描述文字" /></a></li>
								</ul>
							  </div>
						</div>
							<div class="clear"></div>
				</div>
			</div>
			<div id="focus_set"> 风格应用选择:
				<select id="focus_pattern">     
					<option value="mF_fscreen_tb">mF_fscreen_tb</option>     
					<option value="mF_YSlider">mF_YSlider</option>     
					<option value="mF_luluJQ">mF_luluJQ</option>     
					<option value="mF_51xflash">mF_51xflash</option>     
					<option value="mF_expo2010">mF_expo2010</option>     
					<option value="mF_games_tb">mF_games_tb</option>     
					<option value="mF_ladyQ">mF_ladyQ</option>     
					<option value="mF_liquid">mF_liquid</option>     
					<option value="mF_liuzg">mF_liuzg</option>     
					<option value="mF_pithy_tb">mF_pithy_tb</option>     
					<option value="mF_qiyi">mF_qiyi</option>     
					<option value="mF_quwan">mF_quwan</option>     
					<option value="mF_rapoo">mF_rapoo</option>     
					<option value="mF_sohusports">mF_sohusports</option>     
					<option value="mF_taobao2010">mF_taobao2010</option>     
					<option value="mF_taobaomall">mF_taobaomall</option>     
					<option value="mF_tbhuabao">mF_tbhuabao</option>     
					<option value="mF_pconline">mF_pconline</option>     
					<option value="mF_peijianmall">mF_peijianmall</option>     
					<option value="mF_classicHC">mF_classicHC</option>     
					<option value="mF_classicHB">mF_classicHB</option>     
					<option value="mF_slide3D">mF_slide3D</option>     
					<option value="mF_kiki">mF_kiki</option>     
					<option style="color:#f00;" value="mF_fancy" selected="selected">mF_fancy</option>     
					<option style="color:#f00;" value="mF_dleung">mF_dleung</option>     
					<option style="color:#f00;" value="mF_kdui">mF_kdui</option>     
					<option style="color:#f00;" value="mF_shutters">mF_shutters</option>   
					<option style="color:#090;" value="more">更多...</option> 
				</select>   
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	var $id=function(id){return document.getElementById(id)};
	  var oriHtml=$id('focus_box').innerHTML;
	  function resetHTML(){//还原
			$id('focus_box').innerHTML=oriHtml;
			var css=document.getElementsByTagName('style')[0];
			css.parentNode.removeChild(css);
		}
function pageInit(){
	var pattern=location.href.split('pattern=')[1];
	if(pattern) $id('focus_pattern').value=pattern;
	myFocus.set({id:'focus',pattern:$id('focus_pattern').value});
}
pageInit();
		$id('focus_pattern').onchange=function(){
if(this.value==='more'){//更多风格
location.href='more.html';
return;
}			
resetHTML();
			myFocus.set({id:'focus',pattern:this.value,loadIMGTimeout:0});
		}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>

用户评论

18素材网

一个让开发更高效的素材分享平台,用于快速开发强大的Web界面。


官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:864918708
Css3+Html5讨论群
群号:864918708

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