本文实例为大家分享了JS实现轮播图特效的具体代码,供大家参考,具体内容如下
<强>知识点
<强>轮播图思想:
①建立一个全局变量索引,始终标记当前显示图片。
②根据当前图片的数量,动态创建下方的●图片指示器。
③轮播图的初始状态为第一张图片在中间,剩余所有图片均放在即将显示图片位置。
④当点击祝辞的时候,当前图片调用动画移动函数进行左移,与此同时新的一张图片调用动画函数移入到div中,而会将下一张展示的图片移动到div右侧。
⑤需要进行边界判断,如果当前的图片大于图片数量或者小于等于0,重新给索引赋值。
⑥当点击图片指示器的时候,首先判定点击的与索引的位置关系,然后进行动画移动。
⑦给div添加定时器,自动移动图片。当鼠标进入div,删除定时器,当鼠标移出div,设置定时器。
<>强运行效果
1。自动轮播
2.点击左右切换图片
3 .点击下方图片指示器切换图片
<强>代码
引入MyTools.js库
html
1.
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/1.css " rel=巴獠縩ofollow”比;
& lt;/head>
& lt; body>
& lt; div id=昂凶印北?
& lt; div id=癰ox_content”比;
& lt; div类=" box_img "祝辞& lt; img src=" https://www.yisu.com/zixun/casual01.jpg " alt="祝辞& lt;/div>
& lt; div类=" box_img "祝辞& lt; img src=" https://www.yisu.com/zixun/casual02.jpg " alt="祝辞& lt;/div>
& lt; div类=" box_img "祝辞& lt; img src=" https://www.yisu.com/zixun/casual03.jpg " alt="祝辞& lt;/div>
& lt; div类=" box_img "祝辞& lt; img src=" https://www.yisu.com/zixun/casual04.jpg " alt="祝辞& lt;/div>
& lt; div类=" box_img "祝辞& lt; img src=" https://www.yisu.com/zixun/casual05.jpg " alt="祝辞& lt;/div>
& lt;/div>
& lt; div id=癰ox_control”比;
& lt; a href=" javascript:;”class=癰ox_control_left”祝辞& lt; i> & lt; & lt;/i> & lt;/a>
& lt; a href=" javascript:;”class=癰ox_control_right”祝辞& lt; i>祝辞& lt;/i> & lt;/a>
& lt; ul>
& lt;/ul>
& lt;/div>
& lt;/div>
& lt;脚本src=" https://www.yisu.com/JavaScript学习/00 mytools/MyTools.js”祝辞& lt;/script>
& lt;脚本src=" https://www.yisu.com/zixun/1.js "祝辞& lt;/script>
& lt;/body>
& lt;/html>
css
2.
*{保证金:0;填充:0;}
一个{
颜色:# 999;
文字修饰:没有;
位置:绝对的;
上图:50%;
变换:translateY (-50%);
background - color: rgba (0, 0, 0。4);
}
答:{徘徊
颜色:# f8b62b;
}
我{
字体大小:50 px;
Helvetica字体类型:“Helvetica Neue”, Arial,无衬线;
}
#箱{
身高:482 px;
宽度:830 px;
背景颜色:红色;
位置:绝对的;
左:50%;
上图:50%;
变换:翻译(-50%,-50%);
溢出:隐藏;
}
# box_content {
高度:100%;
宽度:100%;
光标:指针;
}
# box_content img {
位置:绝对的;
vertical-align:最高;
高度:100%;
宽度:100%;/*左:830 px; */}
.box_img {
宽度:100%;
高度:100%;
位置:绝对的,}
.box_control_right {
位置:绝对的;
右:0;
}
.box_control_left {
位置:绝对的;
左:0;
}
ul {
位置:绝对的;
底部:30 px;
左:50%;
变换:translateX (-50%);
显示:flex;
justify-content: space-evenly;
}
李{ul>
list-style:没有;
宽度:16 px;
高:16 px;
background - color: # fff;
保证金:0 3 px;
这个特性:50%;
光标:指针;
}
ul> li.current {
background - color: darkorange;
}
js 3.
窗口。addEventListener(“负载”,函数(ev) {//轮播图
(函数(){//1。获取需要标签
var boxContent=myTool。$ (' box_content ');
var contentImg=boxContent.children;
var boxControl=myTool。$ (' box_control ');
var controlBottom=boxControl.children [2];//2。全局索引
var我现在=0;//3。根据图片个数动态添加下方图片指示器
(var=0;我& lt;contentImg.length;我+ +){
李var=document.createElement(‘李’);
controlBottom.children controlBottom.insertBefore (li [0]);
}//4。让第一个图片指示器选中
controlBottom.children [0]。className=暗鼻啊?//5。让除了第一张图片以外所有图片进入待显示区域
var scrollImgWidth=boxContent.offsetWidth;
(var=1;j & lt;contentImg.length;j + +) {
contentImg [j] .style。左=scrollImgWidth +“px”;
}//6。处理左右两侧点击
var cPrev=boxControl.children [0];
var cNext=boxControl.children [1];//6.1点击左边
cPrev。addEventListener(“点击”,函数(evt) {//1。当前可视区域图片快速右移//2。上一张幻灯片出现在可视区域左侧//3。让这张幻灯片做动画进入
myTool.slowMoving (contentImg(我现在),{‘左’:scrollImgWidth}, null);
我现在,//边界处理
如果我现在& lt;0){
我现在=contentImg。长度- 1;
}
contentImg .style我现在。左=-scrollImgWidth +“px”;
myTool.slowMoving (contentImg(我现在),{‘左’:0},null);//切换索引
changeIndex ();
},假);//6.2点击右边
cNext。addEventListener(“点击”,函数(evt) {
播放();
},假);//7。下侧图片指示器操作
(var k=0;k & lt;controlBottom.children.length;k + +) {//取出单个李标签
var bottomLi=controlBottom.children [k];//监听鼠标进入
(函数(指数){
bottomLi。addEventListener(鼠标悬停,函数(evt) {//比较当前索引和点击指示器位置关系
如果(指数比;我现在){
myTool.slowMoving (contentImg(我现在),{‘左’:-scrollImgWidth}, null);
contentImg .style(指数)。左=scrollImgWidth +“px”;
}else if(指数& lt;我现在){
myTool.slowMoving (contentImg(我现在),{‘左’:scrollImgWidth}, null);
contentImg .style(指数)。左=-scrollImgWidth +“px”;
}
我现在=指数;
myTool.slowMoving (contentImg(我现在),{‘左’:0});//切换索引
changeIndex ();
},假);
})(k)
}/* *
*切换索引操作
*/函数changeIndex () {
(var=0;我& lt;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
null
null
null
null
null
null
null
null
null
null
null
null
null
