JavaScript实现图片轮播特效


Posted in Javascript onOctober 23, 2019

今天给大家介绍下怎么用 JS 实现图片轮播效果。

原理描述:

使用JS实现轮播的原理是这样的:

假设初始的情况,下图一个网格代表一个图,初始时,显示1 :

JavaScript实现图片轮播特效

当进行一次轮播后,显示变为下图 显示2:

JavaScript实现图片轮播特效

依次类推。

代码实现:

1 JS 代码:

<script type="text/javascript">
 window.οnlοad=function(){
 //获得ul的元素
 var imgList=document.getElementById("imgList");
 //获得图片的数组
 var imgArr=document.getElementsByTagName("img");
 var navId=document.getElementById("navId");
 var outer=document.getElementById("outer");
 imgList.style.width=520*imgArr.length+"px";
 //设置navId的位置 使其居中
 navId.style.left=(outer.offsetWidth-navId.offsetWidth)/2+"px";
 //得到所有的a 标签 如果有其他的A的话 这里需要注意要使用navId子元素的a 
 var allA=document.getElementsByTagName("a");
 var index=0;
 allA[index].style.backgroundColor='black';//设置默认的a为黑色
 for(var i=0;i<allA.length;i++){
  allA[i].num=i;
  //alert(allA[i].num);
  allA[i].οnclick=function(){
  clearInterval(timer);
  index=this.num;
  /* imgList.style.left= -520*index+"px"; */
  setA();
  move(imgList,"left",-520*index,50,function(){
   autoChange();
  });
  };
 }
 
 function setA(){
  //alert(index);
  //当indcx值比图片的数目多的时候 就归0
  if(index>=imgArr.length-1){
  index=0;
  imgList.style.left=0;
  } 
  for(var i=0;i<allA.length;i++){
  //去掉未点击的颜色 仍然保留a : hover有用
  allA[i].style.backgroundColor="";
  }
  allA[index].style.backgroundColor="black";
 }
 var timer;
 function autoChange(){
  
  timer=setInterval(function(){
  index++;
  index%=imgArr.length;
  move(imgList,"left",-520*index,20,function(){
   setA();
   });
  },2000); 
 }
 autoChange();

//可以根据 target 参数进行判断 向哪个方向移动
 function move(obj,attr,target,speed,callback){
  var current=parseInt(getStyle(obj,attr));
  //alert(current);
  //根据目标的位置来判定 speed的值是正是负
  if(current>target){
  speed=-speed;
  }
  //自定义对象定时器 防止对象之间的混乱操作 
  clearInterval(obj.timer);
  //alert(oldValue);
  obj.timer=setInterval(function(){
  var oldValue=parseInt(getStyle(obj,attr));
  var newVal=oldValue+speed;
  //如果移动的越界 进行重置
  if((speed<0 && newVal<=target) || (speed>0 && newVal>=target)){
   newVal=target;
  }
  obj.style[attr]=newVal+"px";
  if(newVal==target){
   clearInterval(obj.timer);
   callback && callback();//回掉函数 先判断 有就执行 没有不执行
  } 
  },30);
 }
 
 //obj:获取样式元素
 //name:获取样式名
 function getStyle(obj,name){
  if(window.getComputedStyle){
  return getComputedStyle(obj,null)[name];
  }else{
  return obj.currentStyle[name];
  }
 }
 }
</script>

2  HTML 代码:

<div id="outer">
 <ul id="imgList">
 <li><img src="img/1.jpg"></li>
 <li><img src="img/2.jpg"></li>
 <li><img src="img/3.jpg"></li>
 <li><img src="img/1.jpg"></li><!-- 增加这个为了实现轮播无缝切换 -->
 </ul>
 <div id="navId">
 <a href="javascript:0" ></a>
 <a href="javascript:0" ></a>
 <a href="javascript:0" ></a>

 </div>
</div>

3 CSS代码:

<style type="text/css">
 *{
 margin:0px;
 padding:0px;
 }
 #outer{
 width:520px;
 height:500px;
 margin:50px auto;
 background-color:greenyellow;
 padding:10px 0;
 /* 开启相对定位*/ 
 position:relative;
 overflow:hidden;/* 将超出的部分隐藏 */
 /* border:3px solid greenyellow */
 }
 #imgList{
 /*去除li的点*/
 list-style:none;
 /*开启绝对定位 */
 position:absolute;
 /*设置ul的宽度*/
 /* width:1560px; */
 }
 #imgList li{
 /*为图片设置浮动*/
 float:left;
 margin:0 10px;/*设置左右外边距*/
 }
 #navId{
 /* 开启绝对定位 */
 position:absolute;
 /*设置位置*/
 bottom:15px;
 /*设置该块的左偏移量,使其可以居中
 由于outer 宽 520 每个链接宽15+2*5=25 目前共三张图,则共宽75*/
 /* left:212px; */
 }
 #navId a{
 width:15px;
 height:15px;
 float:left;/* 设置超链接浮动 */
 margin:0 5px;
 background-color:red;
 opacity:0.5;
 /*兼容 IE8 设置透明度*/
 filter:alpha(opacity=50);
 }
 /*设置鼠标移入效果*/
 #navId a:hover{
 background-color:black;
 }
 
</style>

4 实现效果:

JavaScript实现图片轮播特效

更多关于轮播图效果的专题,请点击下方链接查看学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
JavaScript window.location对象
Nov 14 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
微信小程序 购物车简单实例
Oct 24 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 Javascript
vue-dialog的弹出层组件
May 25 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
详解Vue webapp项目通过HBulider打包原生APP
Jun 29 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
JavaScript实现世界各地时间显示
Sep 07 Javascript
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 #jQuery
微信小程序实现多行文字超出部分省略号显示功能
Oct 23 #Javascript
Vue实现数据请求拦截
Oct 23 #Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 #Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 #Javascript
原生JS无缝滑动轮播图
Oct 22 #Javascript
Vue实现开心消消乐游戏算法
Oct 22 #Javascript
You might like
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
PHP以mysqli方式连接类完整代码实例
2014/07/15 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
PHP 输出缓冲控制(Output Control)详解
2016/08/25 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
javascript URL锚点取值方法
2009/02/25 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
跨域资源共享 CORS 详解
2016/04/26 Javascript
微信小程序商城项目之商品属性分类(4)
2017/04/17 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
基于node.js之调试器详解
2017/08/22 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
手动实现vue2.0的双向数据绑定原理详解
2021/02/06 Vue.js
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
浅谈cv2.imread()和keras.preprocessing中的image.load_img()区别
2020/06/12 Python
Casetify官网:自制专属手机壳、iPad护壳和Apple Watch手表带
2018/05/09 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
日语专业推荐信
2013/11/12 职场文书
nginx配置文件使用环境变量的操作方法
2021/06/02 Servers
spring boot实现文件上传
2022/08/14 Java/Android
Redis主从复制操作和配置详情
2022/09/23 Redis
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS