js实现带提示焦点图切换



53 209 70



特效描述:js实现 带提示 焦点图切换,js实现带提示焦点图切换

代码结构

1. 引入CSS

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

2. 引入JS

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

3. HTML代码

<!--演示内容开始-->
<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="http://51qianduan.com/" target="_blank" class="pic"><img src="images/87004755.jpg" alt=""></a>
				<div class="text">
					<span class="djq">第48期</span>
					<h5><a href="http://51qianduan.com/" target="_blank">制造不可能 揭秘电影特效制作</a></h5>
					<p>电影特技作为电影艺术中一个重要的组成部分,为其提供了强大的技术支持,旨在为观众营造出一个独一无二的视觉盛宴。<a href="http://51qianduan.com/" target="_blank">详细</a></p>
				</div>
			</li>
			<li>
				<a href="http://51qianduan.com/" target="_blank" class="pic"><img src="images/86719193.jpg" alt="贝克汉姆 一个娱乐明星的诞生记"></a>
				<div class="text">
					<span class="djq">第47期</span>
					<h5><a href="http://51qianduan.com/" target="_blank">贝克汉姆 一个娱乐明星的诞生记</a></h5>
					<p>从一个普通球员成长为超级巨星,"全民偶像"贝克汉姆的人生历程,除了绿茵场上的辉煌见证,更是一个娱乐明星的诞生记。<a href="http://51qianduan.com/" target="_blank">详细</a></p>
				</div>
			</li>
			<li>
				<a href="http://51qianduan.com/" target="_blank" class="pic"><img src="images/86719199.jpg" alt="明星“合伙人”的残酷与现实"></a>
				<div class="text">
					<span class="djq">第46期</span>
					<h5><a href="http://51qianduan.com/" target="_blank">明星“合伙人”的残酷与现实</a></h5>
					<p>这些为情为义为利而火花四溅的明星合伙人在这个纷繁复杂的娱乐圈上演一幕幕现实与残酷,真诚与美好的剧目。<a href="http://51qianduan.com/" target="_blank">详细</a></p>
				</div>
			</li>
			<li>
				<a href="http://51qianduan.com/" target="_blank" class="pic"><img src="images/85984995.jpg" alt=""></a>
				<div class="text">
					<span class="djq">第45期</span>
					<h5><a href="http://51qianduan.com/" target="_blank">那些导演们的青春印记</a></h5>
					<p>如果说年轻导演试手的片子是自己青春的投射,那么从作品青涩到日臻成熟,从导演踮着脚仰望星空到开山立业建立自己的体系,每个导演都曾是青春片导演。<a href="http://51qianduan.com/" target="_blank">详细</a></p>
				</div>
			</li>
		</ul>
	</div>
	<div id="nextTip"><a href="http://51qianduan.com/">查看更多精彩内容</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> 
<!--演示内容结束-->
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片拖动 图片放大镜 图片叠加 图片翻转旋转 图片延迟加载 图片淡出淡进 图片全屏 图片头像上传 二维码 滚动切换 滑动选项卡切换 图片广告 图片放大缩小 html5图片动画 带缩略图的幻灯片 地图 flash焦点图 图片滚动 图片滑动 图片切换 图片收缩展开 旋转木马 图片轮播 自动滚动图片轮播 图标导航菜单 选项卡切换 滑动手风琴 背景切换 手风琴 切换按钮 form表单 图表 焦点图幻灯片 图片 头像截图 缩略图 带简介的焦点图 图片切换 图片轮播 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

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