欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery实现图片与文字描述左右滑动自动切换的方法_jquery

程序员文章站 2022-04-22 09:41:31
...
本文实例讲述了jQuery实现图片与文字描述左右滑动自动切换的方法。分享给大家供大家参考。具体如下:

这里使用jQuery制作CSS左右图片无缝滚动自动切换的焦点图JS特效。一边飞出一边变淡的效果非常漂亮,带小按钮。

效果图如下:

jQuery实现图片与文字描述左右滑动自动切换的方法_jquery

具体代码如下:




JQUERY图片切换特效带标题和描述纯JS CSS打造 - 
"; $(".focus").append(btn); $(".focus .btn span").mouseenter(function() { index = $(".focus .btn span").index($(this)); play(index); }).eq(0).trigger("mouseenter"); $(".focus").hover(function() { clearInterval(picTimer); },function() { picTimer = setInterval(function() { play(index); index++; if(index == len) {index = 0;} },5000); }).trigger("mouseleave"); function play(index) { var $now = $(".focus ul li.on"); if($now.length > 0) { $now.find("h5").stop(true,true).animate({left:"-" + (width - indent) + "px"},400,function() { $(this).animate({left:"-"+ (2*width) +"px"},400); }); $now.find("a.button").stop(true,true).fadeTo(400,0); var hideDelay = setTimeout(function() { $now.find("p").stop(true,true).animate({left:"-" + (width - indent) + "px"},400,function() { $(this).animate({left:"-"+ (2*width) +"px"},400); $now.find("div.imgBox").stop(true,true).animate({left:"-"+ (2*width) +"px"},400); }); },200); var showDelayA = setTimeout(function() { show(index); },700); } else { show(index); } } function show(index) { var $next = $(".focus ul li").eq(index); $next.find("h5").css({left:"0px"}); $next.find("p").css({left:"0px"}); $next.find("a.button").css({left:"0px"}); $next.find("div.imgBox").css({left:"0px"}); $next.find("h5").stop(true,true).animate({left:"-"+ width +"px"},400); var showDelayB = setTimeout(function() { $next.find("div.imgBox").stop(true,true).animate({left:"-"+ width +"px"},300); $next.find("p").stop(true,true).animate({left:"-"+ width +"px"},300,function() { $next.find("a.button").stop(true,true).animate({left:"-"+ width +"px"},300,function() {$(this).fadeTo(400,1);}); }); },300); $(".focus .btn span").removeClass("on").eq(index).addClass("on"); $(".focus ul li").removeClass("on").eq(index).addClass("on"); } });
  • jQuery实现图片与文字描述左右滑动自动切换的方法_jquery
    很漂亮纯css打造的菜单导航

    今天在浏览一个国外网站时候发现他的网站菜单很美啊 让我情不自禁地想去偷她!渐渐地我就神志不清拿出firebug开始和她交流拉!等我偷玩后我已经爱上这款很漂亮纯css打造的菜单导航,爱微网现在无私地分享给大家!只有一个愿望:大家好好珍惜她吧大家好好珍惜她吧大家好好珍惜她吧...[查看详细]

  • jQuery实现图片与文字描述左右滑动自动切换的方法_jquery
    自己做的jQuery展开收起效果

    今天唯美搭配网刚做的jquery下拉收缩特效,用jquery做的很简单,适合jquery入门者,主要用到jquery的slideToggle(),这个函数本身就是下拉收缩的最佳选择 今天刚做的jquery下拉收缩特效,用jquery做的很简单,适合jquery入门者,主要用到jquery的slideToggle(),这个函数本身就是下拉收缩的... [查看详细]

  • jQuery实现图片与文字描述左右滑动自动切换的方法_jquery
    QQ和淘宝在线客服JS特效

    QQ和淘宝在线客服JS特效左侧悬浮广告代码 美观适合企业 个人商城 淘宝商城 使用 代码很简洁 想添加QQ或淘宝在线客服 只要修改HTML标签 TABLE表格 增加和删除 把里面的参数改成自己账号对应的参数就OK拉 这款QQ在线客服 淘宝在线客服特效 大家也许见过!...[查看详细]