<强>原生js焦点轮播图主要注意这几点:
1,前后按钮实现切换,同时注意辅助图
2,中间的按钮随着前后按钮对应切换,同时按按钮也能跳转到相应的指数
3间隔调用与无限轮播。
4,注意在动画时要停止按钮,或者说上一个动画完毕下一个动画才能执行
5,另外在切换图片的时候,底部的按钮动画效果,是从底部开始往上升的,要用到变换:规模()和transform-origin: 0 100%两个转换属性,代码如下
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt;元name=肮鄣恪蹦谌?翱矶?设备宽度,初始=1,user-scalable="不"比;
& lt; title> 20170101 & lt;/title>
& lt;风格类型=" text/css "比;
一个{文字修饰:没有,颜色:# 3 dbbf5;}
.wrapper{宽度:750 px;高度:350 px;背景:# 001032;保证金:20 px汽车;text-align:中心;不必:0 0 12 px 2 px hsla(0、20%、30%, 0.5);填充:10 px 15 px;位置:相对;}
.effect{:相对;游标:指针;}
.effect:悬停{颜色:# 02 a0e9;}
.effect:{之前宽度:100%;显示:inline-block !重要;位置:绝对的,身高:1 px;背景:# 02 a0e9;转型:所有0.4 s ease-in-out; -webkit-transition:所有0.4 s ease-in-out; -moz-transition:所有0.4 s ease-in-out;变换:规模(0,1);内容:”;下:5 px;左:0;}
.effect:徘徊:在{变换:(1)规模;-webkit-transform:规模(1);}
# lunBo {margin-top: 20 px;溢出:隐藏;高度:300 px;宽度:750 px;位置:相对;}
#{列表:绝对;z - index: 22;高度:300 px;宽度:5250 px;}
#列表img{浮动:左;}
#按钮{:绝对;高度:20 px;宽度:150 px;z - index: 99;底部:20 px;左:40%;}
跨度{光标:指针;浮:左;宽度:10 px;身高:5 px;背景:# 333;margin-right: 10 px;}
碧绿{背景:黄色;过渡:所有0.4 s ease-in-out; -webkit-transition:所有0.4 s ease-in-out; -moz-transition:所有0.4 s ease-in-out;变换:规模(1,4);-ms-transform:规模(1,4);-moz-transform:规模(1,4);-webkit-transform:规模(1,4);transform-origin: 0% - 0%; -webkit-transform-origin: 0% - 100%; -moz-transform-origin: 0% - 100%;}
.arrow{光标:指针;显示:没有;行高:39 px;text-align:中心;字体大小:36 px;粗细:大胆的;宽度:40像素;身高:100 px;行高:100 px;位置:绝对;z - index: 92;上图:30%;background - color: RGBA (0, 0, 0, 0。3);颜色:# fff;}
.arrow:悬停{background: RGBA (0, 0, 0, 7);}
# lunBo:悬停.arrow{显示:块;}
#:{左:0 px;}
#下一个{右:0 px;}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=鞍捌鳌北?
& lt;一个类=毙в? href=" https://www.yisu.com/zixun/"在2016年完了,2017来了& lt;/a>
& lt; div id=發unBo”比;
& lt; div id=傲斜怼北?
& lt; img src=" https://cache.yisu.com/upload/information/20200622/114/78130.jpg " alt="/比;
& lt; img src=" https://cache.yisu.com/upload/information/20200622/114/78131.jpg " alt="/比;
& lt; img src=" https://cache.yisu.com/upload/information/20200622/114/78132.jpg " alt="/比;
& lt; img src=" https://cache.yisu.com/upload/information/20200622/114/78133.jpg " alt="/比;
& lt; img src=" https://cache.yisu.com/upload/information/20200622/114/78134.jpg " alt="/比;
& lt; img src=" https://cache.yisu.com/upload/information/20200622/114/78130.jpg " alt="/比;
& lt; img src=" https://cache.yisu.com/upload/information/20200622/114/78131.jpg " alt="/比;
& lt;/div>
& lt; div id=鞍磁ァ北?
& lt;跨越指数=?”class=皁n”祝辞& lt;/span>
& lt;跨度指数=" 2 "祝辞& lt;/span>
& lt;跨度指数=" 3 "祝辞& lt;/span>
& lt;跨度指数=" 4 "祝辞& lt;/span>
& lt;跨度指数=" 5 "祝辞& lt;/span>
& lt;/div>
& lt; a href=" javascript:,“id=吧弦灰场眂lass=凹贰弊４?lt; & lt;/a>
& lt; a href=" javascript:,“id=跋乱桓觥眂lass=凹贰弊４?gt; & lt;/a>
& lt;/div>
& lt;/div>
& lt; script>
窗口。onload=function () {
var lunBo=. getelementbyid (“lunBo”);
var=. getelementbyid列表(列表);
var按钮=. getelementbyid(按钮).getElementsByTagName(“跨度”);//console.log(按钮);
var prev=. getelementbyid(“上一页”);
接下来var=. getelementbyid (“next”);
var指数=1;
var动画=false;
var间隔=3000;
var定时器;//显示按钮的索引
函数showButton () {
(var=0;我& lt;按钮。长度;我+ +){
如果按钮[我]。className=='在'){
按钮[我]。className=";
打破;
};
};
按钮(指数- 1).className=吧稀?
};
函数玩(){
计时器=setTimeout(函数(){
next.onclick ();
玩();
},间隔);
};
函数停止(){
clearTimeout(计时器);
};//向前按钮
下一个。onclick=function () {
如果(动画){
返回;
}
如果(指数==5){
指数=1;
}
其他{
指数+=1;
}
动画(-750);
showButton ();
};
上一页。onclick=function () {
如果(动画){
返回;
}
如果(指数==1){
指数=5;
}
其他{
指数-=1;
}
动画(750);
showButton ();
};//方法()转换为纯数的值
函数动画(抵消){
动画=true;
var新左派=方法(list.style.left) +偏移量;//目标值
var=300;//位移总时间为300
var间隔=10;//var=抵消速度/(Math.floor(时间/时间间隔);//每次位移量
函数去(){
如果(速度& lt;0,,方法(list.style.left)比;新左派)| |(速度比;0,,方法(list.style.left) & lt;新左派)){
list.style。左=方法(list.style.left) +速度+“px”;
setTimeout(去,时间间隔);
其他}{
动画=false;
list.style。左=新左派+“px”;//现在的位移
如果新左派的在-750){//假的辅助图
list.style。左=-3750 +“px”;
}
如果(新左派& lt;-3750){
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
