JS“轮播图”
轮播图其实不难
主要运用了定时器、循环语句及鼠标事件
下面来看一下代码
<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>
//首先，在无序列表中插入图片，在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>
//在有序列表中写入序号，以便后面鼠标事件的执行，同样需要设置初始化
</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>
**附上源代码：**
<!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>
