以下是 js带提示焦点图切换轮播滚动特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>js带提示焦点图切换</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.1.4.2-min.js"></script>
</head>
<body>
<!--演示内容开始-->
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* focusDp */
#focusDp{width:620px;height:410px;overflow:hidden;padding:19px 29px 0;position:relative;margin:20px auto;}
#focusMain{width:620px;height:410px;overflow:hidden;position:relative}
#focusMain ul {position:absolute;left:0； top:0}
#focusMain li{width:620px;height:410px;overflow:hidden;float:left;position:relative;}
#focusMain li .pic{display:block;width:100%;height:100%;overflow:hidden;}
#focusMain li .text{
display:block;width:100%;height:80px;position:absolute;bottom:20px;background:rgba(255,255,255,0.8);
filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#80ffffff",endColorstr = "#80ffffff") 8;
}
#focusMain li .djq{position:absolute;left:20px;top:-16px;line-height:16px;padding:0 5px;background:#de1827;color:#fff;}
#focusMain li h5{font-size:21px;line-height:32px;font-weight:normal;padding:2px 0 0 20px;}
#focusMain li h5 a{color:#000;}
#focusMain li p{line-height:21px;padding:0 150px 0 20px;}
#focusMain li p a{display:inline-block;width:36px;height:17px;vertical-align:middle;background:url(images/tip-bg.gif) no-repeat;text-align:center;line-height:17px;text-indent:2px;color:#fff;}
#prevBtn,#nextBtn{width:29px;height:80px;position:absolute;bottom:20px;background:#fff url(images/bg_focus2.png) no-repeat 9px 0;text-indent:-999em;overflow:hidden;}
#prevBtn{left:0;}
#prevBtn:hover{left:0;background-position:9px -80px;}
#nextBtn{right:0;background-position:-38px 0;}
#nextBtn:hover{background-position:-38px -80px;}
#nextTip{width:106px;height:70px;padding:5px 7px 5px 8px;position:absolute;bottom:20px;right:29px;border-left:1px solid #a6c4d6;text-align:center;}
#nextTip img{display:block;width:106px;height:70px;}
#nextTip a{line-height:70px;}
</style>
<div id="focusDp">
<div id="focusMain">
<ul>
<li>
<a href="#" target="_blank" class="pic"><img src="images/87004755.jpg" alt=""></a>
<div class="text">
<span class="djq">第48期</span>
<h5><a href="#" target="_blank">制造不可能 揭秘电影特效制作</a></h5>
<p>电影特技作为电影艺术中一个重要的组成部分，为其提供了强大的技术支持，旨在为观众营造出一个独一无二的视觉盛宴。<a href="#" target="_blank">详细</a></p>
</div>
</li>
<li>
<a href="#" target="_blank" class="pic"><img src="images/86719193.jpg" alt="贝克汉姆 一个娱乐明星的诞生记"></a>
<div class="text">
<span class="djq">第47期</span>
<h5><a href="#" target="_blank">贝克汉姆 一个娱乐明星的诞生记</a></h5>
<p>从一个普通球员成长为超级巨星，"全民偶像"贝克汉姆的人生历程，除了绿茵场上的辉煌见证，更是一个娱乐明星的诞生记。<a href="#" target="_blank">详细</a></p>
</div>
</li>
<li>
<a href="#" target="_blank" class="pic"><img src="images/86719199.jpg" alt="明星“合伙人”的残酷与现实"></a>
<div class="text">
<span class="djq">第46期</span>
<h5><a href="#" target="_blank">明星“合伙人”的残酷与现实</a></h5>
<p>这些为情为义为利而火花四溅的明星合伙人在这个纷繁复杂的娱乐圈上演一幕幕现实与残酷，真诚与美好的剧目。<a href="#" target="_blank">详细</a></p>
</div>
</li>
<li>
<a href="#" target="_blank" class="pic"><img src="images/85984995.jpg" alt=""></a>
<div class="text">
<span class="djq">第45期</span>
<h5><a href="#" target="_blank">那些导演们的青春印记</a></h5>
<p>如果说年轻导演试手的片子是自己青春的投射，那么从作品青涩到日臻成熟，从导演踮着脚仰望星空到开山立业建立自己的体系，每个导演都曾是青春片导演。<a href="#" target="_blank">详细</a></p>
</div>
</li>
</ul>
</div>
<div id="nextTip"><a href="#">查看更多精彩内容</a></div>
<a href="javascript:void(0);" id="prevBtn">上一张</a>
<a href="javascript:void(0);" id="nextBtn">下一张</a>
</div>
<script type="text/javascript">
/***
*name:带提示焦点图
*author:johnnyHan#tencent.com
*date:2013/5
***/
var FocusDp = function(arg){
this.$ = function(s){return document.getElementById(s);};
this.arg = arg;
this.focusBox = this.$(this.arg.focusBox);
this.scrollBox = this.$(this.arg.scrollBox).getElementsByTagName("ul")[0];
this.prevBtn = this.$(this.arg.prevBtn);
this.nextBtn = this.$(this.arg.nextBtn);
this.nextTip = this.$(this.arg.nextTip);
this.moreUrl = this.nextTip.getElementsByTagName("a")[0].getAttribute("href");
this.li = this.$(this.arg.scrollBox).getElementsByTagName("li");
this.liWidth = parseInt(this.getStyle(this.li[0],"width"));
this.num = 0;
this.timer = null;
this.init();
}
FocusDp.prototype = {
getStyle:function(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
}
},
//动画
animate : function(obj,iTarget,o){
clearInterval(this.timer);
var _this = this;
this.timer = setInterval(function(){
var iSpeed = (-iTarget - obj.offsetLeft) / 4;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
if(obj.offsetLeft == iTarget){
clearInterval(_this.timer);
}else{
obj.style.left = obj.offsetLeft + iSpeed +"px";
}
},30);
if(o >= this.li.length -1){
this.num = this.li.length-1;
this.setNextTiptxt();
}else if(o < 0){
this.num = 0;
}else{
this.num = o;
}
},
//事件绑定
bindEvent : function(){
var _this = this;
this.prevBtn.onclick = function(){
if(_this.num == 0){
return ;
}
_this.animate(_this.scrollBox,_this.liWidth*(_this.num-1),_this.num-1);
_this.setNextTipImg();
}
this.nextBtn.onclick = function(){
if(_this.num == _this.li.length-1){
_this.setNextTiptxt();
return ;
}
_this.animate(_this.scrollBox,_this.liWidth*(_this.num+1),_this.num+1);
_this.setNextTipImg();
}
},
setNextTiptxt : function(){
this.nextTip.innerHTML = '<a href="' + this.moreUrl + '" target="_blank">查看更多精彩内容</a>';
},
setNextTipImg : function(){
this.nextTip.innerHTML = '<img src="'+this.li[this.num+1].getElementsByTagName("img")[0].getAttribute("src")+'" />';
},
//初始化
init : function(){
this.setNextTipImg();
this.scrollBox.style.width = this.liWidth * this.li.length + "px";
this.bindEvent();
}
}
new FocusDp({
focusBox : "focusDp", //外围容器id
scrollBox : "focusMain", //图片列表id
nextTip : "nextTip", //小图容器id
prevBtn : "prevBtn", //左按钮
nextBtn : "nextBtn" //右按钮
});
</script>
</body>
</html>CSS代码(style.css):
@charset "utf-8";/* reset */
*{margin:0;padding:0;list-style-type:none;}
a{blr:expression(this.onFocus=this.blur())}
/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
:focus{outline:0;}
label{cursor:pointer;}
img{vertical-align:middle;}
table{empty-cells:show;border-collapse:collapse;border-spacing:0;}
h1{font-size:16px;}
h2,h3,h4{font-size:14px;}
h5,h6{font-size:12px;}
abbr,acronym{border:0;font-variant:normal}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}
a,img{border:0;}
a,a:visited{color:#5e5e5e;text-decoration:none;}
a:hover{color:#4183C4;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}
/* Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}
/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
/* shortcut */
.shortcut{position:fixed;top:0;left:0;z-index:9999;width:100%;}
*html,*html body /* 修正IE6振动bug */
{background-image:url(about:blank);background-attachment:fixed;}
*html .shortcut{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
.shortcut{height:28px;line-height:28px;font-size:12px;background:#EEEEEE;text-transform:uppercase;box-shadow:1px 0px 2px rgba(0,0,0,0.2);border-bottom:1px solid #DDDDDD;}
.shortcut h1{font-size:14px;font-family:"微软雅黑","宋体";}
.shortcut a,.shortcut h1{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}
.shortcut a:hover{background:#fff;}
.shortcut span.right{float:right;}
.shortcut span.right a{float:left;display:block;color:#ff6600;font-weight:800;}
.headeline{height:40px;overflow:hidden;}
.adv960x90{width:960px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:40px auto 0 auto;}
.adv728x90{width:728px;height:90px;overflow:hidden;border:solid 1px #E6E6E6;margin:0 auto;}
分享到QQ
分享到微博
微信扫一扫
