一款双向无缝+按钮定位的焦点图实现代码

301 阅读 0 评论 199 点赞

我是靠谱客的博主粗暴柚子，这篇文章主要介绍一款双向无缝+按钮定位的焦点图实现代码，现在分享给大家，希望可以做个参考。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>myFocus - tbhuabao</title> 
<style type="text/css"> 
*{margin:0;padding:0;border:0;list-style:none;} 
body{background:#fff;padding:20px;} 
/*=========mF_tbhuabao========*/ 
.mF_tbhuabao {background:#ddd;border:10px solid #333;overflow:visible;} 
.mF_tbhuabao .pic,.mF_tbhuabao .win{position:absolute;top:0;left:0;overflow:hidden;} 
.mF_tbhuabao .pic li{position:relative;float:left;overflow:hidden;} 
.mF_tbhuabao .txt li{position:absolute;z-index:2;width:100%;height:38px;line-height:38px;display:none;}/*默认标题高度*/ 
.mF_tbhuabao .txt li a{display:block;position:relative;z-index:1;color:#fff;padding-left:16px;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/ 
.mF_tbhuabao .txt li span{display:block;height:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=30);opacity:0.3;} 
.mF_tbhuabao .dot{position:absolute;bottom:0;left:0;height:32px;line-height:28px;width:100%;text-align:center;} 
.mF_tbhuabao .dot li{display:inline;margin:0 3px;} 
.mF_tbhuabao .dot li a{color:#999;font-size:26px;text-decoration:none;} 
.mF_tbhuabao .dot li.current a{color:#f60;} 
.mF_tbhuabao .prev,.mF_tbhuabao .next{font:700 53px/58px arial;width:37px;height:65px;overflow:hidden;position:absolute;z-index:4;left:-20px;cursor:pointer;background:url(http://547d.ipc.la/img/myfocus/btn-bg.gif) no-repeat;} 
.mF_tbhuabao .next{left:auto;right:-20px;} 
.mF_tbhuabao .prev a,.mF_tbhuabao .next a{display:block;color:#bbb;text-align:center;text-decoration:none;} 
.mF_tbhuabao .prev a:hover,.mF_tbhuabao .next a:hover{color:#f60;} 
</style> 
 
</head> 
<body> 
<div id="myFocus"> 
<div class="loading"><span>请稍候...</span></div> 
<ul class="pic"> 
<li><img src="//file2.kaopuke.com:8081/files_image/201804/1.jpg" thumb="" alt="图片1来源于网络，版权属于作者" text="图片1更详细的描述文字" /></li> 
<li><img src="//file2.kaopuke.com:8081/files_image/201804/2.jpg" thumb="" alt="版权属于作者，图片2来源于网络" text="图片2更详细的描述文字" /></li> 
<li><img src="//file2.kaopuke.com:8081/files_image/201804/3.jpg" thumb="" alt="图片3来源于网络，版权属于作者" text="图片3更详细的描述文字" /></li> 
<li><img src="//file2.kaopuke.com:8081/files_image/201804/4.jpg" thumb="" alt="版权属于作者，图片4来源于网络" text="图片4更详细的描述文字" /></li> 
<li><img src="//file2.kaopuke.com:8081/files_image/201804/5.jpg" thumb="" alt="图片5来源于网络，版权属于作者" text="图片5更详细的描述文字" /></li> 
</ul> 
</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

可随意更改大小的，里面的参数已经详细说明了，喜欢的就拿去吧