温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

js怎么实现相册翻页,滚动,切换,轮播功能

发布时间:2021-08-02 21:46:16 来源:亿速云 阅读:315 作者:chen 栏目:web开发

这篇文章主要介绍“js怎么实现相册翻页,滚动,切换,轮播功能”,在日常操作中,相信很多人在js怎么实现相册翻页,滚动,切换,轮播功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”js怎么实现相册翻页,滚动,切换,轮播功能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

 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怎么实现相册翻页,滚动,切换,轮播功能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js
AI