<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手机腾讯图片切换焦点图</title>
<script type="text/javascript" src="jquery1.42.min.js"></script>
<script type="text/javascript" src="jquery.SuperSlide.2.1.1.js"></script>
</head>
<body>
<style type="text/css">
/* css 重置 */
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px 宋体; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
a:hover{ color:#1974A1; }
.js{width:90%; margin:10px auto 0 auto; }
.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }
.js p span{ float:right; }
.js p span a{ color:#f00; text-decoration:underline; }
.js textarea{ height:100px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }javascript
/* 本例子css */
.focusBox { position: relative; width:960px; height:450px; overflow: hidden; }
.focusBox .pic{ position:relative; z-index:0; }
.focusBox .pic img { width:960px; height:450px; display: block; }
.focusBox .hd { width:100%; position: absolute; bottom: 10px; text-align: center; font-size:0; z-index:1; }
.focusBox .hd li{margin: 0 5px; background: url(images/dot.png) no-repeat 0 -16px; height: 16px; overflow: hidden; width: 16px; cursor: pointer;
display:inline-block; *display:inline; zoom:1; _background: url(images/dot8.png) no-repeat 0 -16px;
}
.focusBox .hd .on{ background-position:0 0; }css
.focusBox .prev,
.focusBox .next { width: 60px; height: 90px; margin: -60px 0 0; display: none; background: url(images/ad_ctr.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; filter:alpha(opacity=20);opacity:0.2; }
.focusBox .prev { left: 0; }
.focusBox .next { background-position: 0 -90px; right: 0; }
.focusBox .prev:hover,
.focusBox .next:hover { filter:alpha(opacity=50) !important;opacity:0.5 !important; }html
</style>java
<div class="focusBox" style="margin:0 auto">
<ul class="pic">
<li><a href="#" target="_blank"><img src="images/1.jpg"/></a></li>
<li><a href="#" target="_blank"><img src="images/2.jpg"/></a></li>
<li><a href="#" target="_blank"><img src="images/3.jpg"/></a></li>
<li><a href="#" target="_blank"><img src="images/4.jpg"/></a></li>
<li><a href="#" target="_blank"><img src="images/5.jpg"/></a></li>
</ul>
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
<ul class="hd">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
/*鼠标移过，左右按钮显示*/
jQuery(".focusBox").hover(function(){ jQuery(this).find(".prev,.next").stop(true,true).fadeTo("show",0.2) },function(){ jQuery(this).find(".prev,.next").fadeOut() });
/*SuperSlide图片切换*/
jQuery(".focusBox").slide({ mainCell:".pic",effect:"fold", autoPlay:true, delayTime:600, trigger:"click"});
</script>
<div class="js">
<p><span>效果参考网址：<a target="_blank" href="http://3gqq.qq.com/">http://3gqq.qq.com/</a></span>js调用：少许js+单个SuperSlide</p>
<textarea>
/*鼠标移过，左右按钮显示*/
jQuery(".focusBox").hover(function(){ jQuery(this).find(".prev,.next").stop(true,true).fadeTo("show",0.2) },function(){ jQuery(this).find(".prev,.next").fadeOut() });
/*SuperSlide图片切换*/
jQuery(".focusBox").slide({ mainCell:".pic",effect:"fold", autoPlay:true, delayTime:600, trigger:"click"});
</textarea>
</div>
</body>
</html>jquery