jQuery를 사용하여 원활한 캐러셀과 왼쪽 및 오른쪽 클릭을 구현하는 방법
- php中世界最好的语言원래의
- 2018-05-30 10:44:411560검색
이번에는 jQuery를 사용하여 원활한 캐러셀 및 왼쪽 및 오른쪽 클릭을 구현하는 방법을 보여 드리겠습니다. jQuery를 사용하여 원활한 캐러셀 및 왼쪽 및 오른쪽 클릭을 구현하는 방법은 다음과 같습니다. . 웹페이지에는 우리가 원하는 매끄러운 캐러셀 왼쪽 및 오른쪽 루프가 많이 있습니다. 이것은 나의 첫 번째 캐러셀 효과이자 가장 기본적인 것이기도 합니다. 고수님들은 마음껏 고문해 주시고 귀중한 의견을 주셨으면 합니다.
원하는 효과입니다
본론으로 들어가겠습니다. 먼저 레이아웃의 원리는 p에 ul 태그를 만들고, ul에 li 태그를 삽입하고, 그림을 삽입하는 것입니다. 많은 사진을 회전하시겠습니까? 여러 장을 삽입하세요. 레이아웃의 주요 포인트는 p의 크기를 설정하고
를 추가하는 것입니다. 숨겨진 부분을 숨기려면 ul의 길이는 모든 그림의 전체 길이이고 li는 떠 있습니다. html code
<p id="djlb"> <p id="bigul"> <ul> <li> <img src="../images/djlb1.gif" alt=""> <p class="zt4">赵茜</p> <p class="zt22">北京大学历史系研究生</p> </li> <li> <img src="../images/yc2.gif" alt="yc2"> </li> </ul> <ul> <li> <img src="../images/djlb2.gif" alt=""> <p class="zt4">赵茜</p> <p class="zt22">北京大学历史系研究生</p> </li> <li> <img src="../images/yc2.gif" alt="yc2"> </li> </ul> <ul> <li> <img src="../images/djlb3.gif" alt=""> <p class="zt4">赵茜</p> <p class="zt22">北京大学历史系研究生</p> </li> <li> <img src="../images/yc2.gif" alt="yc2"> </li> </ul> <ul> <li> <img src="../images/djlb2.gif" alt=""> <p class="zt4">赵茜</p> <p class="zt22">北京大学历史系研究生</p> </li> <li> <img src="../images/yc2.gif" alt="yc2"> </li> </ul> <ul> <li> <img src="../images/djlb2.gif" alt=""> <p class="zt4">赵茜</p> <p class="zt22">北京大学历史系研究生</p> </li> <li> <img src="../images/yc2.gif" alt="yc2"> </li> </ul> <ul> <li> <img src="../images/djlb2.gif" alt=""> <p class="zt4">赵茜</p> <p class="zt22">北京大学历史系研究生</p> </li> <li> <img src="../images/yc2.gif" alt="yc2"> </li> </ul> </p> </p> <p id="aniu"> <p id="bleft"></p> <p id="bright"></p> </p> </p>
css code
#djlb {
width: 1200px;
height: 600px;
overflow: hidden;
}
#bigul {
width: 1800px;
height: 560px;
}
#bigul > ul {
position: relative;
width: 300px;
height: 560px;
float: left;
}
#bigul > ul > li:nth-child(even) {
position: absolute;
display: none;
}
#bigul > ul > li {
width: 300px;
height: 560px;
float: left;
}
#aniu {
position: relative;
}
#aniu > p {
position: absolute;
}
#aniu > p:first-child{
left:-55px;
top: -290px;
display: inline-block;
border-left: 6px solid #c2c2c2;
border-top: 6px solid #c2c2c2;
width: 37px;
height: 37px;
transform: rotate(-45deg);
}
#aniu > p:last-child{
left: 1210px;
top: -290px;
display: inline-block;
border-right: 6px solid #c2c2c2;
border-bottom: 6px solid #c2c2c2;
width: 37px;
height: 37px;
transform: rotate(-45deg);
}
#aniu > p:first-child:hover{
border-left: 6px solid #ffcc00;
border-top: 6px solid #ffcc00;
}
#aniu > p:last-child:hover {
border-right: 6px solid #ffcc00;
border-bottom: 6px solid #ffcc00;
}
주로 내 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이 되기 때문입니다. 다음에 옮기면 자동으로 그 위치가 완성되는데, 2자리이므로 바로 세 번째 그림이 됩니다. .그림 그리는 중이에요 헤헤!
전체 아이디어: animate를 사용하여 li를 이동합니다.
오른쪽을 클릭하면append() 메서드를 사용하여 마지막 사진에 첫 번째 사진을 추가하고 매회 삭제해야 합니다. 움직이는 시간.
왼쪽 클릭 시 insertBefore()를 사용하여 첫 번째 그림에 마지막 그림을 삽입하고 지우세요.
틱은 우리가 정의한 타이머 설정 시간입니다.
마지막 문장은 자동 오른쪽 이벤트입니다. 간단히 mouseout()과 show(), hide()를 사용하면 괜찮을 것입니다
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 다른 관련 항목에 주의하세요. PHP 중국어 웹사이트의 기사!
추천 도서:
js에서 비동기 기능을 사용하는 방법위 내용은 jQuery를 사용하여 원활한 캐러셀과 왼쪽 및 오른쪽 클릭을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!