JS轮播图
1. 在body里面写简单的HTML代码。首先在顶部head标签里引入外部CSS和JS,注意要引入JQuery库,并且放在所写的js上面,不然不会有效果。然后在一个div中包裹两个url,第一个用于显示图片,第二个用于定义页码。代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播图</title>
<link rel="stylesheet" href="style.css"><!--引入css-->
<script type="text/javascript" src="webpage/jquery-3.3.1.js"></script><!--引入jQuery-->
<script src="./lunbo.js"></script>
</head>
<body>
<div id="scrollpics">
<ul>
<li><img src="./img/tang.jpg"></li>
<li><img src="./img/he.jpg" ></li>
<li><img src="./img/gong.jpg"></li>
<li><img src="./img/peng.jpg"></li>
<li><img src="./img/sun.jpg" ></li>
<li><img src="./img/shao.jpg"></li>
</ul>
<ul ></ul>
</div>
</body>
</html>
2.写外部CSS。其中我们设置div的高为420px,宽为790px,并且设为相对定位;第二个ul设置绝对定位,并处理好位置。然后第二个ul中的li标签设置左浮动,以及相关样式;最后的样式是通过js新增的类的样式,即显示索引对应的图片的样式。代码如下:
ul li{
list-style: none;
}
#scrollPics{
height: 420px;
width: 790px;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}
.slider{
margin-top: 0;
}
.num{
position: absolute;
right: 5px;
bottom: 5px;
}
#scrollPics .num li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
height: 16px;
cursor: pointer;
overflow: hidden;
margin:3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
#scrollPics .num li.on{
color: #fff;
line-height: 21px;
width:21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border:0;
background-color: #FF7300;
font-weight: bold;
}
3.开始写核心的JS代码。首先先定义几个全局变量。其中。imgCon表示获取到对应的图片存放的变量,并且初始化,除第一张外其他隐藏;num变量则用来定义页码;len定义图片个数;index表示索引。代码如图:
$(function(){
var slider = $('#scrollPics.slider');
var imgCon = $('#scrollPics.slider li');//获取图片
imgCon.not(imgCon.eq(0)).hide();//除第一张其它隐藏
var num=$('#scrollPics.num');//定义页码
var len=slider.find('li').length;
var html_page = '' , index = 0;
//添加页码
for(var i=0;i<len;i++){
if (i===0) {
html_page += '<li class=on>' + (i+1) + '</li>';
} else {
html_page +='<li>' +(i+1)+'</li>';
}
}
num.html(html_page);
//显示索引对应的图片
function showPic(index){
imgCon.eq(index).show().siblings("li").hide();
num.find("li").eq(index).addClass('on').siblings("li").removeClass("on");
}
//页码按钮转入
$('.num li').mouseover(function(){
index =$(this).index(); //获取索引
showPic(index);
})
$('#scrollPics').hover(function () {
clearInterval(window.timer);
},function(){
window.timer=setInterval(function(){
showPic(index);
index++;
if(index===len){
index=0;
}
},3000);
}).trigger('mouseleave'); //触发被选元素的指定事件
});