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 相关文章推荐
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
javascript匀速动画和缓冲动画详解
Oct 20 Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 Javascript
js实现右键菜单功能
Nov 28 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
JS实现简单日历特效
Jan 03 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中的常用魔术方法总结
2013/08/02 PHP
PHP代码优化的53个细节
2014/03/03 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
php unlink()函数使用教程
2018/07/12 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
ext 同步和异步示例代码
2009/09/18 Javascript
Jquery iframe内部出滚动条
2010/02/11 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
浅析JavaScript访问对象属性和方法及区别
2015/11/16 Javascript
js实现常见的工具条效果
2017/03/02 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
发布Angular应用至生产环境的方法
2018/12/10 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
使用C语言扩展Python程序的简单入门指引
2015/04/14 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
Python面向对象程序设计示例小结
2019/01/30 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
解决Tensorboard可视化错误:不显示数据 No scalar data was found
2020/02/15 Python
python实现简单井字棋小游戏
2020/03/05 Python
python 动态绘制爱心的示例
2020/09/27 Python
用 python 进行微信好友信息分析
2020/11/28 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
关于十八大的演讲稿
2014/09/15 职场文书
传单、海报早OUT了,另类传单营销方案送给你!
2019/07/15 职场文书
Nginx配置使用详解
2022/07/07 Servers