前端新手自己写的,练习一下基本功,也是留下的第一次记录
在div class=" cm-banner”;
& lt; div类=癱m-banner-list”比;
& lt; ul id=癱m_banner_list”比;
& lt; !——图片宽度和高度在css中定会为1920×——比;
& lt; li> & lt; img src=" https://www.yisu.com/zixun/cm -横幅- 01. - png "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/cm -横幅- 02. - png "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/cm -横幅- 03. - png "/祝辞& lt;/li>
& lt; li> & lt; img src=" https://www.yisu.com/zixun/cm -横幅- 04. - png "/祝辞& lt;/li>
& lt;/ul>
& lt; ul类=" cm-banner-num " id=" cm_banner_num祝辞& lt;/ul>
& lt;/div>
& lt; div class=" cm-banner-in w”比;
& lt; img src=" https://www.yisu.com/zixun/cm-arrow-left.png " id=癱m_prev”类=" cm-banner-arrow "/比;
& lt; img src=" https://www.yisu.com/zixun/cm-arrow-right.png " id=癱m_next”类=" cm-banner-arrow "/比;
& lt;/div>
& lt;/div>
* {
保证金:0;
填充:0;
}
.cm-banner {
宽度:100%;
身高:300 px;
溢出:隐藏;
光标:指针;
位置:相对;
}
.cm-banner-in {
宽度:1100 px;
身高:300 px;
位置:绝对的;
上图:0;
左:50%;
margin-left: -550 px;
}
李# cm_banner_list {
显示:没有;
位置:绝对的;
上图:0;
左:0;
}
.cm-banner-num {
宽度:100%;
位置:绝对的;
底部:0;
text-align:中心;
z - index: 2;/*如果没有在这里设置层次小圆点的点击效果无法触发*/}
李.cm-banner-num {
宽度:10 px;
保证金:10 px 3 px;
高度:10 px;
background - color: # fff;
border - radius: 5 px;
-webkit-border-radius: 5 px;
显示:inline-block;
透明度:0.7;
}
.cm-banner-num .active {
background - color: # 3982德;
}
.cm-banner-arrow {
位置:绝对的;
上图:50%;
margin-top: -22 px;
透明度:0.5;
显示:没有;
}
# cm_prev {
左:0;
}
# cm_next {
右:0;
}
$(函数(){//鼠标移入显示箭头按钮
$ (' .cm-banner ') .hover(函数(){
$ (' .cm-banner-arrow '),告诉();
clearInterval (cm_timer);
},函数(){
$ (' .cm-banner-arrow ') hide ();
cm_timer=setInterval(函数(){
我+ +;
如果我比;cm_length - 1) {
我=0;
}
$ (" # cm_banner_list李”).eq (i) .fadeIn (800) .siblings () .fadeOut (800);
cm_toggle(我);
},2500);
}）;//鼠标移入箭头按钮高亮
$ (' .cm-banner-arrow ') .hover(函数(){
$ (). css(“不透明度”,' 1 ');
},函数(){
$ (). css(“不透明度”,“0.5”);
}）;//初始化必要变量
var=0;
var cm_length=$ (“# cm_banner_list李”). length;
var cm_toggle=function(点){
$ (" # cm_banner_num李”).eq(点).addClass(“活跃的”).siblings () .removeClass(“活跃的”);
};//动态添加小圆点
(j=0; & lt;cm_length; j + +) {
$ (' # cm_banner_num ') .append (' & lt; li> & lt;/li>”);
}//给第一个小圆点添加样式
$ (" # cm_banner_num李”)当代().addClass(“活跃的”);//给第一张图片添加样式
$ (" # cm_banner_list李”)当代(). css(“显示”、“块”);//鼠标点击左箭头切换
$ (' # cm_prev ') .click(函数(){
我,;
如果我& lt;0){
我=cm_length - 1;
}
$ (" # cm_banner_list李”).eq (i) .fadeIn (800) .siblings () .fadeOut (800);
cm_toggle(我);
}）;//鼠标点击右箭头切换
$ (' # cm_next ') .click(函数(){
我+ +;
如果我比;cm_length - 1) {
我=0;
}
$ (" # cm_banner_list李”).eq (i) .fadeIn (800) .siblings () .fadeOut (800);
cm_toggle(我);
}）;//鼠标点击圆点切换
$ (" # cm_banner_num李”).click(函数(){
var cm_index=$(这).index ();
$ (" # cm_banner_list李”).eq (cm_index) .fadeIn (800) .siblings () .fadeOut (800);
我=cm_index;
cm_toggle (cm_index);
}）;//自动播放
cm_timer=setInterval(函数(){
我+ +;
如果我比;cm_length - 1) {
我=0;
}
$ (" # cm_banner_list李”).eq (i) .fadeIn (800) .siblings () .fadeOut (800);
cm_toggle(我);
},2500);
});
