jQuery圖片無縫漸變切換代碼



116 462 155



特效描述:jQuery 圖片無縫漸變切換,jQuery圖片無縫漸變切換代碼

代碼結構

1. 引入JS

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

2. HTML代碼

<div class="box">
	<div class="box_img">
		<ul>
			<li><a href="#" style="background: #f90;">1</a></li>
			<li><a href="#" style="background: #f09;">2</a></li>
			<li><a href="#" style="background: #0f9;">3</a></li>
			<li><a href="#" style="background: #90f;">4</a></li>
			<li><a href="#" style="background: #09f;">5</a></li>
			<li><a href="#" style="background: #f90;">6</a></li>
			<li><a href="#" style="background: #f09;">7</a></li>
			<li><a href="#" style="background: #0f9;">8</a></li>
			<li><a href="#" style="background: #90f;">9</a></li>
		</ul>
	</div>
	<div class="box_tab"></div>
</div>
<script type="text/javascript">
	$(document).ready(function(){
		var timejg=3000;//輪播間隔時間
		var size = $('.box_img ul li').size();
		for(var i=1;i<=size;i++){
			$('.box_tab').append('<a href="javascript:(void)">'+i+'</a>')
		}
		$('.box_img ul li').eq(0).show();
		$('.box_tab a').eq(0).addClass('active')
		$('.box_tab a').mouseover(function(){
			$(this).addClass('active').siblings().removeClass('active');
			var index = $(this).index();
			i=index;
			$('.box_img ul li').eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300);
		});
		var i = 0;
		var time = setInterval(move,timejg);
		function move(){
			i++;
			if(i==size){
				i=0;
			}
			$('.box_tab a').eq(i).addClass('active').siblings().removeClass('active');
			$('.box_img ul li').eq(i).fadeIn(300).siblings().fadeOut(300);
		}
		$('.box').hover(function(){
			clearInterval(time);
		},function(){
			time = setInterval(move,timejg);
		});
	});
</script>



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


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 漸隱切換 淡出淡進 淡出 淡進 圖片淡出淡進 圖片淡出 圖片淡進 圖片切換 圖片選項卡 圖標選項卡 手風琴 水平手風琴 垂直手風琴 圖片手風琴 文字手風琴 手風琴插件 漸隱切換
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子