经验分享程序开发文档资料数据资源其它资源

jQuery图片左右滚动效果代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片左右滚动效果代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery图片左右滚动效果代码

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片左右滚动效果代码</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- slide -->
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide2.js"></script>

</head>
<body>

<div class="friend">
    <div class="mr_frbox">
        <img class="mr_frBtnL prev" src="images/mfrl.gif" />
        <div class="mr_frUl">
            <ul id="mr_fu">
                <li><a href="#">
                    <img src="images/i.jpg" />
                </a>
                    <div class="mr_zhe">
                        <div class="mr_zhe_i">
                            <h1>
                                I</h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                        <div class="mr_zhe_hover">
                            <h1>
                                <img src="images/plus.gif"></h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="#">
                    <img src="images/i2.jpg" />
                </a>
                    <div class="mr_zhe">
                        <div class="mr_zhe_i">
                            <h1>
                                E</h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                        <div class="mr_zhe_hover">
                            <h1>
                                <img src="images/plus.gif"></h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="#">
                    <img src="images/i3.jpg" />
                </a>
                    <div class="mr_zhe">
                        <div class="mr_zhe_i">
                            <h1>
                                S</h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                        <div class="mr_zhe_hover">
                            <h1>
                                <img src="images/plus.gif"></h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="#">
                    <img src="images/i4.jpg" />
                </a>
                    <div class="mr_zhe">
                        <div class="mr_zhe_i">
                            <h1>
                                A</h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                        <div class="mr_zhe_hover">
                            <h1>
                                <img src="images/plus.gif"></h1>
                            <div class="mr_zhe_p">
                                <h3>
                                    <span>家居软装设计概念</span>Introduction soft home design</h3>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <img class="mr_frBtnR next" src="images/mfrr.gif" />
    </div>
</div>

<script type="text/javascript">
$(document).ready(function () {
	
	/* 图片滚动效果 */
	$(".mr_frbox").slide({
		titCell: "",
		mainCell: ".mr_frUl ul",
		autoPage: true,
		effect: "leftLoop",
		autoPlay: true,
		vis: 4
	});
	
	/* 鼠标悬停图片效果 */
	$(".mr_zhe_hover").css("top", $('.mr_zhe').eq(0).height());
	$("li").mouseout(function (e) {
		if ((e.pageX < $(this).offset().left || e.pageX > ($(this).offset().left + $(this).width())) || (e.pageY < $(this).offset().top || e.pageY > ($(this).offset().top + $(this).height()))) {
			$(this).find('.mr_zhe_i').show();
			$(this).find('.mr_zhe_hover').hide().stop().animate({ top: '190px' }, { queue: false, duration: 190 });
			return false;
		}

	});
	$('.mr_zhe').mouseover(function (event) {
		$(this).find('.mr_zhe_i').hide();
		$(this).find('.mr_zhe_hover').show().stop().animate({ top: '190px' }, { queue: false, duration: 190 });
		return false;
	});
	
});
</script>
</body>
</html>

JS代码(jquery.SuperSlide2.js):

/*! * SuperSlide v2.0 * 轻松解决网站大部分特效展示问题 * 详尽信息请看官网：http://www.SuperSlide2.com/ * * Copyright 2011-2013,大话主席 * * 请尊重原创，保留头部版权 * 在保留版权的前提下可应用于个人或商业用途 */
(function(a){
	a.fn.slide=function(b){
	return a.fn.slide.defaults={
	effect:"fade",autoPlay:!1,delayTime:500,interTime:4000,triggerTime:150,defaultIndex:0,titCell:".hd li",mainCell:".bd",targetCell:null,trigger:"mouseover",scroll:1,vis:1,titOnClassName:"on",autoPage:!1,prevCell:".prev",nextCell:".next",pageStateCell:".pageState",opp:!1,pnLoop:!0,easing:"linear",startFun:null,endFun:null,switchLoad:null}
,this.each(function(){
	var c=a.extend({
}
,a.fn.slide.defaults,b),d=c.effect,e=a(c.prevCell,a(this)),f=a(c.nextCell,a(this)),g=a(c.pageStateCell,a(this)),h=a(c.titCell,a(this)),i=h.size(),j=a(c.mainCell,a(this)),k=j.children().size(),l=c.switchLoad;
	if(null!=c.targetCell)var m=a(c.targetCell,a(this));
	var n=parseInt(c.defaultIndex),o=parseInt(c.delayTime),p=parseInt(c.interTime);
	parseInt(c.triggerTime);
	var r=parseInt(c.scroll),s=parseInt(c.vis),t="false"==c.autoPlay||0==c.autoPlay?!1:!0,u="false"==c.opp||0==c.opp?!1:!0,v="false"==c.autoPage||0==c.autoPage?!1:!0,w="false"==c.pnLoop||0==c.pnLoop?!1:!0,x=0,y=0,z=0,A=0,B=c.easing,C=null,D=n;
	if(0==i&&(i=k),v){
	var E=k-s;
	i=1+parseInt(0!=E%r?E/r+1:E/r),0>=i&&(i=1),h.html("");
	for(var F=0;
	i>F;
	F++)h.append("<li>"+(F+1)+"</li>");
	var h=a("li",h)}
if(j.children().each(function(){
	a(this).width()>z&&(z=a(this).width(),y=a(this).outerWidth(!0)),a(this).height()>A&&(A=a(this).height(),x=a(this).outerHeight(!0))}
),k>=s)switch(d){
	case"fold":j.css({
	position:"relative",width:y,height:x}
).children().css({
	position:"absolute",width:z,left:0,top:0,display:"none"}
);
	break;
	case"top":j.wrap('<div class="tempWrap" style="overflow:hidden;
	position:relative;
	height:'+s*x+'px"></div>').css({
	position:"relative",padding:"0",margin:"0"}
).children().css({
	height:A}
);
	break;
	case"left":j.wrap('<div class="tempWrap" style="overflow:hidden;
	position:relative;
	width:'+s*y+'px"></div>').css({
	width:k*y,position:"relative",overflow:"hidden",padding:"0",margin:"0"}
).children().css({
	"float":"left",width:z}
);
	break;
	case"leftLoop":case"leftMarquee":j.children().clone().appendTo(j).clone().prependTo(j),j.wrap('<div class="tempWrap" style="overflow:hidden;
	position:relative;
	width:'+s*y+'px"></div>').css({
	width:3*k*y,position:"relative",overflow:"hidden",padding:"0",margin:"0",left:-k*y}
).children().css({
	"float":"left",width:z}
);
	break;
	case"topLoop":case"topMarquee":j.children().clone().appendTo(j).clone().prependTo(j),j.wrap('<div class="tempWrap" style="overflow:hidden;
	position:relative;
	height:'+s*x+'px"></div>').css({
	height:3*k*x,position:"relative",padding:"0",margin:"0",top:-k*x}
).children().css({
	height:A}
)}
var G=function(){
	a.isFunction(c.startFun)&&c.startFun(n,i)}
,H=function(){
	a.isFunction(c.endFun)&&c.endFun(n,i)}
,I=function(b){
	b.eq(n).find("img").each(function(){
	a(this).attr(l)!==void 0&&a(this).attr("src",a(this).attr(l)).removeAttr(l)}
)}
,J=function(a){
	if(D!=n||a||"leftMarquee"==d||"topMarquee"==d){
	switch(d){
	case"fade":case"fold":case"top":case"left":n>=i?n=0:0>n&&(n=i-1);
	break;
	case"leftMarquee":case"topMarquee":n>=1?n=1:0>=n&&(n=0);
	break;
	case"leftLoop":case"topLoop":var b=n-D;
	i>2&&b==-(i-1)&&(b=1),i>2&&b==i-1&&(b=-1);
	var p=Math.abs(b*r);
	n>=i?n=0:0>n&&(n=i-1)}
if(G(),null!=l&&I(j.children()),m&&(null!=l&&I(m),m.hide().eq(n).animate({
	opacity:"show"}
,o,function(){
	j[0]||H()}
)),k>=s)switch(d){
	case"fade":j.children().stop(!0,!0).eq(n).animate({
	opacity:"show"}
,o,B,function(){
	H()}
).siblings().hide();
	break;
	case"fold":j.children().stop(!0,!0).eq(n).animate({
	opacity:"show"}
,o,B,function(){
	H()}
).siblings().animate({
	opacity:"hide"}
,o,B);
	break;
	case"top":j.stop(!0,!1).animate({
	top:-n*r*x}
,o,B,function(){
	H()}
);
	break;
	case"left":j.stop(!0,!1).animate({
	left:-n*r*y}
,o,B,function(){
	H()}
);
	break;
	case"leftLoop":0>b?j.stop(!0,!0).animate({
	left:-(k-p)*y}
,o,B,function(){
	for(var a=0;
	p>a;
	a++)j.children().last().prependTo(j);
	j.css("left",-k*y),H()}
):j.stop(!0,!0).animate({
	left:-(k+p)*y}
,o,B,function(){
	for(var a=0;
	p>a;
	a++)j.children().first().appendTo(j);
	j.css("left",-k*y),H()}
);
	break;
	case"topLoop":0>b?j.stop(!0,!0).animate({
	top:-(k-p)*x}
,o,B,function(){
	for(var a=0;
	p>a;
	a++)j.children().last().prependTo(j);
	j.css("top",-k*x),H()}
):j.stop(!0,!0).animate({
	top:-(k+p)*x}
,o,B,function(){
	for(var a=0;
	p>a;
	a++)j.children().first().appendTo(j);
	j.css("top",-k*x),H()}
);
	break;
	case"leftMarquee":var q=j.css("left").replace("px","");
	0==n?j.animate({
	left:++q}
,0,function(){
	if(j.css("left").replace("px","")>=0){
	for(var a=0;
	k>a;
	a++)j.children().last().prependTo(j);
	j.css("left",-k*y)}
}
):j.animate({
	left:--q}
,0,function(){
	if(2*-k*y>=j.css("left").replace("px","")){
	for(var a=0;
	k>a;
	a++)j.children().first().appendTo(j);
	j.css("left",-k*y)}
}
);
	break;
	case"topMarquee":var t=j.css("top").replace("px","");
	0==n?j.animate({
	top:++t}
,0,function(){
	if(j.css("top").replace("px","")>=0){
	for(var a=0;
	k>a;
	a++)j.children().last().prependTo(j);
	j.css("top",-k*x)}
}
):j.animate({
	top:--t}
,0,function(){
	if(2*-k*x>=j.css("top").replace("px","")){
	for(var a=0;
	k>a;
	a++)j.children().first().appendTo(j);
	j.css("top",-k*x)}
}
)}
h.removeClass(c.titOnClassName).eq(n).addClass(c.titOnClassName),D=n,0==w&&(f.removeClass("nextStop"),e.removeClass("prevStop"),0==n?e.addClass("prevStop"):n==i-1&&f.addClass("nextStop")),g.html("<span>"+(n+1)+"</span>/"+i)}
}
;
	J(!0),t&&("leftMarquee"==d||"topMarquee"==d?(u?n--:n++,C=setInterval(J,p),j.hover(function(){
	t&&clearInterval(C)}
,function(){
	t&&(clearInterval(C),C=setInterval(J,p))}
)):(C=setInterval(function(){
	u?n--:n++,J()}
,p),a(this).hover(function(){
	t&&clearInterval(C)}
,function(){
	t&&(clearInterval(C),C=setInterval(function(){
	u?n--:n++,J()}
,p))}
)));
	var K;
	"mouseover"==c.trigger?h.hover(function(){
	n=h.index(this),K=window.setTimeout(J,c.triggerTime)}
,function(){
	clearTimeout(K)}
):h.click(function(){
	n=h.index(this),J()}
),f.click(function(){
	(1==w||n!=i-1)&&(n++,J())}
),e.click(function(){
	(1==w||0!=n)&&(n--,J())}
)}
)}
}
)(jQuery),jQuery.easing.jswing=jQuery.easing.swing,jQuery.extend(jQuery.easing,{
	def:"easeOutQuad",swing:function(a,b,c,d,e){
	return jQuery.easing[jQuery.easing.def](a,b,c,d,e)}
,easeInQuad:function(a,b,c,d,e){
	return d*(b/=e)*b+c}
,easeOutQuad:function(a,b,c,d,e){
	return-d*(b/=e)*(b-2)+c}
,easeInOutQuad:function(a,b,c,d,e){
	return 1>(b/=e/2)?d/2*b*b+c:-d/2*(--b*(b-2)-1)+c}
,easeInCubic:function(a,b,c,d,e){
	return d*(b/=e)*b*b+c}
,easeOutCubic:function(a,b,c,d,e){
	return d*((b=b/e-1)*b*b+1)+c}
,easeInOutCubic:function(a,b,c,d,e){
	return 1>(b/=e/2)?d/2*b*b*b+c:d/2*((b-=2)*b*b+2)+c}
,easeInQuart:function(a,b,c,d,e){
	return d*(b/=e)*b*b*b+c}
,easeOutQuart:function(a,b,c,d,e){
	return-d*((b=b/e-1)*b*b*b-1)+c}
,easeInOutQuart:function(a,b,c,d,e){
	return 1>(b/=e/2)?d/2*b*b*b*b+c:-d/2*((b-=2)*b*b*b-2)+c}
,easeInQuint:function(a,b,c,d,e){
	return d*(b/=e)*b*b*b*b+c}
,easeOutQuint:function(a,b,c,d,e){
	return d*((b=b/e-1)*b*b*b*b+1)+c}
,easeInOutQuint:function(a,b,c,d,e){
	return 1>(b/=e/2)?d/2*b*b*b*b*b+c:d/2*((b-=2)*b*b*b*b+2)+c}
,easeInSine:function(a,b,c,d,e){
	return-d*Math.cos(b/e*(Math.PI/2))+d+c}
,easeOutSine:function(a,b,c,d,e){
	return d*Math.sin(b/e*(Math.PI/2))+c}
,easeInOutSine:function(a,b,c,d,e){
	return-d/2*(Math.cos(Math.PI*b/e)-1)+c}
,easeInExpo:function(a,b,c,d,e){
	return 0==b?c:d*Math.pow(2,10*(b/e-1))+c}
,easeOutExpo:function(a,b,c,d,e){
	return b==e?c+d:d*(-Math.pow(2,-10*b/e)+1)+c}
,easeInOutExpo:function(a,b,c,d,e){
	return 0==b?c:b==e?c+d:1>(b/=e/2)?d/2*Math.pow(2,10*(b-1))+c:d/2*(-Math.pow(2,-10*--b)+2)+c}
,easeInCirc:function(a,b,c,d,e){
	return-d*(Math.sqrt(1-(b/=e)*b)-1)+c}
,easeOutCirc:function(a,b,c,d,e){
	return d*Math.sqrt(1-(b=b/e-1)*b)+c}
,easeInOutCirc:function(a,b,c,d,e){
	return 1>(b/=e/2)?-d/2*(Math.sqrt(1-b*b)-1)+c:d/2*(Math.sqrt(1-(b-=2)*b)+1)+c}
,easeInElastic:function(a,b,c,d,e){
	var f=1.70158,g=0,h=d;
	if(0==b)return c;
	if(1==(b/=e))return c+d;
	if(g||(g=.3*e),Math.abs(d)>h){
	h=d;
	var f=g/4}
else var f=g/(2*Math.PI)*Math.asin(d/h);
	return-(h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g))+c}
,easeOutElastic:function(a,b,c,d,e){
	var f=1.70158,g=0,h=d;
	if(0==b)return c;
	if(1==(b/=e))return c+d;
	if(g||(g=.3*e),Math.abs(d)>h){
	h=d;
	var f=g/4}
else var f=g/(2*Math.PI)*Math.asin(d/h);
	return h*Math.pow(2,-10*b)*Math.sin((b*e-f)*2*Math.PI/g)+d+c}
,easeInOutElastic:function(a,b,c,d,e){
	var f=1.70158,g=0,h=d;
	if(0==b)return c;
	if(2==(b/=e/2))return c+d;
	if(g||(g=e*.3*1.5),Math.abs(d)>h){
	h=d;
	var f=g/4}
else var f=g/(2*Math.PI)*Math.asin(d/h);
	return 1>b?-.5*h*Math.pow(2,10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+c:.5*h*Math.pow(2,-10*(b-=1))*Math.sin((b*e-f)*2*Math.PI/g)+d+c}
,easeInBack:function(a,b,c,d,e,f){
	return void 0==f&&(f=1.70158),d*(b/=e)*b*((f+1)*b-f)+c}
,easeOutBack:function(a,b,c,d,e,f){
	return void 0==f&&(f=1.70158),d*((b=b/e-1)*b*((f+1)*b+f)+1)+c}
,easeInOutBack:function(a,b,c,d,e,f){
	return void 0==f&&(f=1.70158),1>(b/=e/2)?d/2*b*b*(((f*=1.525)+1)*b-f)+c:d/2*((b-=2)*b*(((f*=1.525)+1)*b+f)+2)+c}
,easeInBounce:function(a,b,c,d,e){
	return d-jQuery.easing.easeOutBounce(a,e-b,0,d,e)+c}
,easeOutBounce:function(a,b,c,d,e){
	return 1/2.75>(b/=e)?d*7.5625*b*b+c:2/2.75>b?d*(7.5625*(b-=1.5/2.75)*b+.75)+c:2.5/2.75>b?d*(7.5625*(b-=2.25/2.75)*b+.9375)+c:d*(7.5625*(b-=2.625/2.75)*b+.984375)+c}
,easeInOutBounce:function(a,b,c,d,e){
	return e/2>b?.5*jQuery.easing.easeInBounce(a,2*b,0,d,e)+c:.5*jQuery.easing.easeOutBounce(a,2*b-e,0,d,e)+.5*d+c}
}
);

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
/*课程介绍 轮播*/
.friend{height:413px;margin:0 auto;overflow:hidden;width:1300px;}
.mr_frbox{height:407px;padding:24px 0px 0px;}
.mr_frBtnL{cursor:pointer;display:inline;float:left;height:46px;margin:160px 10px 0 0;width:28px;}
.mr_frUl{float:left;height:202px;width:1047px;margin-left:10px;}
.mr_frBtnR{float:right;margin-top:160px;cursor:pointer;width:28px;height:46px;}
.mr_frUl ul li{display:inline;float:left;/*height:389px;*/
width:300px;overflow:hidden;position:relative;}
.mr_frUl ul li a img{/*display:block;*/
width:100%;}
.mr_zhe{width:300px;position:absolute;top:0;background:rgba(78,164,181,0.65) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/
filter:Alpha(opacity=80);background:#4ea4b5;/*实现IE背景透明*/
/*height:389px;*/
left:0;right:0;}
.mr_zhe_i h1{text-align:center;font-size:182px;height:138px;line-height:138px;margin-top:72px;margin-bottom:64px;font-weight:bold;color:#fff;}
.mr_zhe_p{margin-bottom:60px;}
.mr_zhe_p h3{text-align:center;font-size:15px;font-weight:bold;color:#fff;line-height:30px;}
.mr_zhe_p h3 span{display:block;margin:0 auto;width:260px;font-size:18px;border-bottom:1px solid #f4f4f4;}
.mr_zhe_hover{bottom:-596px;height:200px;position:absolute;width:300px;background:rgba(0,0,0,0.5) none repeat scroll 0 0 !important;/*实现FF背景透明，文字不透明*/
filter:Alpha(opacity=80);background:#0a0a0a;/*实现IE背景透明*/
}
.mr_zhe_hover h1{text-align:center;height:40px;line-height:40px;margin:22px 0;color:#fff;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
354.60 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
354.60 KB
立即下载
樊琬凝馨
了解
打赏作者 鼓励作者
Html Js 图片切换触摸4
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章