一、轮播器
1、HTML框架
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title>图片轮播器& lt;/title>
& lt;链接rel="样式表" type=" text/css " href=" https://www.yisu.com/zixun/slider.css " rel=巴獠縩ofollow”/比;
& lt;脚本src=" https://www.yisu.com/zixun/Jquery.js "祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/slider.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div类="包装"比;
& lt; !——快捷键.wrap> (ul>李* 4祝辞img [src=https://www.yisu.com/zixun/$ . jpg]) + ol>李* 4 - ->
<李> 
&%20lt;%20li>%20&%20lt;%20img%20src="%20https://www.yisu.com/zixun/2.jpg " alt=" 22 "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/3.jpg " alt=?3”/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/4.jpg " alt=?4”/祝辞& lt;/li>
& lt;/ul>
& lt; ol>
& lt;李类=暗鼻啊痹? & lt;/li>
& lt; li> 2 & lt;/li>
& lt; li> 3 & lt;/li>
& lt; li> 4 & lt;/li>
& lt;/ol>
& lt; p class="引入“祝辞& lt;/p>
& lt;/div>
& lt;/body>
& lt;/html>
之前
2, css的样式
/*清除列表前默认黑点*/* {
保证金:0;
填充:0;
}
img {
边界:0;
}
ol, ul,李{list-style:没有;}
身体{
保证金:50 px;
}
.wrap {
宽度:500 px;/*一张图片的高和宽*/身高:350 px;
边界:1 px固体红;
位置:相对,/*以这一张图的边框为基准位置*/溢出:隐藏;/*将超过这个长宽高的部分隐藏*/}
.wrap ul {
宽度:2000 px;/*列表的行是四张图片的宽度*/位置:绝对的,/*防止图片溢出*/左:0;
上图:0;
}
李.wrap ul {
浮:左,/*将四张图片紧挨着横着排列*/宽度:500 px;
}
.wrap ol {
位置:绝对的;
底部:10 px;
右:10 px;
}
李.wrap ol {
浮:左,/*达到横着排列的目的*/宽度:16 px;
高:16 px;
行高:16 px;
text-align:中心;/*字体在列元素中举重显示*/颜色:# fff;
背景:# 000;
边界:1 px固体黄;
margin-right: 3 px;/*列与列之间的距离*/光标:指针;
}
.wrap ol li.current {
背景:# fff;
颜色:# 000;
}
.wrap .introduce {
宽度:400 px;
高度:30 px;
行高:30 px;
背景:rgba (0, 0, 0, 0.5);/*达到透明显示的作用,或者用“不透明度:0.5;
过滤器:α(不透明度=50);*/颜色:# fff;
位置:绝对的;
底部:0;
左:0;
}
之前
3, JS控制
$(文档)时函数(){
var oul=$ ('。包装ul’);//获取行;
var阿里=$ ('。包装ul李”);//获取列;
var numLi=$ ('。李包ol ');//获取数字的列;
var aliWidth=$ ('。李包ul) .eq (0) .width ();//获取单张图片的宽度;
var _now=0;//这个控制数字样式的计数器
var _now2=0;//这个是控制图片运动距离的计数器
var timeId;//定时器的开关
var aimg=$ ('。包装ul img ");//获取包装中img元素
var op=$ ('。用p ')//获取包装中p元素
numLi.click(函数(){//鼠标点击触发的函数;
var指数=$ ().index ();//如果点击第一张图片,指数=0;
_now=指数;//不管_now还是_now2都要和点击时指数同步;
_now2=指数;
var imgAlt=aimg.eq (_now) .attr (alt);//获取_now时刻的的alt值
op.html (imgAlt);//并将atl值显示
(美元).addClass(当前).siblings () .removeClass ();//数字样式的增和删;
oul.animate({‘左’:-aliWidth *指数},500);//图片的移动,行元素的左侧距离包装的左侧-500 *指数
});
滑块()函数{
如果(_now==numLi.size() 1){//当滚动到第四张图片的时候
ali.eq (0)。css({//通过定位的方法将第一张移到最后一张;
“位置”:“相对”,
“左”:oul.width ()
});
_now=0;
}
其他{
_now + +;//如果没达到第四张,那就将_new + 1;
}
_now2 + +;//图片控制计数器+ 1;
numLi.eq (_now) .addClass(当前的).siblings () .removeClass ();//数字样式的增和删;
var imgAlt=aimg.eq (_now) .attr (“alt”);//获取_now时刻的的alt值
op.html (imgAlt);//并将atl值显示
oul.animate({‘左’:-aliWidth * _now2}, 500年,函数(){//图片的移动,行元素的左侧距离包装的左侧-500 * now2
如果(_now==0) {
ali.eq (0) . css(“位置”,“静态”);
oul.css('左',0);
_now2=0;
}
});
}
timeId=setInterval(滑块,1500);//每1500毫秒,自动切换图片//鼠标点击图片则停止计时器,停止”自动切换图片”,离开则继续定时器切换图片//$ (' .wrap) .mouseover(函数(事件){//clearInterval (timeId);//});//$ (' .wrap) .mouseover(函数(事件){//timeId=setInterval(滑块,1500);//});
$ (' .wrap ') .hover(函数(){
clearInterval (timeId);
},函数(){
timeId=setInterval(滑块,1500);
});
});
