这篇文章主要介绍“js怎么实现相册翻页,滚动,切换,轮播功能”,在日常操作中,相信很多人在js怎么实现相册翻页,滚动,切换,轮播功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”js怎么实现相册翻页,滚动,切换,轮播功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
专业从事成都网站制作、网站建设,高端网站制作设计,微信小程序,网站推广的成都做网站的公司。优秀技术团队竭力真诚服务,采用H5场景定制+CSS3前端渲染技术,成都响应式网站建设公司,让网站在手机、平板、PC、微信下都能呈现。建站过程建立专项小组,与您实时在线互动,随时提供解决方案,畅聊想法和感受。
1.相册左右点击翻页功能
实现步骤
1.需要一个HTML标签img,添加一张图片。
2.然后需要添加一个js事件onmouseover,使每次鼠标移到图片上指针都会随左右发生变化。
3.***需要添加一个点击事件,根据鼠标的在左边还是右边,判断是应该上一页还是下一页翻动相册。
HTML代码:
<body> <div> <img src="img/pic1.jpg" id = "bigimg" onmouseover="upNext(this)" width="300" height="300"> </div> </body>
JS代码:
<script type="text/javascript"> var arr = new Array(); arr[0] = "1.jpg"; arr[1] = "2.jpg"; arr[2] = "3.jpg"; arr[3] = "4.jpg"; arr[4] = "5.jpg"; var index = 0; function upNext(bigimg) { var action; var width = bigimg.width; var height = bigimg.height; bigimg.onmousemove = function () { if (window.event.offsetX < width / 2) { action = 'left' bigimg.style.cursor = 'url(img/arr_left.cur),auto';//将鼠标指针更换成向左指向箭头 } else { bigimg.style.cursor = 'url(img/arr_right.cur),auto'; action = 'right'; } } bigimg.onmouseup = function () { if (action == 'left') { if(index==0) return ; else index--; } else { if(index == 4) return; else index ++ ; } this.src = 'img/pic'+arr[index]; } } </script>
!!此处需要注意,有些浏览器并不兼容event事件。
2.自动切换功能
实现步骤:
1.首先还是需要一个img标签,显示一张图片。
2.需要一个数组,记录每张图片的路径,设置,跳转间隔时间。
3.添加一个js方法,根据数组下标,更改图片src。利用setInterval方法循环执行。
HTML:
<body> <img src="img/pic1.jpg" width="427" height="219" id="showpic" /> </body>
js:
<script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=3000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]="5.jpg"; setInterval(changeImg,timeInterval);//每隔timeInterval时间,执行一次changeImg事件 function changeImg() { var obj=document.getElementById("showpic"); if (curIndex==arr.length-1) { curIndex=0; } else { curIndex+=1; } obj.src="img/pic"+arr[curIndex]; } </script>
3.循环滚动功能(右移)
实现步骤:
1.我们需要对html进行布局,将所有要显示的图片都放在一行以内。此处注意:行内所有图片的宽度需大于外部容器的大小,否则不能达到预想效果。
2.设置滚动事件,宽度,滚动方向。此处注意,滚动速度,数字越大,滚动的越慢(每间隔一段时间执行,数字越大间隔时间越长,滚动速度越慢);滚动的方向其实就是if else中的
简单的逻辑判断以及自增自减实现的。
3.第三部分,我们需要添加js事件,让鼠标放到滚动图片上时,时滚动终止;鼠标离开时,继续滚动。
HTML:
!!此处添加需要展示的所有图片。布局不仅限于table标签,多种html标签都能实现。
<div id=demo style="overflow:hidden;width: 300px; height: 100px;"> <table> <tr> <td id=demo1 valign=top> <table align=left cellpadding=0 cellspace=0 border=0> <tr> <td> <img src="img/jg.jpg"> </td> <td> <img src="img/fxz.jpg"> </td> <td> <img src="img/gh.jpg"> </td> <td> <img src="img/yj.jpg"> </td> <td> <img src="img/zzh.jpg"> </td> </tr> </table> </td> <td id=demo2 valign=top ><td> </tr> </table> </div>
js:
<script> var speed=30 ;//设置滚动速度 demo2.innerHTML=demo1.innerHTML ; demo.scrollLeft=demo.scrollWidth ; function Marquee(){ if(demo.scrollLeft<=0) demo.scrollLeft+=demo2.offsetWidth; else{ demo.scrollLeft--; } } var MyMar=setInterval(Marquee,speed) ; demo.onmouseover=function() {clearInterval(MyMar);} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed);} </script>
4.相册简单轮播实现
实现步骤:
1.首先对html进行图片布局,使得上面一个有一个大的img标签,下面排列若干个小的img标签。
2.我们需要添加两个js事件,分别在鼠标移到小img标签和移出小img标签时产生效果。
3.在鼠标移到小img标签上时,使大的img图片src变化,并且使小img标签的border属性值颜色发生改变,在鼠标移出时颜色改变回来。
!!此处注意,大家需要使用简单的css进行页面的排版与装饰,也可以躲在css上下些功夫,使页面更漂亮。
HTML:
<body> <div><img src="img/pic1.jpg" width="320" height="300" id="bigimg"></div> <div> <ul> <li><img src="img/pic1.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> <li><img src="img/pic2.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> <li><img src="img/pic3.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> <li><img src="img/pic4.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> <li><img src="img/pic5.jpg" width="60" height="60" onmouseover="rep(this);" onmouseout="recover(this)"></li> </ul> </div> </body>
js:
<script type="text/javascript"> function rep(obj){ document.getElementById("bigimg").src = obj.src ; obj.style.border = "2px solid blue" ; } function recover(obj){ obj.style.border = "2px solid black" ; } </script>
到此,关于“js怎么实现相册翻页,滚动,切换,轮播功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
本文名称:js怎么实现相册翻页,滚动,切换,轮播功能
本文来源:https://www.cdcxhl.com/article40/pdccho.html
成都网站建设公司_创新互联,为您提供动态网站、域名注册、企业建站、企业网站制作、品牌网站建设、面包屑导航
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联