<!doctype html>
<
html
>
<
head
>
<
meta
name
=
"viewport"
content
=
"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"
>
<
meta
name='apple-mobile-web-app-capable' content='yes' />
<
meta
name
=
"format-detection"
content
=
"telephone=no"
/>
<
meta
http-equiv='Content-Type' content='textml;
charset
=
UTF
-8' />
<
title
>移动端</
title
>
<
style
>
*{
padding: 0;
margin: 0;
}
#slideshow{
width: 160px;
height: 600px;
margin: 0 auto; /*设置在页面水平居中*/
overflow: hidden;
position: relative;
}
#slideshow img{
width: 160px;
position: absolute; /*图片采取绝对定位,均位于左上角,重叠在一起*/
top: 0;
left: 0;
opacity: 0; /*初始不透明度为0,图片都看不见*/
transition: opacity 1s linear; /*--重点--定义一个关于透明度的transition*/
}
#slideshow img.active{
opacity: 1; /*有active类的图片不透明度为1,即显示图片*/
}
</
style
>
</
head
>
<
body
>
<
div
id
=
"slideshow"
>
<
img
src
=
"img/1 (1).jpg"
/>
<
img
src
=
"img/1 (2).jpg"
/>
<
img
src
=
"img/1 (3).jpg"
/>
<
img
src
=
"img/1 (4).jpg"
/>
<
img
src
=
"img/1 (5).jpg"
/>
<
img
src
=
"img/1 (6).jpg"
/>
<
img
src
=
"img/1 (7).jpg"
/>
<
img
src
=
"img/1 (8).jpg"
/>
<
img
src
=
"img/1 (9).jpg"
/>
<
img
src
=
"img/1 (10).jpg"
/>
<
img
src
=
"img/1 (11).jpg"
/>
</
div
>
<
script
>
//---------主角:轮播图函数-------------
function slideshow() {
var slideshow=document.getElementById("slideshow"),
imgs=slideshow.getElementsByTagName("img"), //得到图片们
current=0; //current为当前活跃的图片编号
function slideOff() {
imgs[current].className=""; //图片淡出
}
function slideOn() {
imgs[current].className="active"; //图片淡入
}
function changeSlide() { //切换图片的函数
slideOff();
current++; //自增1
if(current>=imgs.length) current=0;
slideOn();
}
//每2s调用changeSlide函数进行图片轮播
var slideon=setInterval(changeSlide,2000);
slideshow.onmouseover=function () {
clearInterval(slideon); //当鼠标移入时清除轮播事件
}
slideshow.onmouseout=function () {
slideon=setInterval(changeSlide,1500); //当鼠标移出时重新开始轮播事件
}
}
slideshow();
</
script
>
</
body
>
</
html
>