기본 JS로 작성되었으며 IE6, 7 및 8 브라우저와 호환되며 원활한 자동 캐러셀(버튼 전환 포함)
- 青灯夜游앞으로
- 2018-10-11 17:35:482069검색
이 글은 원활한 자동 캐러셀(버튼 전환 포함)을 위해 IE6, 7, 8 브라우저와 호환되는 기본 JS 작성을 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게.
프로젝트 요구 사항 페이지는 IE6, 7, 8 및 기타 브라우저와 호환됩니다. 캐러셀 섹션에는 작은 프레임을 스크롤할 때마다 무한 루프, 자동 캐러셀 및 수동 전환 기능이 필요합니다. 인터넷에는 swiper 등과 같은 플러그인이 많이 있습니다!
하지만 그 중 다수는 IE6, 7, 8과 같은 저수준 브라우저와 호환되지 않습니다. 비슷한 캐러셀 플러그인을 직접 작성하는 수밖에 없습니다.
더 이상 말도 안 되는 소리는 하지 마세요. 다음 코드로 이동하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3-20180801.min.js"></script>
<style>
*{margin: 0;padding: 0;}
div{position: relative;width: 1000px;overflow: hidden;height: 100px;line-height:100px;}
ul{position: absolute;list-style: none;overflow: hidden;}
li{float: left;width: 200px;height: 100px;text-align:center;color:#fff;}
a{position: absolute;color:#fff;margin:0 10px;font-size:30px;text-decoration:none;}
</style>
</head>
<body>
<div>
<ul>
<li style="background: red;">1</li>
<li style="background: yellow;">2</li>
<li style="background: blue;">3</li>
<li style="background: black;">4</li>
<li style="background: green;">5</li>
<li style="background: orange;">6</li>
<li style="background: skyblue;">7</li>
<li style="background: blue;">8</li>
<li style="background: green;">9</li>
<li style="background: orange;">10</li>
<li style="background: skyblue;">11</li>
</ul>
<a href="javascript:void(0)" class="prev" style="left:0px;">←</a>
<a href="javascript:void(0)" class="next" style="right:0px;">→</a>
</div>
</body>
<script type="text/javascript">
var fli = $("ul li").clone(true);
var oul = $("ul");
oul.append(fli);
oul.width($("ul li").eq(0).width()*$("ul li").length);
var inow = 0;
var timer = null;
$("div").mouseover(function(){
clearInterval(timer);
})
$("div").mouseout(function(){
autoplay();
})
$(".next").click(function(){
if(inow == $("ul li").length/2){
oul.css("left","0px");
inow = 1;
}else{
inow++;
}
var leng = -inow*$("ul li").eq(0).width()+"px";
oul.animate({"left":leng});
})
$(".prev").click(function(){
if(inow == 0){
var ml = -$("ul li").eq(0).width()*($("ul li").length/2)+"px";
oul.css("left",ml);
inow = $("ul li").length/2-1;
}else{
inow--;
}
var leng = -inow*$("ul li").eq(0).width()+"px";
oul.animate({"left":leng});
})
function autoplay(){
timer = setInterval(function(){
if(inow == $("ul li").length/2){
oul.css("left","0px");
inow = 1;
}else{
inow++;
}
console.log(inow);
var leng = -inow*$("ul li").eq(0).width()+"px";
oul.animate({"left":leng});
},2000);
}
autoplay();
</script>
</html>
이 기사가 모든 사람에게 도움이 되기를 바랍니다. 기술 교류를 좋아한다면 저를 팔로우하고 프론트엔드 기술을 함께 교환할 수 있습니다.
요약: 위 내용이 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요!
위 내용은 기본 JS로 작성되었으며 IE6, 7 및 8 브라우저와 호환되며 원활한 자동 캐러셀(버튼 전환 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
이 기사는 cnblogs.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：vue의 이벤트 버스(EventBus) 지식 포인트에 대한 관련 소개(코드 포함)다음 기사：vue의 이벤트 버스(EventBus) 지식 포인트에 대한 관련 소개(코드 포함)