js焦點圖切換按鈕控制大小圖片滑動



136 543 182



特效描述:js焦點圖 切換按鈕 大小圖片滑動,js焦點圖切換制作左右按鈕控制大小圖片滾動切換,點擊小縮略圖滾動切換大圖,支持循環圖片滾動切換的焦點圖。

代碼結構

1. HTML代碼

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
/*焦點圖*/
.mod18{width:680px;height:406px;margin:20px auto;position:relative;background:#f7f7f7;}
.mod18 .btn{position:absolute;width:15px;height:70px;top:336px;cursor:pointer;z-index:99;font-size:50px;font-weight:bold;}
.mod18 .prev{left:0;background:url(images/prevBtn.png) no-repeat;}
.mod18 #prevTop,.mod18 #nextTop{top:213px;width:46px;height:48px;}
.mod18 #prevTop{background:url(images/prevBtnTop.png) 0 0 no-repeat;}
.mod18 #nextTop{background:url(images/nextBtnTop.png) 0 0 no-repeat;}
.mod18 .next{right:0;background:url(images/nextBtn.png) no-repeat;}
.mod18 li{float:left;}
.mod18 .cf li{position:relative;color:#fff;}
.mod18 .cf a{display:block;width:680px;height:330px;position:absolute;color:#fff;}
.mod18 .cf li span{display:block;width:640px;position:absolute;left:0;bottom:0;padding:10px 20px;line-height:22px;text-align:left;background:rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#60000000",endColorstr = "#60000000");}
.mod18 .picBox{height:330px;position:relative;overflow:hidden;}
.mod18 .picBox ul{height:330px;position:absolute;}
.mod18 .picBox li{width:680px;height:330px;}
.mod18 .listBox{width:642px;height:100px;margin:0 auto;position:relative;padding:6px 0 10px;overflow:hidden;}
.mod18 .listBox ul{height:100px;position:absolute;}
.mod18 .listBox li{width:129px;height:70px;cursor:pointer;position:relative;}
.mod18 .listBox li i{display:none;}
.mod18 .listBox li a{display:block;width:124px;height:70px;}
.mod18 .listBox li img{width:124px;height:70px;}
.mod18 .listBox .on img{width:118px;height:64px;border:3px solid #ff6600;}
.mod18 .listBox .on i{display:block;}
</style>
<div class="mod18">
	<span id="prev" class="btn prev"></span>
	<span id="next" class="btn next"></span>
	<span id="prevTop" class="btn prev"></span>
	<span id="nextTop" class="btn next"></span>
	<div id="picBox" class="picBox">
		<ul class="cf">
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="680" height="380" src="images/83293306.jpg" alt="" /></a>
				<span>探班橫店某劇組,陸毅在劇中最重的戲服有20斤,一下戲他就飛快地脫去戲服,躲到休息室涼快去。</span>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank" ><img width="680" height="380" src="images/83293260.jpg" alt="" /></a>
				<span> 《宮3》劇組片場,演員王琳正對著小鏡子練習微笑。在片場,許多演員都有自己的秘密裝備。</span>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="680" height="380" src="images/83293278.jpg" alt="" /></a>
				<span>雖然還是春天,橫店下午的氣溫也有15-16度,在室外穿著厚衣服拍戲對王琳來說有點遭罪。</span>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="680" height="380" src="images/83293291.jpg" alt="" /></a>
				<span>同樣遭罪的還有演員寇振海,戲服太厚天太熱,他的脖子上捂出了痱子。</span>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="680" height="380" src="images/83293300.jpg" alt="" /></a>
				<span>出汗多,一些小妝容需要隨時修飾,一位女助理在幫寇振海現場粘胡子。</span>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="680" height="380" src="images/83293339.jpg" alt="" /></a>
				<span>同樣是反季節拍古裝戲,夏戲冬拍就好辦一些,幾片暖寶寶就可以解決問題。</span>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="680" height="380" src="images/83293353.jpg" alt="" /></a>
				<span>林志穎的一場室內戲,燈光可以模仿太陽的效果,解決時差問題。</span>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="680" height="380" src="images/83293410.jpg" alt="" /></a>
				<span>夜戲白天拍,則需要在場景外圍起一塊完全遮光的黑布。</span>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="680" height="380" src="images/83293412.jpg" alt="" /></a>
				<span>為了拍出“摔飛出去”的效果,需要準備厚墊子,做好安全措施。</span>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="680" height="380" src="images/83293418.jpg" alt="" /></a>
				<span>拍戲禁忌頗多,喪事戲份通常不受演員們的歡迎。</span>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="680" height="380" src="images/83293442.jpg" alt="" /></a>
				<span>劇組通常都會為出演死人戲等喪事戲份的演員準備紅包,以作去災壓驚之用。(資料圖)</span>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="680" height="380" src="images/83293447.jpg" alt="" /></a>
				<span>在許多片場的旅館,房間門上都貼有佛教用品。</span>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="680" height="380" src="images/83293458.jpg" alt="" /></a>
				<span>而在片場,能看到的大部分布景都不是真的,比如拍戲用的假花。</span>
			</li>
			<li>
				<a href="http://www.dijiuzhanzhang.com/" target="_blank"><img width="680" height="380" src="images/83293493.jpg" alt="" /></a>
				<span>經常在電視上看到柱子上鎏金雕刻的裝飾,則是臨時安裝上去的。</span>
			</li>
		</ul>
	</div>
	<div id="listBox" class="listBox">
		<ul class="cf">
			<li class="on"><i class="arr2"></i><img width="118" height="64" src="images/83293792.jpg" alt="陸毅脫掉戲服" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/83293780.jpg" alt="對鏡練習微笑" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/83293781.jpg" alt="冬戲夏拍" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/83293782.jpg" alt="寇振海熱出痱子" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/83293783.jpg" alt="現場粘胡子" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/83293793.jpg" alt="貼暖寶寶" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/83293794.jpg" alt="燈光模仿太陽" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/83293795.jpg" alt="夜戲白天拍" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/83293809.jpg" alt="假摔" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/83293810.jpg" alt="喪事戲布景" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/83293811.jpg" alt="喪事戲" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/83293812.jpg" alt="門上貼佛教用品" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/83293831.jpg" alt="假花" /></li>
			<li><i class="arr2"></i><img width="118" height="64" src="images/83293832.jpg" alt="假裝飾" /></li>
		</ul>
	</div>
</div>
<script type="text/javascript">
(function(){
	function G(s){
		return document.getElementById(s);
	}
	function getStyle(obj, attr){
		if(obj.currentStyle){
			return obj.currentStyle[attr];
		}else{
			return getComputedStyle(obj, false)[attr];
		}
	}
	function Animate(obj, json){
		if(obj.timer){
			clearInterval(obj.timer);
		}
		obj.timer = setInterval(function(){
			for(var attr in json){
				var iCur = parseInt(getStyle(obj, attr));
				iCur = iCur ? iCur : 0;
				var iSpeed = (json[attr] - iCur) / 5;
				iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
				obj.style[attr] = iCur + iSpeed + 'px';
				if(iCur == json[attr]){
					clearInterval(obj.timer);
				}
			}
		}, 30);
	}
	var oPic = G("picBox");
	var oList = G("listBox");
	var oPrev = G("prev");
	var oNext = G("next");
	var oPrevTop = G("prevTop");
	var oNextTop = G("nextTop");
	var oPicLi = oPic.getElementsByTagName("li");
	var oListLi = oList.getElementsByTagName("li");
	var len1 = oPicLi.length;
	var len2 = oListLi.length;
	var oPicUl = oPic.getElementsByTagName("ul")[0];
	var oListUl = oList.getElementsByTagName("ul")[0];
	var w1 = oPicLi[0].offsetWidth;
	var w2 = oListLi[0].offsetWidth;
	oPicUl.style.width = w1 * len1 + "px";
	oListUl.style.width = w2 * len2 + "px";
	var index = 0;
	var num = 5;
	var num2 = Math.ceil(num / 2);
	function Change(){
		Animate(oPicUl, {left: - index * w1});
		if(index < num2){
			Animate(oListUl, {left: 0});
		}else if(index + num2 <= len2){
			Animate(oListUl, {left: - (index - num2 + 1) * w2});
		}else{
			Animate(oListUl, {left: - (len2 - num) * w2});
		}
		for (var i = 0; i < len2; i++) {
			oListLi[i].className = "";
			if(i == index){
				oListLi[i].className = "on";
			}
		}
	}
	oNextTop.onclick = oNext.onclick = function(){
		index ++;
		index = index == len2 ? 0 : index;
		Change();
	}
	oPrevTop.onclick = oPrev.onclick = function(){
		index --;
		index = index == -1 ? len2 -1 : index;
		Change();
	}
	for (var i = 0; i < len2; i++) {
		oListLi[i].index = i;
		oListLi[i].onclick = function(){
			index = this.index;
			Change();
		}
	}
})()
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滑動 滑塊 滑動門 觸屏滑動 滑動插件 滑塊插件 滾動切換 滾動條切換 滑動選項卡 滑動切換 flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 帶標題的焦點圖 帶縮略圖的幻燈片 圖片滑動 圖片滑塊 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子