最简单轮播形式,js中通过图片的显示属性控制变换,也可通过调整张照片的margin-Left
效果如图:
实现代码:
& lt; !DOCTYPE html>
& lt; html>
& lt;头lang=癳n”比;
& lt;元charset=皍tf - 8”比;
& lt; title> & lt;/title>
& lt;风格类型=" text/css "比;
* {
保证金:0;
填充:0;
list-style:没有;
文字修饰:没有;
}
.wrap {
宽度:490 px;
身高:170 px;
保证金:100 px的汽车;
边界:1 px固体# 000000;
位置:相对;
溢出:隐藏;
}
#图片{
宽度:2450 px;
身高:170 px;
}
李#图片{
浮:左;
}
#{列表
位置:绝对的;
底部:10 px;
左:150 px;
}
#李{列表
浮:左;
宽度:15 px;
高度:15 px;
背景:# fff;
保证金:0 10 px;
这个特性:50%;
光标:指针;
}
#列表。{
背景:# e27a00;
}
.Prev {
上图:30 px;
左:0;
}
第二{
上图:30 px;
右:0;
}
.Prev第二{
位置:绝对的;
字体大小:80 px;
粗细:大胆的;
颜色:# fff;
-webkit-transition:所有0.35 s ease-in-out
}
第二:徘徊,
.Prev:{徘徊
背景:# ccc;
背景:rgba (204、204、204、0.4);
}
,告诉{
显示:块;
}
.hidden {
显示:没有;
}
& lt;/style>
& lt;脚本type=" text/javascript祝辞
window=function () {
var图片=. getelementbyid (pic) .getElementsByTagName(‘李’);
var=. getelementbyid列表(列表).getElementsByTagName(‘李’);
var prev=. getelementbyid(“上一页”);
接下来var=. getelementbyid (“next”);
var指数=0;
var计时器=零;
汽车();
我(var=0; i< list.length;我+ +){
列表[我].index=我;
列表[我].onmouseover=function () {
clearInterval(计时器);
改变(this.index);
}
列表[我].onmouseout=function () {
汽车();
}
图片[我].onmouseover=function () {
clearInterval(计时器);
}
图片[我].onmouseout=function () {
汽车();
}
}
prev.onclick=function () {
clearInterval(计时器);
指数——;
如果(index<=0) {
指数=list.length-1;
}
改变(指数);
}
next.onclick=function () {
clearInterval(计时器);
指数+ +;
如果(index>=list.length) {
指数=0;
}
改变(指数);
}
prev.onmousemove=function () {
clearInterval(计时器);
}
prev.onmouseout=function () {
汽车();
}
next.onmouseover=function () {
clearInterval(计时器);
}
next.onmouseout=function () {
汽车();
}
函数变化(curIndex) {
我(var=0; i< list.length;我+ +){
[我]列表.className=" ";
图片[我].className=耙亍?
}
列表(curIndex) .className=皁n”;
图片(curIndex) .className=靶恪?
指数=curIndex;
}
函数自动(){
计时器=setInterval(函数(){
指数+ +;
如果(index>=list.length) {
指数=0
}
改变(指数);
}, 2000);
}
}
& lt;/script>
& lt;/head>
& lt; body>
& lt; div类="包装" id=鞍啊北?
& lt; ul id="图片"比;
& lt;李类="显示"祝辞& lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/54111cd9000174cd04900170.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/54111dac000118af04900170.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/54111d9c0001998204900170.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/54111d8a0001f41704900170.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt; li> & lt; a href=" https://www.yisu.com/zixun/"祝辞& lt; img src=" https://www.yisu.com/54111d7d00018ba604900170.jpg " alt="/祝辞& lt;/a> & lt;/li>
& lt;/ul>
& lt; ul id=傲斜怼北?
& lt;李类="上"祝辞& lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt;/ul>
& lt; a href=" javascript:,“class="上一页" id="上一页"祝辞,lt; & lt;/a>
& lt; a href=" javascript:;”class=跋乱桓觥眎d=跋乱桓觥弊４?gt; & lt;/a>
& lt;/div>
& lt;/body>
& lt;/html>
