JQuery制作基础的无缝轮播与左右点击效果
在网页中我们想要的无缝轮播左右循环有好多好多中，这是我第一个轮播效果，也是最基础的，和大家分享一下，对于初学者希望你们能有所借鉴，对于大神我想让你们尽情的虐我给我宝贵的意见。
这个是我要的效果
进入正题，首先是布局，布局的原理就是在DIV中创建ul标签，ul中插入li标签，在里插入图片，你想要几个图片轮播，插入几个li。布局上主要的点在于div设置大小，加上overflow：hidden；让超出部分隐藏，ul的长度是所有图片的总长度，li浮动。
1 <div id="djlb"> 2 <div id="bigul"> 3 <ul> 4 <li> 5 <img src="../images/djlb1.gif" alt=""> 6 <p class="zt4">赵茜</p> 7 <p class="zt22">北京大学历史系研究生</p> 8 </li> 9 <li> 10 <img src="../images/yc2.gif" alt="yc2"> 11 </li> 12 </ul> 13 <ul> 14 <li> 15 <img src="../images/djlb2.gif" alt=""> 16 <p class="zt4">赵茜</p> 17 <p class="zt22">北京大学历史系研究生</p> 18 </li> 19 <li> 20 <img src="../images/yc2.gif" alt="yc2"> 21 </li> 22 23 </ul> 24 <ul> 25 <li> 26 <img src="../images/djlb3.gif" alt=""> 27 <p class="zt4">赵茜</p> 28 <p class="zt22">北京大学历史系研究生</p> 29 </li> 30 <li> 31 <img src="../images/yc2.gif" alt="yc2"> 32 </li> 33 </ul> 34 <ul> 35 <li> 36 <img src="../images/djlb2.gif" alt=""> 37 <p class="zt4">赵茜</p> 38 <p class="zt22">北京大学历史系研究生</p> 39 </li> 40 <li> 41 <img src="../images/yc2.gif" alt="yc2"> 42 </li> 43 </ul> 44 <ul> 45 <li> 46 <img src="../images/djlb2.gif" alt=""> 47 <p class="zt4">赵茜</p> 48 <p class="zt22">北京大学历史系研究生</p> 49 </li> 50 <li> 51 <img src="../images/yc2.gif" alt="yc2"> 52 </li> 53 </ul> 54 <ul> 55 <li> 56 <img src="../images/djlb2.gif" alt=""> 57 <p class="zt4">赵茜</p> 58 <p class="zt22">北京大学历史系研究生</p> 59 </li> 60 <li> 61 <img src="../images/yc2.gif" alt="yc2"> 62 </li> 63 </ul> 64 </div> 65 </div> 66 <div id="aniu"> 67 <div id="bleft"></div> 68 <div id="bright"></div> 69 </div> 70 71 </div>
1 #djlb { 2 width: 1200px; 3 height: 600px; 4 overflow: hidden; 5 } 6 #bigul { 7 width: 1800px; 8 height: 560px; 9 } 10 #bigul > ul { 11 position: relative; 12 width: 300px; 13 height: 560px; 14 float: left; 15 } 16 #bigul > ul > li:nth-child(even) { 17 position: absolute; 18 display: none; 19 } 20 #bigul > ul > li { 21 width: 300px; 22 height: 560px; 23 float: left; 24 } 25 #aniu { 26 position: relative; 27 } 28 #aniu > div { 29 position: absolute; 30 } 31 #aniu > div:first-child{ 32 left:-55px; 33 top: -290px; 34 display: inline-block; 35 border-left: 6px solid #c2c2c2; 36 border-top: 6px solid #c2c2c2; 37 width: 37px; 38 height: 37px; 39 transform: rotate(-45deg); 40 } 41 #aniu > div:last-child{ 42 left: 1210px; 43 top: -290px; 44 display: inline-block; 45 border-right: 6px solid #c2c2c2; 46 border-bottom: 6px solid #c2c2c2; 47 width: 37px; 48 height: 37px; 49 transform: rotate(-45deg); 50 } 51 #aniu > div:first-child:hover{ 52 border-left: 6px solid #ffcc00; 53 border-top: 6px solid #ffcc00; 54 } 55 #aniu > div:last-child:hover { 56 border-right: 6px solid #ffcc00; 57 border-bottom: 6px solid #ffcc00; 58 }
主要说明一下我js的思路；
$(function () {
var i = 0, tick, list, ul = $("#bigul");
$("#bright").click(function () {
$("#bigul").animate({ "margin-left": -300 }, 30000, function () {//当你执行完了后发生的事件
list =ul.find("ul"); //正常的话ul就是li，因为我这个需要鼠标浮动显示隐藏，结构一样
ul.append(list.first()); //ul追加到最后一个
ul.css("margin-left",0); //在每一次点击过后，margin-left初始化为零，为什么嘛要初始化呢？ 思考一下？
});//这样就向右无限循环了，就像队列一样
if (tick) {
clearTimeout(tick);
} //清除上一次定时器
tick = setTimeout(function () {
$("#bright").click();
}, 30000); 定时器自动的部分
});
$("#bleft").click(function(){
list = ul.find("ul");
list.last().insertBefore(list.first()); // 当第一次点击时，把最后的搬到前面来，
ul.css("margin-left",-300);
ul.animate({ "margin-left": 0 }, 3000); //同样这个问题？？
if (tick) {
clearTimeout(tick);
}
tick = setTimeout(function () {
$("#bleft").click();
}, 3000);
});
$("#bright").click(); //自动向右事件
});
现在和你说为什么，如果不初始化，你点击右边的时候，他会重第一张到第三张，因为当你把第一个搬到后面一个时，ul父盒子左边是0，下一次移动他会自动补全他的位置，也就是两个位置，所以直接就是第三张图了，我是画图才想明白的嘻嘻！
整个思路：
运用animate让li移动，
当向右点击时，运用append()方法把第一个张追加到最后一张，而且要每次移动要清除一下子。
向左点击时，运用insertBefore()把最后一张插入第一张，也要清除一下
tick是我们定义的定时器settimeout
最后一句就是自动向右事件了
鼠标移动显示隐藏就是用到了mouseout() 和show(),hide()就ok了
