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');
//触发被选元素的指定事件
});
