JavaScript轮播停留效果的实现思路
一、思路
1.轮播停留与无线滚动十分类似，都是利用属性及变量控制移动实现轮播；
2.不同的是轮播停留需要添加过渡属性搭配定时器即可实现轮播停留效果；
二、步骤
1.写基本结构样式
需在末尾多添加一张与第一张相同的图片，消除切换时的抖动；
2.添加轮播停留事件 有了之前的基础，直接添加索引圈默认事件到轮播停留事件内；
注意：当轮播到最后一张时，需要消除掉过渡，这里使用setTimeout定时器，卡最后一张图片轮播完不延时，直接跳转到第一张，由于第一张和最后一张一样，所以会形成视觉盲区，看起来是连续轮播效果；
//轮播停留方法
function move() {
box.className = "box anmint";
circle[count].style.backgroundColor = "";
count++;
box.style.marginLeft = (-800 * count) + "px";
//最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换
setTimeout(function () {
if (count >= 6) {
count = 0;
box.className = "box";
//marginLeft=0之前去除过渡属性
box.style.marginLeft = "0px";
}
circle[count].style.backgroundColor = "red";
}, 500);
}
3.添加进入索引圈事件
这和淡入淡出进入索引圈事件基本一致，不同的是这里不用调用轮播停留事件，直接利用当前index来索引使图片跟随变换；注意最后要标记count=this.index值，令再次执行默认行为时是紧跟着当前显示图片向后执行默认行为；
//进入索引圈事件
for(var j=0;j<circle.length;j++){
circle[j].index=j;
circle[j].onmouseenter=function(){
for(var k=0;k<circle.length;k++){
circle[k].style.backgroundColor="";
}
this.style.backgroundColor="red";
//图片跟随移动
box.className="box anmint";
box.style.marginLeft=(-800*this.index)+"px";
count=this.index;
}
}
4.完善鼠标进入离开代码
效果图：
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS轮播停留效果</title>
<style>
*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%;}
.block{
width: 800px;
height: 400px;
margin: 80px auto;
position: relative;
border: 1px solid red;
overflow: hidden;
}
.box{
width: 5600px;
height: 400px;
float: left;
}
.anmint{
transition: all 0.5s ease-in-out;
}
img{
width: 800px;
height: 400px;
float: left;
}
.cir{
width: 150px;
height: 20px;
z-index: 7;
position: absolute;
bottom: 10px;
left: 320px;
}
.circle{
width: 10px;
height: 10px;
border: 2px solid grey;
border-radius: 50%;
float: left;
margin: 0 5px;
}
</style>
<script>
window.onload=function(){
var box=document.getElementsByClassName("box")[0];
var count=0;
//索引圈事件
var circle=document.getElementsByClassName("circle");
circle[0].style.backgroundColor="red";
var time=setInterval(function(){
move();
},2000);
//鼠标进入事件
var block=document.getElementsByClassName("block")[0];
block.onmouseenter=function(){
clearInterval(time);
};
//鼠标离开事件
block.onmouseleave=function(){
time=setInterval(function(){
move();
},2000);
};
//进入索引圈事件
for(var j=0;j<circle.length;j++){
circle[j].index=j;
circle[j].onmouseenter=function(){
for(var k=0;k<circle.length;k++){
circle[k].style.backgroundColor="";
}
this.style.backgroundColor="red";
//图片跟随移动
box.className="box anmint";
box.style.marginLeft=(-800*this.index)+"px";
count=this.index;
}
}
//轮播停留方法
function move() {
box.className = "box anmint";
circle[count].style.backgroundColor = "";
count++;
box.style.marginLeft = (-800 * count) + "px";
//最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换
setTimeout(function () {
if (count >= 6) {
count = 0;
box.className = "box";
//marginLeft=0之前去除过渡属性
box.style.marginLeft = "0px";
}
circle[count].style.backgroundColor = "red";
}, 500);
}
}
</script>
</head>
<body>
<div class="block">
<div class="box">
<img class="imgg" src="./image/box1.jpg">
<img class="imgg" src="./image/box2.jpg">
<img class="imgg" src="./image/box3.jpg">
<img class="imgg" src="./image/box4.jpg">
<img class="imgg" src="./image/box5.jpg">
<img class="imgg" src="./image/box6.jpg">
<img class="imgg" src="./image/box1.jpg">
</div>
<div class="cir">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</body>
</html>
总结
以上所述是小编给大家介绍的JavaScript轮播停留效果的思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&
-
js实现移动端轮播图效果
本文实例为大家分享了移动端轮播图效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, max
-
js实现从左向右滑动式轮播图效果
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实现第一种效果的方法. 原理 相同大小的图片并成一列,但只显示其中一张图片,其余的隐藏,通过修改left值来改变显示的图片. 点击查看效果 html部分 nav为总容器,第一个ul列表#index为小圆点列表,鼠标覆盖哪个小圆点就显现第几张图片,on是一个给小圆点添加背景颜色属性的类:第二个ul列表#
-
js轮播图无缝滚动效果
在做轮播图时如果首尾不能连起来的话,效果会有点丑,下面介绍一种我常用的方法: 先文字说明一下: 如果要展示5张图,分别为1,2,3,4,5 那么在代码的引入中是这样的:1,2,3,4,5,1 按顺序的轮播在此就不多说,重点说的是5>1和1>5的轮播 i 表示当前图片的索引 pre 表示上一张图片的按钮 next 表示下一张图片的按钮 ul 表示图片列表 (1) 5>1>2... 当"next"按钮从5到1时按顺序正常轮播,当前图片为第二个"1
-
一个简易的js图片轮播效果
一个简易的js图片轮播效果,话不多说,代码献上. 只有img标签的html代码,做测试用: <body> <img src="images/class1-1.jpg" id="img"> </body> 下面是js代码: var k=0; //当前的索引 var ss = new Array(); //数组,用来存放图片 ss[0] = "images/class1-1.jpg"; ss[1] = "
-
使用html+js+css 实现页面轮播图效果(实例讲解)
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=
-
JS 实现banner图片轮播效果(鼠标事件)
一.要实现的效果 1.点击左右可切换图片 2.点击小圆点 可切换图片 二.效果图 三.代码 1.css <style type="text/css"> body,img,span,ul,li{margin: 0;padding: 0;} #div1{width: 600px;height: 350px;margin: 150px auto;border: 10px solid #eee;position: relative;} img{width: 600px;height
-
JS轮播图实现简单代码
本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播
-
JavaScript轮播停留效果的实现思路
一.思路 1.轮播停留与无线滚动十分类似,都是利用属性及变量控制移动实现轮播: 2.不同的是轮播停留需要添加过渡属性搭配定时器即可实现轮播停留效果: 二.步骤 1.写基本结构样式 需在末尾多添加一张与第一张相同的图片,消除切换时的抖动: 2.添加轮播停留事件 有了之前的基础,直接添加索引圈默认事件到轮播停留事件内: 注意:当轮播到最后一张时,需要消除掉过渡,这里使用setTimeout定时器,卡最后一张图片轮播完不延时,直接跳转到第一张,由于第一张和最后一张一样,所以会形成视觉盲区,看起来是连续
-
如何使用JavaScript实现无缝滚动自动播放轮播图效果
在一些项目开发中,我们经常需要使用到轮播图,但是没有深入学习的情况下做轮播图是非常困难的. 思路 分成小问题来解决 1. 动态生成序号12345 页面有多少li(图片),就有多少序号 2. 点击序号.显示高亮.切换图片 2.1 给序号注册onclick事件 2.2 取消其他序号高亮显示,让当前点击的序号高亮显示 2.3 点击序号,动画的方式切换到当前点击的图片位置(设置自定义属性,记录当前索引,有了索引就可用动画进行移动) 3. 鼠标放到盒子上的时候显示左右箭头,移开时候隐藏 onmouseen
-
javascript实现图片轮播简单效果
本文实例为大家分享了javascript实现图片轮播简单效果的具体代码,供大家参考,具体内容如下 这里是css样式 * { margin: 0; padding: 0; } ul, li { list-style: none; } img { display: block;
-
JavaScript实现带有子菜单和控件的slider轮播图效果
大家或许做过(照片轮播)无限滚动图片的项目,但是,如果使用普通的滚动,当到达最后一张时,便会滚动回第一张,这是一个非常不好的用户体验.下面通过本文给大家分享基于JavaScript实现带有子菜单和控件的slider轮播图效果,具体实现代码如下所示: 实现效果: 实现原理: // 步骤 // 1. 获取事件源以及相关元素 // 2. 复制第一张图片所在的li,添加到ul的最后面 // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮 // 4. 鼠标放到ol的li上切换图片 // 5.
-
详解JavaScript实现动态的轮播图效果
利用javascript能实现常见的动态的网页轮播图效果,如下图1所示: 图1 实现该轮播图有以下几个要点: (1)在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之前(或之后)的一张图片 (2)在图片的下方有一排圆形按钮,每个按钮有各自的单击事件,点击任意一个按钮就切换到对应的图片 (3)不点击图片时,图片会自动播放,即有一个图片轮播效果 首先可以写出大概的HTML代码为代码1: 代码1: <div id="container"> <
-
JavaScript实现简单轮播图效果
本文实例为大家分享了js实现简单轮播图效果的具体代码,可以实现左右翻转,图片切换显示等效果,供大家参考,具体内容如下 效果展示: 代码展示: <!doctype html> <html> <!-- 学习功能:使用JavaScript实现图片轮播,左右翻转,图片切换显示等. author: lisa于2018-5-30 --> <title> <meta charset="utf-8"> </title> <b
-
JavaScript实现轮播图效果代码实例
这篇文章主要介绍了JavaScript实现轮播图效果代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 HTML部分: <!-- HTML部分 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>轮播图</title> <link rel="styleshe
-
JavaScript实现轮播图效果
要求: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮 点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理 图片播放的同时,下面小圆圈模块跟随一起变化 点击小圆圈,可以播放相应图片 鼠标不经过轮播图,轮播图也会自动播放图片 鼠标经过,轮播图模块,自动播放停止 代码实现: autoPlay.html(复制并保存为html文件,打开即可见效果): <!DOCTYPE html> <html lang="en"> <head> <meta
-
基于JavaScript实现轮播图效果
本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 学习笔记(学校的课设),实现了左右切换,按指示点切换.按小图标切换和自动切换,但是还有某些功能没完善,如:切换到某张图片后,左右并没有切换到前后相应的图片. 先看实现效果: 代码仅供参考: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>
-
原生javascript+CSS实现轮播图效果
本文实例为大家分享了javascript+CSS实现轮播图效果的具体代码,供大家参考,具体内容如下 1.html <ul id="banner" ></ul> 2.css ul{ list-style:none; position: absolute; padding: 0; left: 0; right: 0; bottom: 0; top:0; margin:auto; width: 800px; height:200px; } 3.js //生成轮播图 e