详解JavaScript实现动态的轮播图效果


Posted in Javascript onApril 29, 2019

利用javascript能实现常见的动态的网页轮播图效果,如下图1所示:

详解JavaScript实现动态的轮播图效果

图1

实现该轮播图有以下几个要点:

(1)在左右两侧各有一个箭头,分别指的是向左和向右切换,即点击相应的位置就会切换到该图片之前(或之后)的一张图片

(2)在图片的下方有一排圆形按钮,每个按钮有各自的单击事件,点击任意一个按钮就切换到对应的图片

(3)不点击图片时,图片会自动播放,即有一个图片轮播效果

首先可以写出大概的HTML代码为代码1:

代码1:

<div id="container">
<div id="list" style="left: -600px;"> //设置图像的父级元素定位为向左600px,即是左移一个图片的宽度
<img src="images/16.jpg" alt="1"> //设置的是5张图片自动轮播,此处会有7张图片,并且红色代码表示的图片和 <img src="images/12.jpg" alt="1">  蓝色代码表示的图片是相同的。这是因为每张图片都有向前和向后两种单击
<img src="images/13.jpg" alt="2">  事件,要使第一张图片向前单击显示第五张图片,就需要在其前方添加第五
<img src="images/14.jpg" alt="3">  张图片,避免在第一张图片单击向左时显示空白;同理,在第五张图片之
<img src="images/15.jpg" alt="4">  后也要添加第一张图片,使其实现平稳过渡
<img src="images/16.jpg" alt="5">
<img src="images/12.jpg" alt="5">
</div>
<div id="buttons"> //设置相对应的按钮,并未按钮添加对应的自定义属性 index
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="#" rel="external nofollow" rel="external nofollow" id="prev" class="arrow"><</a> //此处的a表示的是箭头;<(左箭头),>(右箭头)
<a href="#" rel="external nofollow" rel="external nofollow" id="next" class="arrow">></a>
</div>

在上例中,图片的宽是600px,高是400px;

然后再设置其CSS样式为代码2:

代码2:

*{margin: 0;padding: 0;text-decoration: none;} //设置所有元素的基本样式

body{padding: 20px;}
#container{
position: relative; //设置最外层的div元素的定位为相对定位,即是相对与未设置定位之前的位置进行定位
width: 600px;
height: 400px;
border: 3px solid #333;
overflow: hidden; //设置容器的宽高,并将溢出部分设置为隐藏
}
#list{
position: absolute; //设置图片所在的父级div的定位为绝对定位,即是相对于已定位的父级元素进行定位
z-index: 1; //设置该div的显示层次
width: 4200px; //该div是所有图片的父级元素,因此其宽高的设置应该包含所有的图片
height: 400px;
}
#list img{
float: left; //设置图片的显示的显示方式,为向左浮动
width: 600px;
height: 400px;
}
#buttons{
position: absolute; //设置屏幕下方的所有圆点的定位方式,相对于容器元素进行绝对定位
left: 250px; //距离父级已进行定位的元素的左侧距离为250px
bottom: 20px;
z-index: 2; //设置圆点的显示层级为2,即是在图片div的上方
height: 10px;
width: 100px;
}
#buttons span{
float: left;
margin-right: 5px;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 50%; //半径为50%,即是设置为圆点显示
background: #333;
cursor: pointer;
}
#buttons .on{
background: orangered;
}
.arrow{
position: absolute; //设置按钮的定位方式,即是相对与容器元素进行绝对定位
top: 180px;
z-index: 2;
display: none;
width: 40px;
height: 40px;
font-size: 36px;
font-weight: bold;
line-height: 39px;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,.3);
cursor: pointer;
}
.arrow:hover{
background-color: rgba(0,0,0,.7);
}
#container:hover .arrow{
display: block;
}
#prev{
left: 20px;
}
#next{
right: 20px;
}*/

设置完基本的样式之后,其显示效果如图2所示:

详解JavaScript实现动态的轮播图效果

图2

此时需要给特定的元素添加事件,如下列的代码3所示:

代码3:

window.onload=function(){
var list=document.getElementById('list'); //获取图片元素的父级元素,并命名为list
var prev=document.getElementById('prev'); //获取左箭头
var next=document.getElementById('next'); //获取右箭头

function animate(offset){ //设置一个名为animate的函数,该函数接收一个参数

var newleft=parseInt(list.style.left)+offset; //获取图片的父级元素的左侧的定位值,并加上传入的参数offset

if(newleft<-3000){ //图片的父级div在移动的过程中,显示的图片的定位都是负值,如图3所示

list.style.left= -600+'px'; //但图片显示到五张图片上的最后一张时,自动跳转到第一张图片
}else if(newleft>-600){ //当在第一张图片上单击向左的按钮时,自动跳转到最后一张
list.style.left= -3000+'px';
}else{
list.style.left=newleft+'px';
}
}

 函数animate()中获取的是style.left,是相对左边获取距离,所以第一张图后style.left都为负值,如图3所示:

详解JavaScript实现动态的轮播图效果

图3

结合上述的代码3,我们可设置向左和向右的按钮的单击事件,如代码4所示:

代码4:

prev.onclick=function(){ //向左的单击事件

animate(600);
}


next.onclick=function(){ //向右的单击事件
animate(-600)
}


var timer;
function play(){
timer=setInterval(function(){ //设置间歇调用,时间间隔为1500毫秒
next.onclick() //此处是自动向右切换,如果想设置为向左切换,把next换为prev即可
},1500)
}
play(); //实现自动调用


var container=document.getElementById('container'); //获取最外层的容器元素
function stop(){ 
clearInterval(timer);
}
container.onmouseover=stop; //当鼠标移动到上方时,清除定时器
container.onmouseout=play; //当鼠标从容器元素上方移走时,进行自动轮播


var buttons=document.getElementById('buttons').getElementsByTagName('span');
var index=1;


function buttonsShow(){
for(var i=0;i<buttons.length;i++){
if(buttons[i].className=='on'){ //如果某个span设置了class='on',那么就将其的class属性设置为空
buttons[i].className='';
}
}
//数组从0开始,故index需要-1
buttons[index-1].className='on'; //设置下一个span的class属性值为'on',即是高亮显示
}


prev.onclick=function(){
index-=1;
if(index<1){
index=5;
}
buttonsShow();
animate(600);
}
next.onclick=function(){
//由于上面定时器的作用,index会一直递增下去,而元圆点只有5个,因此需要先做出判断
index+=1;
if(index>5){
index=1;
}
buttonsShow();
animate(-600);
}


//点击任意一个小圆点就切换到所对应的图片
for(var i=0;i<buttons.length;i++){

(function(i){ //使用立即执行函数
buttons[i].onclick=function(){
var clickIndex=parseInt(this.getAttribute('index'));
var offset=600*(index-clickIndex);
animate(offset); //存放鼠标点击之后的位置,用于小圆点的正常显示
index=clickIndex;
buttonsShow();
}
})(i) 
} 
}

以上所述是小编给大家介绍的JavaScript实现动态的轮播图效果详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
Aug 27 Javascript
javascript实现获取浏览器版本、浏览器类型
Dec 02 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
解决vue项目报错webpackJsonp is not defined问题
Mar 14 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 #Javascript
实现elementUI表单的全局验证的方法步骤
Apr 29 #Javascript
深入浅析Vue 中 ref 的使用
Apr 29 #Javascript
详解微信小程序实现跑马灯效果(附完整代码)
Apr 29 #Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 #Javascript
微信小程序调用微信支付接口的实现方法
Apr 29 #Javascript
vue实现微信分享链接添加动态参数的方法
Apr 29 #Javascript
You might like
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
XP折叠菜单&amp;仿QQ2006菜单
2006/12/16 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
2016/08/20 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
vue插件vue-resource的使用笔记(小结)
2017/08/04 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
2018/08/16 Javascript
vue2 设置router-view默认路径的实例
2018/09/20 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
vue动态配置模板 'component is'代码
2019/07/04 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
python绘图方法实例入门
2015/05/19 Python
Python yield 使用方法浅析
2017/05/20 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Python使用Turtle库绘制一棵西兰花
2019/11/23 Python
python opencv 检测移动物体并截图保存实例
2020/03/10 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
详解px单位html5响应式方案
2018/03/08 HTML / CSS
Strathberry苏贝瑞中国官网:西班牙高级工匠手工打造
2020/10/19 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
挂靠协议书范本
2014/04/22 职场文书
计算机求职信
2014/07/02 职场文书
关于运动会的广播稿
2014/09/22 职场文书
三方协议书
2015/01/27 职场文书
Python利器openpyxl之操作excel表格
2021/04/17 Python
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python
Anaconda安装pytorch和paddle的方法步骤
2022/04/03 Python
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏
SQL Server数据库的三种创建方法汇总
2023/05/08 MySQL