어떻게 jQuery로 그림의 무한 스크롤을 실현합니까? 마우스를 놓으면 이동이 멈추고 계속 스크롤하는 효과가 있습니다
8165 단어 【jQuery】
HTML 코드 먼저 보기
<body>
<div>
<ul>
<li><img src="img/002.jpg" /> li>
<li><img src="img/001.jpg" /> li>
<li><img src="img/003.jpg" /> li>
<li><img src="img/004.jpg" /> li>
<li><img src="img/002.jpg" /> li>
<li><img src="img/001.jpg" /> li>
ul>
div>
body>이거 스타일시트예요.
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 250px;
margin: 100px auto;
border: 2px solid black;
}
ul{
list-style: none;
width: 2500px;
height: 300px;
// ， ，
//
background: black;
}
ul li{
float: left;
}
/* ul ， ， div */
style>가장 중요한 건 JQ의 실현입니다.
<script>
$(function(){
//1.
var offSet = 0;
var timer
function autoPlay(){
// ，
timer= setInterval(function(){
// ，
offSet += -50;
// ul（ ul）
$("ul").css("margin-left",offSet);
// ，
if(offSet<=-1200){
offSet =0 ;
}
},60);
}
//2. li ,
$("li").hover(function(){
//
clearInterval(timer);
// （ ）
$(this).siblings().fadeTo(100,0.5);
//
$(this).fadeTo(100,1);
},function(){
//
autoPlay();
//
$("li").fadeTo(100,1);
})
})
script> 좋은 웹페이지 즐겨찾기
