JavaScript 实现图片轮播

墨蓝 2022-05-17 12:40 211阅读 0赞

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

## **原理描述：** ##

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

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

![70][]

当进行一次轮播后，显示变为下图 显示2：

![70 1][]

依次类推。

## **代码实现：** ##

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 实现效果：

![70 2][]

[70]: /images/20220517/038970c1c694446eb21a5a356228b425.png
[70 1]: /images/20220517/d91f9f2a5e444571b09b872a21697452.png
[70 2]: /images/20220517/f68a7409be0d455890d3d1c3d845b230.png

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

还没有评论，来说两句吧...

相关阅读

相关 html图片翻转轮播,JavaScript实现旋转轮播图

最近一直在学习JavaScript，然后看到旋转轮播图的案例，就尝试着用js做了一个简单的轮播图，因为无法显示动态效果，所以就放个截图： ![95ec81ffb6f91c49

一时失言乱红尘/ 2022年10月06日 09:52/ 0 赞/ 397 阅读

相关简单html实现图片轮播,JavaScript实现简易轮播图

JavaScript实现简易轮播图 Html代码块： ![1.jpg][] ![2.jpg][1.jpg] ![3.jpg][1.jpg] ![4.jpg][1.jp

小鱼儿/ 2022年10月06日 09:47/ 0 赞/ 278 阅读

相关原生javascript实现图片轮播效果

最近学习javascript实现动画效果，就用原生的javascript代码实现了图片轮播的效果，供大家参考学习。 1.首先设置图片轮播的地方（id=ban

淡淡的烟草味﹌/ 2022年08月23日 05:43/ 0 赞/ 182 阅读

相关 JavaScript实现图片轮播

//实现照片轮播 1.在没有按钮触发的情况下，四张图片搁几秒，就会实现自动轮播触发按钮单击事件，对应button的照片跳转到我们的窗体div界面

朴灿烈づ我的快乐病毒、/ 2022年08月21日 05:48/ 0 赞/ 186 阅读

相关 javaScript实现图片轮播

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

ゝ一纸荒年。/ 2022年08月10日 11:49/ 0 赞/ 152 阅读

相关 JavaScript实现图片轮播组件

效果：自动循环播放图片，下方有按钮可以切换到对应图片。添加一个动画来实现图片切换。鼠标停在图片上时，轮播停止，出现左右两个箭头，点击可以切换图片。

柔情只为你懂/ 2022年07月13日 12:37/ 0 赞/ 209 阅读

相关原生javascript图片轮播实现

初学javascript，尝试着制作动画-图片轮播。（实现方法挺多）思路：添加多张图片，依次让图片显示。依次显示需要每隔一段时间去更新，因此选择了setInterv

柔情只为你懂/ 2022年06月09日 22:59/ 0 赞/ 238 阅读

相关 JavaScript 实现图片轮播

今天给大家介绍下怎么用 JS 实现图片轮播效果。原理描述：使用JS实现轮播的原理是这样的：假设初始的情况，下图一个网格代表一个图，初始时，显示1 ： ![7

墨蓝/ 2022年05月17日 12:40/ 0 赞/ 212 阅读

相关 javascript图片轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

深碍√TFBOYSˉ_/ 2022年05月12日 02:44/ 0 赞/ 258 阅读

相关 Javascript实现图片轮播效果。

用js做一个简单的图片轮播效果。思路如下：用JavaScript来控制轮播的图片的样式（margin-left）。用计时器来控制图片的自动播放。鼠标点击控制图片的翻页。

Love The Way You Lie/ 2022年01月16日 02:51/ 0 赞/ 441 阅读