JavaScript实现图片轮播特效

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

原理描述:

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

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

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

依次类推。

代码实现:

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图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

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

(0)

相关推荐

  • JS实现简易图片轮播效果的方法

    本文实例讲述了JS实现简易图片轮播效果的方法.分享给大家供大家参考.具体如下: 这里使用JS制作简易图片轮播效果: 制作比较粗糙,使用的图片是width:660ppx,height:550px; 效果图如下: 代码部分如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; char

  • js 图片轮播(5张图片)

    演示地址:http://img.jb51.net/online/picPlayer/picplay.htm 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199

  • 原生javascript实现图片轮播效果代码

    看到BlueDream在他博客上写的javascript仿QQ滑动菜单的效果,代码实在是优雅,相比较差别一下就凸显了,下次再把他代码的精髓偷过来,嘿嘿. [原理简述] html和css跟JQuery实现图片轮播效果里面的一样,略去.主要是几个公共函数,渐显和渐失,用闭包实现.至于主体逻辑部分,非常一般. [程序源码] 贴几个公共函数算了,fadeIn,渐显,fadeOut,渐失 复制代码 代码如下: function id(name) {return document.getElementByI

  • js图片自动轮播代码分享(js图片轮播)

    1.利用图片width显示位置来播放图片,技术:.offsetWidth .aBtn[i].index = i .setInterval() .oUl[0].style.left =  .onclick()2.利用数组放入图片经行轮播,技术:setInterval().没有onclick() 图片轮播12js.html 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http:

  • 带左右箭头图片轮播的JS代码

    轮播图实现效果见下图,图片能自己轮播,点击左右按钮进行翻页轮播,鼠标悬停图片或者标题上,停止轮播: 效果图为: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/19

  • 原生js和jquery实现图片轮播特效

    (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

  • 原生js和jquery实现图片轮播淡入淡出效果

    图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的 简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后

  • 简单的js图片轮换代码(js图片轮播)

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <meta http-equiv=&quo

  • 最简单的JavaScript图片轮播代码(两种方法)

    通过改变每个图片的opacity属性: 素材图片: 代码一: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: ; padding: ; } ul { list-style-type: non

  • js图片轮播效果实现代码

    首先给大家看一看js图片轮播效果,如下图 具体思路: 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒钟index递增一次.调用一次切换图片函数 提示: 1. index不能一直无限制的递增下去,需做判断 2.调用切换图片函数时需将递增之后的index作为参数传过去 三.定义图片切换函数 提示:   1.遍历所有放数字索引的li,将每个li上的类去掉.   2.根据传递过来的index值找到对应的li给

随机推荐