집 > 기사 > 웹 프론트엔드 > 회전식 사진을 만드는 방법

회전식 사진을 만드는 방법

angryTom원래의: 2019-08-03 14:25:559292검색

회전식 사진을 만드는 방법

Rendering

아이디어 분석:

　 메소드 이름: window.setInterval(code ,MilliSec ), 지정된 시간마다 무제한으로 코드를 실행합니다.

window.setInterval(code,MilliSec)，每隔指定的时间就执行code，无限次执行。

　　2、定时器函数主要是用来执行图片轮播的效果

　　3、当鼠标放在图片上面时，图片就停止了轮播的效果清除了定时器

　　　　方法名：window.clearInterval (timer）　

2. 타이머 기능은 주로 이미지 캐러셀 효과를 수행하는 데 사용됩니다

　3. 이미지 위에 마우스를 놓으면 이미지가 캐러셀 효과를 멈추고 타이머가 지워집니다

　방법 이름 : window.clearInterval (timer), 지정된 타이머를 지웁니다.

　　4. 마우스가 사진에서 벗어나면 사진은 계속해서 캐러셀 효과를 수행합니다. 타이머 기능이 다시 활성화됩니다

　　5. li 태그에 마우스를 놓으면 사진이 캐러셀 효과를 멈춥니다. 타이머가 설정됩니다

6. 마우스를 li 라벨에 놓으면 li 라벨의 숫자에 해당하는 그림도 표시됩니다

7. 마우스가 li를 떠나면 라벨을 붙이면 사진이 계속 회전합니다. 타이머 기능이 다시 활성화된 효과입니다

8. 사진이 스크롤됨에 따라 li 태그의 하이라이트 효과도 스크롤됩니다.

HTML 코드

<body>
<div id="content">
        <!--轮换显示的横幅广告图片-->
        <div class="scroll_top"></div>
        <div class="scroll_mid"> 
        <img src="images/dd_scroll_1.jpg" alt="轮换显示的图片广告" id="dd_scroll" οnmοuseοver="stopScroll()" οnmοuseοut="goon()"/>
            <div id="scroll_number">
                <ul>
                    <li class="scroll_number_over" οnmοuseοver="stopScroll(1)"  οnmοuseοut="goon()">1</li>
                    <li  οnmοuseοver="stopScroll(2)" οnmοuseοut="goon()">2</li>
                    <li  οnmοuseοver="stopScroll(3)" οnmοuseοut="goon()">3</li>
                    <li  οnmοuseοver="stopScroll(4)" οnmοuseοut="goon()">4</li>
                    <li  οnmοuseοver="stopScroll(5)" οnmοuseοut="goon()">5</li>
                    <li  οnmοuseοver="stopScroll(6)" οnmοuseοut="goon()">6</li>
                </ul>
            </div>
        </div>
        <div class="scroll_end"></div>
</div>
</body>

JS 코드

<script type="text/javascript">
window.οnlοad=function(){
timer=setInterval("imgScroll()",500);
var scroll_number=document.getElementById(&#39;scroll_number&#39;);
scrLi=scroll_number.getElementsByTagName(&#39;li&#39;);
scrLiLen=scrLi.length;
}
var n=2;
function imgScroll(){
for(var i=0;i<scrLiLen;i++){
scrLi[i].className="";
}
scrLi[n-1].className="scroll_number_over";
var imgObj=document.getElementById(&#39;dd_scroll&#39;);
imgObj.src="images/dd_scroll_"+n+".jpg";
n++;
if(n>6){
n=1;
}
}
function stopScroll(imgN){
if(imgN){
n=imgN;
imgScroll();
}
clearInterval(timer);
}
function goon(){
timer=setInterval(&#39;imgScroll()&#39;,500);
}
</script>

🎜🎜🎜🎜🎜🎜🎜🎜

위 내용은 회전식 사진을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html JS li

성명：

이전 기사：가져오다은 무슨 뜻인가요?다음 기사：가져오다은 무슨 뜻인가요?