详解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 相关文章推荐
ajax更新数据后,jquery、jq失效问题
Mar 16 Javascript
防止xss和sql注入:JS特殊字符过滤正则
Apr 18 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
JQuery和html+css实现带小圆点和左右按钮的轮播图实例
Jul 22 jQuery
node中Express 动态设置端口的方法
Aug 04 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
自定义vue组件发布到npm的方法
May 09 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 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
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
php车辆违章查询数据示例
2016/10/14 PHP
laravel配置Redis多个库的实现方法
2019/04/10 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
Prototype Function对象 学习
2009/07/12 Javascript
js 覆盖和重载 函数
2009/09/25 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
JavaScript获取当前网页标题(title)的方法
2015/04/03 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
从零学习node.js之express入门(六)
2017/02/25 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
angularJS实现不同视图同步刷新详解
2018/10/09 Javascript
vue 弹窗时 监听手机返回键关闭弹窗功能(页面不跳转)
2019/05/10 Javascript
解决Vue中 父子传值 数据丢失问题
2019/08/27 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
javascript解析json格式的数据方法详解
2020/08/07 Javascript
Python统计日志中每个IP出现次数的方法
2015/07/06 Python
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python机器学习之决策树分类详解
2017/12/20 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
numpy 声明空数组详解
2019/12/05 Python
Python定时器线程池原理详解
2020/02/26 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
考试作弊被抓检讨书
2014/01/10 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
学习雷锋月活动总结
2014/07/03 职场文书
三方股东合作协议书
2014/10/28 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
Python并发编程实例教程之线程的玩法
2021/06/20 Python