jQuery帶按鈕控制圖片輪播疊加切換效果



110 436 146



特效描述:jQuery 帶按鈕控制 圖片輪播 疊加切換效果,jQuery帶按鈕控制圖片輪播疊加切換效果

代碼結構

1. 引入CSS

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

2. 引入JS

<script src="js/jquery.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.transit.js"></script>
<script src="js/bocfe.js"></script>

3. HTML代碼

<div class="m2usCon2">
<div class="container">
<div class="a-part por ovh about-fo">
  <div class="main poa t-f noselect">
    <div class="detail por">
      <div class="btn poa prev dn m2usBtnL"></div>
      <div class="btn poa next m2usBtnR"></div>
      <div class="in por">
        <div class="box poa" style="transform: translate(0px, -96px) scale(0.55, 0.55); opacity: 0.08;">
          <div class="box-in dn">
            <div class="time"></div>
            <p></p>
          </div>
        </div>
        <div class="box poa" style="transform: translate(0px, -64px) scale(0.7, 0.7); opacity: 0.2;">
          <div class="box-in dn">
            <div class="time"></div>
            <p></p>
          </div>
        </div>
        <div class="box poa" style="transform: translate(0px, -32px) scale(0.85, 0.85); opacity: 0.4;">
          <div class="box-in dn">
            <div class="time"></div>
            <p></p>
          </div>
        </div>
        <div class="box poa" style="display: block; opacity: 1; top: 0px;">
          <div class="box-in dn">
            <div class="time"></div>
            <p></p>
          </div>
        </div>
      </div>
    </div>
    <div class="list f-cb por ovh">
      <ul class="por">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</div>
</div>
</div>
<script language="javascript">
$(function(){    
	var Year = new Array(     
         [ 
                ["", "要使整個人生都過得舒適、愉快,這是不可能的,因為人類必須具備一種能應付逆境的態度。——盧梭"]
         ],
		 [ 
                ["", "重復別人所說的話,只需要教育;而要挑戰別人所說的話,則需要頭腦。——瑪麗·佩蒂博恩·普爾"]
         ],
		 [ 
                ["", "人生就是學校。在那里,與其說好的教師是幸福,不如說好的教師是不幸。——海貝爾"]
         ],
		 [ 
                ["", "對一個人來說,所期望的不是別的,而僅僅是他能全力以赴和獻身于一種美好事業。——愛因斯坦"]
         ],
		 [ 
                ["", "心如鏡,雖外景不斷變化,鏡面卻不會轉動,這就是一顆平常心,能夠景轉而心不轉。"]
         ],
		 [ 
                ["", "一份耕耘,一份收獲,付出就有回報永不遭遇過失敗,因我所碰到的都是暫時的挫折。"]
         ]
    )
	_PreLoadImg([
        "images/m2yy_btn.png" 
	],function(){
		// 初始化
		$(".a-part").each(function(){
			$(this).height(420)
			FullBg($(this), $(this).find("img.bg"))
		})
		// ABOUT PART FOURTH
		$(".about-fo .main").css("top", ($(window).height() - 572) / 2 )
		$(".about-fo .box").each(function(){
			$(this).find(".box-in").css("padding-top", 138 - $(this).find(".box-in").height() / 2 )
		})
		var $In    = $(".about-fo .detail .in"),
			InBl   = true,
			a      = 0,
			b      = 0,
			$FoUl  = $(".about-fo .list ul"),
			$FoLi  = $(".about-fo .list li")
		$FoUl.width($FoLi.width() * $FoLi.length)
		$FoLi.eq(0).addClass("cur")
		var cura  = $(".about-fo .list li.cur").index()
		$(".about-fo .box:last .box-in .time").html(Year[cura][0][0]).siblings().html(Year[cura][0][1])
		$(".about-fo .box:last .box-in").show().css("padding-top", 138 - $(".about-fo .box:last .box-in").height() / 2 )
		$(".about-fo .next").click(function(){
			$(".about-fo .prev").stop().fadeIn(500);
			if(!InBl){
				return
			}
			InBl = false;
			if(a == Year.length){
				InBl = true
				b = Year[a - 1].length
				return
			}
			b ++ ;
			if(b == Year[a].length){
				b = 0
				a ++
				if(a > 4 && a < Year.length){
					$FoUl.stop().animate({marginLeft: - 166 * (a - 4)}, 500)
				}
				$FoLi.eq(a).addClass("cur").siblings().removeClass("cur")
			}
			if(a == Year.length - 1 && b == Year[a].length - 1){
				$(this).stop().fadeOut(500);
			}
			if(a == Year.length){
				InBl = true
				return
			}
			var $list = '<div class="box poa dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
			$In.find(".box").eq(0).before($list)
			$In.find(".box").eq(0).css({
				y : -96,
				scale : 0.55,
				opacity : 0.08
			})
			$In.find(".box").eq(4).stop().animate({
				top : 26,
				opacity : 0
			}, 500).prev().stop().transition({
				y : 0,
				scale : 1,
				opacity : 1
			}, 500).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
			$In.find(".box").eq(3).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(3).find(".box-in").height() / 2)
			$In.find(".box").eq(2).stop().transition({
				y : -32,
				scale : 0.85,
				opacity : 0.4
			}, 500).prev().stop().transition({
				y : -64,
				scale : 0.7,
				opacity : 0.2
			}, 500).prev().stop().fadeIn(500, function(){
				$In.find(".box").eq(4).remove()
				InBl = true
			})
		})
		$(".about-fo .prev").click(function(){
			$(".about-fo .next").stop().fadeIn(500);
			if(!InBl){
				return
			}
			InBl = false;
			if(a == 0 && b == 0){
				InBl = true;
				return
			}
			if(a == Year.length){
				a -- 
				b --
			}
			b --
			if(a == 0 && b == 0){
				$(this).stop().fadeOut(500);
			} 
			if(b == - 1 ){
				if(a > 0){
					a --
					if(a >= 4){
						$FoUl.stop().animate({marginLeft: - 166 * (a - 4)}, 500)
					}
					$FoLi.eq(a).addClass("cur").siblings().removeClass("cur")
				}
				b = Year[a].length - 1
			}		
			var $list = '<div class="box poa fif dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
			$In.find(".box:last").after($list)
			$In.find(".box").eq(0).stop().fadeOut(500).next().stop().transition({
				y : - 96,
				scale : 0.55,
				opacity : 0.08
			}, 500).next().stop().transition({
				y : -64,
				scale : 0.7,
				opacity : 0.2
			}, 500).next().stop().transition({
				y : -32,
				scale : 0.85,
				opacity : 0.4
			}, 500).next().stop().fadeIn(600).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
			$In.find(".box").eq(4).stop().animate({
				top : 0,
				opacity : 1
			}, 500, function(){
				$In.find(".box:first").remove()
				$In.find(".box").eq(3).siblings().find(".box-in").hide().find(".time").html("").siblings().html("")
				InBl = true
			}).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(4).find(".box-in").height() / 2)
		})
		$FoLi.click(function(){
			if(!InBl){
				return
			}
			InBl = false;
			var n = $(".about-fo .list li.cur").index()
			$(this).addClass("cur").siblings().removeClass("cur")
			a = $(this).index(),
			b = 0
			if($(this).index() < 5){
				$FoUl.stop().animate({marginLeft: 0}, 500)
			}
			if($(this).index() != 0){
				$(".about-fo .prev").stop().fadeIn(500);
			}else{
				$(".about-fo .prev").stop().fadeOut(500);
			}
			if($(this).index() > n){
				var $list = '<div class="box poa dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
				$In.find(".box").eq(0).before($list)
				$In.find(".box").eq(0).css({
					y : -96,
					scale : 0.55,
					opacity : 0.08
				})
				$In.find(".box").eq(4).stop().animate({
					top : 26,
					opacity : 1
				}, 500).prev().stop().transition({
					y : 0,
					scale : 1,
					opacity : 1
				}, 500).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
				$In.find(".box").eq(3).find(".box-in").css("padding-top", 88 - $In.find(".box").eq(3).find(".box-in").height() / 2)
				$In.find(".box").eq(2).stop().transition({
					y : -32,
					scale : 0.85,
					opacity : 0.4
				}, 500).prev().stop().transition({
					y : -64,
					scale : 0.7,
					opacity : 0.2
				}, 500).prev().stop().fadeIn(500, function(){
					$In.find(".box").eq(4).remove()
					InBl = true
				})
			}else{
				var $list = '<div class="box poa fif dn"><div class="box-in dn"><div class="time"></div><p></p></div></div>'
				$In.find(".box:last").after($list)
				$In.find(".box").eq(0).stop().fadeOut(500).next().stop().transition({
					y : - 96,
					scale : 0.55,
					opacity : 0.08
				}, 500).next().stop().transition({
					y : -64,
					scale : 0.7,
					opacity : 0.2
				}, 500).next().stop().transition({
					y : -32,
					scale : 0.85,
					opacity : 0.4
				}, 500).next().stop().fadeIn(600).find(".box-in").stop().fadeIn(600).find(".time").html(Year[a][b][0]).siblings().html(Year[a][b][1])
				$In.find(".box").eq(4).stop().animate({
					top : 0,
					opacity : 1
				}, 500, function(){
					$In.find(".box:first").remove()
					$In.find(".box").eq(3).siblings().find(".box-in").hide().find(".time").html("").siblings().html("")
					InBl = true
				}).find(".box-in").css("padding-top", 138 - $In.find(".box").eq(4).find(".box-in").height() / 2)
			}
		})
        function aboutNews(n){
			if(!NewsBl){
				return
			}
			NewsBl = false
			$(".about-fif .btn span").eq(n).addClass("cur").siblings().removeClass("cur");
			var $UlMark = $(".about-fif ul.mark")
			$UlMark.stop().animate({
				left : - 1182,
				opacity : 0
			}, 500, function(){
				$UlMark.css("left", -17).find("li").css({
					left : 360,
					opacity : 0
				})
				$(".about-fif ul").eq(n).css({
					opacity : 1,
					"z-index" : 2
				}).addClass("mark").siblings().removeClass("mark").css({
					opacity : 0,
					"z-index" : 1
				})
				Enter($(".about-fif ul").eq(n).find("li").eq(0), "left", 0, 3, 500, 350)
				setTimeout(function(){
					NewsBl = true
				}, 1200)
			})
		}
		aboutNews(1);
	})	
})
</script>
</div>



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


熱門標簽: flash焦點圖 flash幻燈片 flashbanner flash圖片輪播 滑動選項卡 滑動切換 滾動切換 滾動條切換 疊加浮動層 滑動手風琴 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 層疊疊加 疊加層疊 層疊 疊加 加載更多 切換按鈕 表單 表單美化 表單插件 表單美化插件 焦點圖 幻燈片 輪播圖 bar焦點圖 圖片疊加 圖片層疊 圖片切換 圖片選項卡 圖標選項卡 純圖片輪播 圖片輪播 選項卡自動切換 按鈕控制
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子