知识大全 jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果

Posted 2022-07-20 焦点

篇首语：你不好好奋斗，拿什么显摆的自己的成功，对于背后的人看不起。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果相关的知识，希望对你有一定的参考价值。

jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果带索引按钮控制和左右按钮控制图片切换实例代码如下感兴趣的朋友可以参考下哈复制代码代码如下: <!DOCTYPE > <> <head> <meta equiv="Content Type" content="text/; charset=utf " /> <title>jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动</title> <meta name=description content="jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果带索引按钮控制和左右按钮控制图片切换" /> <style type=text/css> *margin: ;padding: ; bodyfont size: px;color:# ;font family:Verdana Arial Helvetica sans serif;background:#f f f ; clearfix:aftercontent: " ";display: block;height: ;clear: both;visibility: hidden; clearfixzoom: ; ul lilist style:none; imgborder: ; wrapperwidth: px;margin: auto;padding bottom: px; h height: px;line height: px;font size: px;font weight:normal;font family:"Microsoft YaHei" SimHei;margin bottom: px; /* focus */ #focuswidth: px;height: px;overflow:hidden;position:relative; #focus ulheight: px;position:absolute; #focus ul lifloat:left;width: px;height: px;overflow:hidden;position:relative;background:# ; #focus ul li divposition:absolute;overflow:hidden; #focus btnBgposition:absolute;width: px;height: px;left: ;bottom: ;background:# ; #focus btnposition:absolute;width: px;height: px;padding: px px;right: ;bottom: ;text align:right; #focus btn spandisplay:inline block;_display:inline;_zoom: ;width: px;height: px;_font size: ;margin left: px;cursor:pointer;background:#fff; #focus btn span onbackground:#fff; #focus preNextwidth: px;height: px;position:absolute;top: px;background:url(img/sprite png) no repeat ;cursor:pointer; #focus preleft: ; #focus nextright: ;background position:right top; </style> <script type=text/javascript src= <script type=text/javascript"> $(function() var sWidth = $("#focus") width(); //获取焦点图的宽度（显示面积） var len = $("#focus ul li") length; //获取焦点图个数 var index = ; var picTimer; //以下代码添加数字按钮和按钮后的半透明条还有上一页下一页两个按钮 var btn = "<div class= btnBg ></div><div class= btn >"; for(var i= ; i < len; i++) btn += "<span></span>"; btn += "</div><div class= preNext pre ></div><div class= preNext next ></div>"; $("#focus") append(btn); $("#focus btnBg") css("opacity" ); //为小按钮添加鼠标滑入事件以显示相应的内容 $("#focus btn span") css("opacity" ) mouseover(function() index = $("#focus btn span") index(this); showPics(index); ) eq( ) trigger("mouseover"); //上一页下一页按钮透明度处理 $("#focus preNext") css("opacity" ) hover(function() $(this) stop(true false) animate("opacity":" " ); function() $(this) stop(true false) animate("opacity":" " ); ); //上一页按钮 $("#focus pre") click(function() index = ; if(index == ) index = len ; showPics(index); ); //下一页按钮 $("#focus next") click(function() index += ; if(index == len) index = ; showPics(index); ); //本例为左右滚动即所有li元素都是在同一排向左浮动所以这里需要计算出外围ul元素的宽度 $("#focus ul") css("width" sWidth * (len)); //鼠标滑上焦点图时停止自动播放滑出时开始自动播放 $("#focus") hover(function() clearInterval(picTimer); function() picTimer = setInterval(function() showPics(index); index++; if(index == len) index = ; ); //此代表自动播放的间隔单位毫秒 ) trigger("mouseleave"); //显示图片函数根据接收的index值显示相应的内容 function showPics(index) //普通切换 var nowLeft = index*sWidth; //根据index值计算ul元素的left值 $("#focus ul") stop(true false) animate("left":nowLeft ); //通过animate()调整ul元素滚动到计算出的position $("#focus btn span") stop(true false) animate("opacity":" " ) eq(index) stop(true false) animate("opacity":" " ); //为当前的按钮切换到选中的效果 ); </script> </head> <body> <div > <h >jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动</h > <div id="focus"> <ul> <li><a href="商城焦点图效果下载" /></a></li> <li><a href="商城焦点图效果教程" /></a></li> <li><a href="商城焦点图效果" /></a></li> <li><a href="商城焦点图代码" /></a></li> <li><a href="商城焦点图源码" /></a></li> </ul> </div><! focus end > </div><! wrapper end > </body> </> cha138/Article/program/Java/JSP/201311/20300