一些插件都不太好实现如下效果,综合考虑还是自己写一个效果,JS代码的定义参数都标注清楚了,记录备用,以后可能会用得上。
HTML代码:
<div class="motto" id="motto"> <ul class="mottoList"> <li> <div class="pic left"><img src="images/motto/motto11.png"></div> <div class="pic right"><img src="images/motto/motto12.png"></div> </li> <li> <div class="pic left"><img src="images/motto/motto21.png"></div> <div class="pic right"><img src="images/motto/motto22.png"></div> </li> <li> <div class="pic left"><img src="images/motto/motto31.png"></div> <div class="pic right"><img src="images/motto/motto32.png"></div> </li> <li> <div class="pic left"><img src="images/motto/motto41.png"></div> <div class="pic right"><img src="images/motto/motto42.png"></div> </li> <li> <div class="pic left"><img src="images/motto/motto51.png"></div> <div class="pic right"><img src="images/motto/motto52.png"></div> </li> </ul> </div>
CSS代码:
.motto{position: absolute; right: 50%; top: 72px; margin-right: -580px;} .mottoList{width: 390px;} .mottoList li{position: absolute; left: 0; top: 0; width: 390px; height: 63px; display: none;} .mottoList li .pic{position: absolute; top: 0;} .mottoList li .left{left: -100px;} .mottoList li .right{right: -100px;}
JQ代码:
var onIndex = 0; //默认的高亮项 var list = $("#motto ul"); //列表元素 var li = list.children("li"); //选择列表下的每项 var liLength = li.length; //取得列表长度 var easing = "swing"; //过渡曲线效果 var distance = "100px"; //过渡效果的长度 var interTime = 3000; //间隔多久切换,单位毫秒 var delayTime = 1000; //切换动画时间,单位毫秒 var idTime = interTime + delayTime; setFun(idTime); function setFun(setTime){ li.eq(onIndex).addClass("on").fadeIn(delayTime).children(".left").animate({left: 0 + "px"}, delayTime, easing).next(".right").stop(true, false).animate({right: 0 + "px"}, delayTime, easing); setTimeout(function (){ li.eq(onIndex).removeClass("on").fadeOut(delayTime).children(".left").stop(true, false).animate({left: "-" + distance}, delayTime, easing).next(".right").animate({right: "-" + distance}, delayTime, easing); if (onIndex >= liLength - 1){ onIndex = 0; }else{ onIndex++; } setTimeout(function (){ setFun(idTime) }, delayTime); }, setTime); }