jQuery图片无缝渐变切换代码



111 443 148



特效描述: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

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