• 微信号:Zh-y9213
您当前的位置:爱资源分享网 > > 网站源码 > 网页特效

jQuery无缝图片渐变切换特效

栏目:网页特效时间:2021-08-08 15:31阅读数:78人阅读
jQuery无缝图片渐变切换特效是一款鼠标经过索引按钮渐变切换图片特效代码。


js代码

<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>


在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载

本站所有文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱:737597453@qq.com