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 获取LI里的内容
Dec 17 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
关于js函数解释(包括内嵌,对象等)
Nov 20 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
Dec 06 Javascript
vue实现底部菜单功能
Jul 24 Javascript
vuex的module模块用法示例
Nov 12 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
jQuery实现图片切换效果
Oct 19 jQuery
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将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
实例简介PHP的一些高级面向对象编程的特性
2015/11/27 PHP
关于PHP求解三数之和问题详析
2020/11/09 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
2011/10/29 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
2015/07/08 Javascript
jQuery组件easyui对话框实现代码
2016/08/25 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
微信小程序 弹窗自定义实例代码
2017/03/08 Javascript
详解vuex 中的 state 在组件中如何监听
2017/05/23 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
ES6 async、await的基本使用方法示例
2020/06/06 Javascript
[03:45]Newbee战队出征西雅图 决战2016国际邀请赛
2016/08/02 DOTA
Python升级提示Tkinter模块找不到的解决方法
2014/08/22 Python
python 迭代器和iter()函数详解及实例
2017/03/21 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
利用python编写一个图片主色转换的脚本
2017/12/07 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
创建Django项目图文实例详解
2019/06/06 Python
Python使用Slider组件实现调整曲线参数功能示例
2019/09/06 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
6PM官网:折扣鞋、服装及配饰
2018/08/03 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
生产工厂门卫岗位职责
2014/09/26 职场文书
2014年副班长工作总结
2014/12/10 职场文书
投标售后服务承诺书
2015/04/29 职场文书