jQuery宽屏图片幻灯片展示滑动切换效果_多层图片叠加切换效果
2014-10-14 13:38:04 By: shinyuu
jQuery宽屏图片滑动切换效果、效果非常不错、出于视觉效果、把三张图片叠加在一起的
看上云会有飘逸的效果、基于jquery实现的banner多个div容器宽屏图片滑动切换效果
话不多说、有图有真像、来看看Demo效果吧
JS代码
$(function() { $("#focusIndex1").show(); $("#focusBar li").css("width",$(window).width()); $("a.arrL").mouseover(function(){stopFocusAm();}) .mouseout(function(){starFocustAm();}); $("a.arrR").mouseover(function(){stopFocusAm();}) .mouseout(function(){starFocustAm();}); $("#focusBar li").mouseover(function(){stopFocusAm();}) .mouseout(function(){starFocustAm();}); starFocustAm(); }); /*------focus-------*/ $("#focusBar").hover( function () { $("#focusBar .arrL").stop(false,true); $("#focusBar .arrR").stop(false,true); $("#focusBar .arrL").animate({ left: 0}, { duration: 500 }); $("#focusBar .arrR").animate({ right: 0}, { duration: 500 }); }, function () { $("#focusBar .arrL").stop(false,true); $("#focusBar .arrR").stop(false,true); $("#focusBar .arrL").animate({ left: -52}, { duration: 500 }); $("#focusBar .arrR").animate({ right: -52}, { duration: 500 }); } );
HTML代码
<div id="focusBar"> <a href="javascript:void(0)" class="arrL" onclick="prePage()"> </a> <a href="javascript:void(0)" class="arrR" onclick="nextPage()"> </a> <ul class="mypng"> <!--此处需判断li的display:block--> <li id="focusIndex1" style="background:url(images/2.jpg) no-repeat center center; display:block;"> <div class="focusL"> <a href="#"><img src="images/5.png" width="1920" height="462" /></a> </div> <div class="zhezhao" > <a href="#"><img src="images/8.png" width="1920" height="462" /></a> </div> <div class="focusR"> <a href="#"><img src="images/9.png" width="1920" height="492" /></a> </div> </li> <li id="focusIndex2" style="background:url(images/1.jpg) no-repeat center center; display:none;"> <div class="focusL"> <a href="#"><img src="images/5.png" width="1920" height="462" /></a> /div> <div class="zhezhao" > <a href="#"><img src="images/7.png" width="1920" height="462" /></a> </div> <div class="focusR"> <a href="#"><img src="images/6.png" width="1920" height="492" /></a> </div> </li> <li id="focusIndex3" style="background:url(images/2.jpg) no-repeat center center; display:none;"> <div class="focusL"> <a href="#"><img src="images/5.png" width="1920" height="462" /></a> </div> <div class="zhezhao" > <a href="#"><img src="images/8.png" width="1920" height="462" /></a> </div> <div class="focusR"> <a href="#"><img src="images/9.png" width="1920" height="492" /></a> </div> </li> <li id="focusIndex4" style="background:url(images/1.jpg) no-repeat center center; display:none;"> <div class="focusL"> <a href="#"><img src="images/5.png" width="1920" height="462" /></a> </div> <div class="zhezhao" > <a href="#"><img src="images/7.png" width="1920" height="462" /></a> </div> <div class="focusR"> <a href="#"><img src="images/6.png" width="1920" height="492" /></a> </div> </li> </ul> </div>
最后给大家献上源代码下载链接:http://dwtedx.com/download.html?bdkey=s/1sjFKk1n 密码:mnrq
若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力
想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)
或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)
如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教
为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛