文章详情页

Js图片点击切换轮播实现代码

【字号：大中小】日期：2024-04-28 14:15:07浏览：34作者：猪猪

图片点击切换

<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title></title> <script type='text/javascript'> window.onload=function(){var btn1=document.getElementById('pre');var btn2=document.getElementById('next');var img=document.getElementById('img1');var imgarr=['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg','images/6.jpg'];var index=0;var info=document.getElementById('pd'); info.innerHTML='一共'+imgarr.length+'张图片，当前第'+(index+1)+'张';btn1.onclick=function(){ index--; if(index<0){ index=imgarr.length-1; } img.src=imgarr[index]; info.innerHTML='一共'+imgarr.length+'张图片，当前第'+(index+1)+'张';};btn2.onclick=function(){ index++; if(index>imgarr.length-1){ index=0; } img.src=imgarr[in000dex]; info.innerHTML='一共'+imgarr.length+'张图片，当前第'+(index+1)+'张';}; }; </script> <style type='text/css'> *{padding: 0;margin:0; } .outer{width:640px;height:453px;margin:100px auto;text-align: center; } </style> </head> <body> <div class='outer'> <p id='pd'></p> <img src='https://www.haobala.com/bcjs/images/1.jpg' /> <button id='pre'>上一张</button> <button id='next'>下一张</button> </div> </body></html>

实现效果

Js图片点击切换轮播实现代码

轮播

<!DOCTYPE html><html> <head> <meta charset='UTF-8'> <title></title> <style type='text/css'> *{padding:0px;margin: 0px; } #outer{position: relative;width:660px;height:425px;margin:50px auto ;background:yellow;padding:10px 0;overflow: hidden; } #imglist{position: absolute;list-style: none;/* * 设置偏移量 * * */left:0px; } #imglist li{margin: 0 10px;float:left; } #navDiv{position: absolute;bottom: 15px;/* * 设置left值 * outer宽度 640 * navDiv宽度 30*5=125 * 640-125=515 * 515/2=257.5 * left:257.5px; */left:0; } #navDiv a{float:left;width:20px;height:20px;background:#ff1;opacity: 0.5;/*兼容IE8的透明*/filter:alpha(opacity=50);margin: 0 5px; } #navDiv a:hover{background:red; } </style> <script type='text/javascript' src='https://www.haobala.com/bcjs/tools.js'></script> <script type='text/javascript'> window.onload=function(){var imglist=document.getElementById('imglist');var navDiv=document.getElementById('navDiv');var outer=document.getElementById('outer');//获取页面所有的img标签var imgarr=document.getElementsByTagName('img');//获取页面所有的A标签var allA=document.getElementsByTagName('a');//默认显示图片的索引var index=0; //设置allA[index].style.background='black';//设置ul的长度imglist.style.width=660*imgarr.length+'px';//设置navDiv的left值navDiv.style.left=(outer.offsetWidth-navDiv.offsetWidth)/2+'px'; //定义一个定时器标识var timer;//点击超链接切换到指定的图片//为所有的超链接绑定单击响应函数for(var i=0;i<allA.length;i++){ //为每一个超链接都添加一个NUM属性 allA[i].num=i; //为超链接绑定单击响应函数 allA[i].onclick=function(){ //关闭自动切换 clearInterval(timer); //获取点击超链接的索引，并将其设置为index index=this.num; //切换图片 //imglist.style.left=index*-660+'px'; setA(); move(imglist,20,-660*index,'left',function(){ //动画执行完后，再执行自动切换 autoChange(); }); };}//自动切换图片autoChange();//创建一个方法来设置选中的Afunction setA(){ //判断是不是最后一张照片 if(index>=imgarr.length-1){ index=0; //如果是最后一张，就把imglist移到0 imglist.style.left=0+'px'; } for(var j=0;j<allA.length;j++){ //去掉内联样式，只剩下样式表的样式 allA[j].style.background=''; } allA[index].style.background='black'; }; function autoChange(){ timer=setInterval(function(){ index++; index%=imgarr.length; move(imglist,20,-660*index,'left',function(){ setA(); }); },3000);}; }; </script> </head> <body>  <div id='outer'>  <ul id='imglist'><li> <img src='https://www.haobala.com/bcjs/images/1.jpg' /></li><li> <img src='https://www.haobala.com/bcjs/images/2.jpg' /></li><li> <img src='https://www.haobala.com/bcjs/images/3.jpg' /></li><li> <img src='https://www.haobala.com/bcjs/images/4.jpg' /></li><li> <img src='https://www.haobala.com/bcjs/images/5.jpg' /></li><li> <img src='https://www.haobala.com/bcjs/images/1.jpg' /></li> </ul> <div id='navDiv'><a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a><a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a><a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a><a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a><a href='javascript:;' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' rel='external nofollow' ></a> </div> </div> </body></html>

tools.js

//动画函数/*参数 * -1.obj 对象 * -2.speed 速度 * -3.target 执行动画的目标 * -4.arrt 要变化的样式 * -5.callback:回调函数将会在动画执行完后执行 */ function move(obj,speed,target,arrt,callback){ //关闭上一次定时器 clearTimeout(obj.timer); //判断速度的正负值 //如果从0向800移动则为正 //如果从800向0移动则为负 var current=parseInt(getStyle(obj,arrt)); if(current>target){ speed=-speed; } //开启一个定时器 //为obj添加一个timer属性，用来保存它1自己的定时器的标识 obj.timer=setInterval(function(){ //获取原来的left值 var oldvalue=parseInt(getStyle(obj,arrt)); //在旧值的基础上增加 var newvalue=oldvalue+speed; if(speed<0&&newvalue<target||speed>0&&newvalue>target) { newvalue=target; } obj.style[arrt]=newvalue+'px'; //当元素到达target关闭定时器 if(newvalue===target||newvalue===target){ clearTimeout(obj.timer); //动画执行完执行函数 callback&&callback(); } },30);};

实现效果

Js图片点击切换轮播实现代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。

JavaScript

上一条：JS实现audio音频剪裁剪切复制播放与上传(步骤详解)下一条：JS的时间格式化和时间戳转换函数示例详解

相关文章：

1. 如何理解Python中包的引入2. Django中的DateTimeField和DateField实现3. Django后端按照日期查询的方法教程4. Java实现三子棋小游戏5. Python 使用 PyQt5 开发的关机小工具分享6. SpringBoot 开发提速神器 Lombok+MybatisPlus+SwaggerUI7. PHP开发大型Web应用浅析8. ASP中RecordSet Open和Connection.Execute一些区别与细节分享9. AspectJ领导人Adrian Colyer跳槽到Spring10. 怎样编写可维护的面向对象 JavaScript 代码

排行榜

					
					如何理解Python中包的引入
Django中的DateTimeField和DateField实现
Django后端按照日期查询的方法教程
Django websocket原理及功能实现代码
Java实现三子棋小游戏
深入分析PHP设计模式
AspectJ领导人Adrian Colyer跳槽到Spring
JavaScript实时更新当前的时间的示例代码
Django中template for如何使用方法
Python 使用 PyQt5 开发的关机小工具分享
SpringBoot 开发提速神器 Lombok+MybatisPlus+SwaggerUI
				

热门标签