资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

JavaScript如何实现动态的轮播图效果

这篇文章将为大家详细讲解有关JavaScript如何实现动态的轮播图效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联建站主营汝南网站建设的网络公司,主营网站建设方案,重庆App定制开发,汝南h5成都小程序开发搭建,汝南网站营销推广欢迎汝南等地区企业咨询

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

JavaScript如何实现动态的轮播图效果

图1

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

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

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

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

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

代码1：


 //设置图像的父级元素定位为向左600px，即是左移一个图片的宽度
 //设置的是5张图片自动轮播，此处会有7张图片，并且红色代码表示的图片和   蓝色代码表示的图片是相同的。这是因为每张图片都有向前和向后两种单击
  事件，要使第一张图片向前单击显示第五张图片，就需要在其前方添加第五
  张图片，避免在第一张图片单击向左时显示空白；同理，在第五张图片之
  后也要添加第一张图片，使其实现平稳过渡
 //设置相对应的按钮，并未按钮添加对应的自定义属性 index
< //此处的a表示的是箭头；<(左箭头)，>(右箭头) >

在上例中，图片的宽是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;i5){
index=1;
}
buttonsShow();
animate(-600);
}


//点击任意一个小圆点就切换到所对应的图片
for(var i=0;i
关于“JavaScript如何实现动态的轮播图效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
            
            
                        

            网页名称：JavaScript如何实现动态的轮播图效果            

            浏览地址：http://www.cdkjz.cn/article/pjehhd.html
        
        

            返回首页
            了解更多建站资讯
        

    



    
相关资讯

    

        
    





    

        

            

                多年建站经验
            

            

                
多一份参考，总有益处

                
 联系快上网，免费获得专属《策划方案》及报价

                

                    
咨询相关问题或预约面谈，可以通过以下方式与我们联系

                    
 大客户专线   成都：13518219792
                          座机：028-86922220
                    

                

            

        

        

            在线咨询
            提交需求
        

    





    

        

            

                友情链接
                交换友情链接
            

            

                

                    内江做网站成都展柜制作成都定制网站app软件开发新型地坪材料成都网站建设公司景区导示设计制作微信小程序成都二枢机房创新互联                

            

        

    

    

        

            
成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

            

                成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

            
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图