JS「輪播圖」

時間 2019-11-17

原文原文鏈接

輪播圖其實不難
主要運用了定時器、循環語句及鼠標事件
下面來看一下代碼css

<body>
<div id="main">
<ul id="pic">
<li><img src="img/1.jpg" alt="dnf1"/></li>
<li><img src="img/2.jpg" alt="dnf2"/></li>
<li><img src="img/3.jpg" alt="dnf3"/></li>
<li><img src="img/4.jpg" alt="dnf4"/></li>
<li><img src="img/5.jpg" alt="dnf5"/></li>
<li><img src="img/6.jpg" alt="dnf6"/></li>
<li><img src="img/7.jpg" alt="dnf7"/></li>
</ul>html

//首先，在無序列表中插入圖片，在css中設置好樣式和初始化函數

<ol id="tic">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ol>htm

//在有序列表中寫入序號，以便後面鼠標事件的執行，一樣須要設置初始化blog

</div>
<script>
var pic=document.getElementById("pic");
var tic=document.getElementById("tic").getElementsByTagName("li");
var main=document.getElementById("main") //聲明函數或許值
var i=0; //設置 i 的初始值爲0
var timer; // 建立一個timer
timer=setInterval(play,1000); //**給timer加上定時器的屬性，這裏爲每1000毫秒執行一次play事件**
function play (){
i++;
if(i>=tic.length){
i=0;
}
change(i);
}
function change (num){
pic.style.marginLeft= -450*num+"px"; //**每次執行時，圖片移動的距離**
for(var j=0;j<tic.length;j++){
tic[j].className="";
}
tic[num].className="on"; //**給有序列表賦上樣式「on」**
}
main.onmouseover=function(){ //**鼠標移入事件**
clearInterval(timer); //**清楚定時器**
}
main.onmouseout=function(){ //**鼠標移出事件**
timer=setInterval(play,1000); //**啓動定時器**
}
for(let k=0;k<tic.length;k++){
tic[k].onmouseover=function(){
change(k);
i=k;
}
}

</script>
</body>
seo

**附上源代碼：**事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>輪播圖</title>
<style>
body,ul,ol,li,div,img,font,{
margin: 0;
padding: 0;
}
li{
list-style: none;
display: block;
cursor: pointer;
}
img{
display: block;
}
#main{

width: 450px;
height: 270px;
overflow: hidden;
margin: 0 auto;
position: relative;

}
#pic{
width: 3150px;
height: 270px;
position: absolute;
top:-15px;
left: -40px;

}
#pic li{
float: left;
}
#tic{
width: 180px;
position: absolute;
bottom: 0px;
right: 0px;
}
#tic li{
display:inline-block;
width: 15px;
height: 12px;
font-size: 8px;
line-height: 12px;
margin-left: 10px;
text-align: center;
background-color:#696969;
float: left;
border-radius: 3px;
color: white;
}
#tic .on{
background-color: #EC4828;
}
</style>
</head>
<body>
<div id="main">
<ul id="pic">
<li><img src="img/1.jpg" alt="dnf1"/></li>
<li><img src="img/2.jpg" alt="dnf2"/></li>
<li><img src="img/3.jpg" alt="dnf3"/></li>
<li><img src="img/4.jpg" alt="dnf4"/></li>
<li><img src="img/5.jpg" alt="dnf5"/></li>
<li><img src="img/6.jpg" alt="dnf6"/></li>
<li><img src="img/7.jpg" alt="dnf7"/></li>
</ul>
<ol id="tic">
<li class="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ol>
</div>
<script>
var pic=document.getElementById("pic");
var tic=document.getElementById("tic").getElementsByTagName("li");
var main=document.getElementById("main")
var i=0;
var timer;
timer=setInterval(play,1000);
function play (){
i++;
if(i>=tic.length){
i=0;
}
change(i);
}
function change (num){
pic.style.marginLeft= -450*num+"px";
for(var j=0;j<tic.length;j++){
tic[j].className="";
}
tic[num].className="on";
}
main.onmouseover=function(){
clearInterval(timer);
}
main.onmouseout=function(){
timer=setInterval(play,1000);
}
for(let k=0;k<tic.length;k++){
tic[k].onmouseover=function(){
change(k);
i=k;
}
}

</script>
</body>
</html>圖片

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。