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 相关文章推荐
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
Jun 04 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
Nov 04 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
js实现千分符和保留几位小数的简单实例
Aug 01 Javascript
浅谈JavaScript的闭包函数
Dec 08 Javascript
angular.js 路由及页面传参示例
Feb 24 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
Vue 中对图片地址进行拼接的方法
Sep 03 Javascript
js实现转动骰子模型
Oct 24 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 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(1)
2006/10/09 PHP
解决CodeIgniter伪静态失效
2014/06/09 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
php 常用的系统函数
2017/02/07 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
javascript性能优化之DOM交互操作实例分析
2015/12/12 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
关于List.ToArray()方法的效率测试
2016/09/30 Javascript
Angular企业级开发——MVC之控制器详解
2017/02/20 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
小程序文字跑马灯效果
2018/12/28 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
python多线程用法实例详解
2015/01/15 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
python中查看变量内存地址的方法
2015/05/05 Python
win8下python3.4安装和环境配置图文教程
2018/07/31 Python
详解django自定义中间件处理
2018/11/21 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
Python自动化操作实现图例绘制
2020/07/09 Python
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
广告学专业毕业生自荐信
2013/09/24 职场文书
物业消防安全责任书
2014/07/23 职场文书
学前教育专业求职信
2014/09/02 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技