介绍 & lt; div id=癰anner"比;
& lt; div类=皐"祝辞
& lt; !——左右箭头——比;
& lt;跨类=癷confont icon-zuojiantou"> & lt; style>
* {
保证金:0;
填充:0;
list-style:没有;
}
.w {
宽度:1000 px;
身高:600 px;
保证金:100 px汽车0;
位置:相对;
溢出:隐藏;
}
ul {
身高:600 px;
}
@keyframes leftCome {
从{
左:-100%;
}
, {
左:0;
}
}
@keyframes leftOut {
从{
左:0;
}
, {
左:100%;
}
}
@keyframes rightCome {
从{
左:100%;
}
, {
左:0;
}
}
@keyframes rightOut {
从{
左:0;
}
, {
左:-100%;
}
}
ul李{
位置:绝对的;
宽度:1000 px;
}
ul李img {
宽度:100%;
身高:600 px;
}
.iconfont {
颜色:白色;
位置:绝对的;
字体大小:30 px;
上图:钙(50% - 15 px);
background - color: rgba (216、216、216、0.23);
光标:指针;
透明度:0;
过渡:透明度。3线性;
z - index: 999;
}
.iconfont:{徘徊
颜色:淡绿色;
}
.icon-zuojiantou {
左:0;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}
.icon-youjiantou {
右:0;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
# circleContainer {
位置:绝对的;
底部:10 px;
左:钙(50% - 30 px);
}
李# circleContainer {
显示:inline-block;
宽度:20 px;
高度:20 px;
这个特性:50%;
背景颜色:白色;
margin-right: 5 px;
}
# circleContainer .change {
背景颜色:淡绿色;
不必:0 0 10 px # 7 dd07d;
}
& lt;/style> & lt; script>
让定时器;
窗口。onload=function () {
计时器=setInterval(函数(){
arrow_left ();
},3000)
};
让箭=document.querySelectorAll (“.iconfont");
让w=document.querySelector (“.w");
让圆=document.querySelectorAll (“ol li");
w.addEventListener (“mouseenter"、功能(){
clearInterval(计时器);
箭头[0].style。不透明度=?”;
箭头[1].style。不透明度=?”;
})；
w.addEventListener (“mouseleave"、功能(){
箭头[0].style。不透明度=?”;
箭头[1].style。不透明度=?”;
计时器=setInterval(函数(){
arrow_left ();
},3000)
})；
圆[0]。className=癱hange";
让location_i=0;
让李=document.querySelectorAll (“ul li");//移动函数
函数移动(我direcTion_) {
如果(direcTion_===皉ight") {
如果(location_i !==我){
李[我].style。动画=皉ightCome 0缓解forwards";
李location_i .style。动画=皉ightOut 0缓解forwards";
location_i=我;
num=我;
}
其他}{
如果(location_i !==我){
李[我].style。动画=發eftCome 0缓解forwards";
李location_i .style。动画=發eftOut 0缓解forwards";
location_i=我;
num=我;
}
}
(让我=0;i
这篇文章主要介绍JS如何实现轮播图效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
具体内容如下
<强>需求:
自动轮播,鼠标移入轮播停止,移出继续,小圆点点击切图,左右箭头切图
<>强效果图:
<强>思路
通过编写过渡动画实现轮播效果,图片的出现动画以及移出动画。显示区的图片移出,切换的图进入分别调用动画,程序关键点:哪张图应该进入,哪张图应该移出。
自动轮播,左右箭头翻图,底部小圆点点击翻图。
1。小圆点点击
为什么先做小圆点呢?做小圆点点击功能时,我们能够清晰的知道哪张图片应该切换过来,哪张图片应该移开,例如,显示区是第一张图时,点击第二个原点,那么当前的第一张图应该移开,第二图应该进入。
2。左右箭头切换
这部分功能,我们可以这种思路,当点击左箭头时,相当于我们按顺序点击1,2,3号小圆点,只是显示区为3号图时,我们需要将下一张设置为1号图。所以加一个判断条件即可,当计数器为3时,重置为1;右边箭头相反即可顺序变为3、2、1,当当计数器为1时,重置为3只
3。自动轮播
这功能就相当于在一定的时间间隔内,点击右边箭头或者左边箭头。
HTML部分:
JS部分:
