欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Js图片点击切换轮播实现代码

程序员文章站 2022-04-21 12:43:48
图片点击切换

图片点击切换

<!doctype html>
<html>
  <head> 
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
      window.onload=function(){
        var btn1=document.getelementbyid("pre");
        var btn2=document.getelementbyid("next");
        var img=document.getelementbyid("img1");
        var imgarr=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg"];
        var index=0;
        var info=document.getelementbyid("pd");
          info.innerhtml="一共"+imgarr.length+"张 图片 ,当前 第"+(index+1)+"张";        
        btn1.onclick=function(){  
          index--;
          if(index<0){
            index=imgarr.length-1;
          }
          img.src=imgarr[index];
            info.innerhtml="一共"+imgarr.length+"张 图片 ,当前 第"+(index+1)+"张";
        };
        btn2.onclick=function(){  
          index++;
          if(index>imgarr.length-1){
            index=0;
          }
          img.src=imgarr[in000dex];
          info.innerhtml="一共"+imgarr.length+"张 图片 ,当前 第"+(index+1)+"张";
        };
      };
    </script>
    <style type="text/css">
      *{
        padding: 0;
        margin:0;
      }
      .outer{
        width:640px;
        height:453px;
        margin:100px auto;
        
        text-align: center;
      }
      
    </style>
  </head>
  <body>
    <div class="outer">
      <p id="pd"></p>
      <img src="images/1.jpg" id="img1" />
      <button id="pre">上一张</button>
      <button id="next">下一张</button>
       
    </div>
  </body>
</html>

实现效果

Js图片点击切换轮播实现代码

轮播

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
      *{
        padding:0px;
        margin: 0px;
      }
      
      #outer{
        position: relative;
        width:660px;
        height:425px;
        margin:50px auto ;
        background:yellow;
        padding:10px 0;
        overflow: hidden;
      }
      #imglist{
        position: absolute;
        list-style: none;
        /*
         * 设置偏移量
         * 
         * 
         */
        left:0px;
       
      }
      #imglist li{
        margin: 0 10px;
        float:left;
      }
      
      #navdiv{
        position: absolute;
        bottom: 15px;
        /*
         * 设置left值
         * outer宽度 640
         * navdiv宽度 30*5=125
         * 640-125=515
         * 515/2=257.5
         * left:257.5px;
         */
        left:0;
        
      }
      #navdiv a{
        float:left;
        width:20px;
        height:20px;
        background:#ff1;
        opacity: 0.5;
        /*兼容ie8的透明*/
        filter:alpha(opacity=50);
        margin: 0 5px;
      }
      #navdiv a:hover{
        background:red;
      }
    </style>
    <script type="text/javascript" src="tools.js"></script>
    <script type="text/javascript">
    
      window.onload=function(){
        var imglist=document.getelementbyid("imglist");
        var navdiv=document.getelementbyid("navdiv");
        var outer=document.getelementbyid("outer");
        //获取页面所有的img标签
        var imgarr=document.getelementsbytagname("img");
        //获取页面所有的a标签
        var alla=document.getelementsbytagname("a");
        //默认显示图片的索引
        var index=0; 
        //设置
        alla[index].style.background="black";
        //设置ul的长度
        imglist.style.width=660*imgarr.length+"px";
        //设置navdiv的left值
        navdiv.style.left=(outer.offsetwidth-navdiv.offsetwidth)/2+"px";
       
        //定义一个定时器标识
        var timer;
        
        //点击超链接切换到指定的图片
        //为所有的超链接绑定单击响应函数
        for(var i=0;i<alla.length;i++){
          //为每一个超链接都添加一个num属性
          alla[i].num=i;
          //为超链接绑定单击响应函数
          alla[i].onclick=function(){
            //关闭自动切换
            clearinterval(timer);
          //获取点击超链接的索引,并将其设置为index
          index=this.num;
          //切换图片
          
          //imglist.style.left=index*-660+"px";
          
          seta();
          move(imglist,20,-660*index,"left",function(){
            //动画执行完后,再执行自动切换
             autochange();
          }); 
          
          };
        }
        //自动切换图片
        autochange();
        
        //创建一个方法来设置选中的a
        function seta(){
          
          //判断是不是最后一张照片
          if(index>=imgarr.length-1){
            index=0;
            
          //如果是最后一张,就把imglist移到0
          imglist.style.left=0+"px";
          }
          for(var j=0;j<alla.length;j++){
            //去掉内联样式,只剩下样式表的样式
            alla[j].style.background="";
          }
          
          alla[index].style.background="black";
          
        }; 
        
        function autochange(){
          timer=setinterval(function(){
            index++;
            index%=imgarr.length;
            move(imglist,20,-660*index,"left",function(){
            seta();
            });
          },3000);
        };
 
      };
      
    </script>
  </head>
  <body>
   <!--创建一个外部的div,来作为大的容器-->
    <div id="outer">
      <!--创建一个ul,用来放置图片-->
      <ul id="imglist">
        <li>
          <img src="images/1.jpg" />
        </li>
        <li>
          <img src="images/2.jpg" />
        </li>
        <li>
          <img src="images/3.jpg" />
        </li>
        <li>
          <img src="images/4.jpg" />
        </li>
        <li>
          <img src="images/5.jpg" />
        </li>
        <li>
          <img src="images/1.jpg" />
        </li>
      </ul>
      <div id="navdiv">
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
        <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a>
        
      </div>
    </div>
  </body>
</html>

tools.js

//动画函数
        /*参数
         * -1.obj 对象
         * -2.speed 速度
         * -3.target 执行动画的目标
         * -4.arrt 要变化的样式
         * -5.callback:回调函数 将会在动画执行完后执行
         */
      
        function move(obj,speed,target,arrt,callback){
          //关闭上一次定时器
            cleartimeout(obj.timer);
            //判断速度的正负值
            //如果从0向800移动则为正
            //如果从800向0移动则为负
            var current=parseint(getstyle(obj,arrt));
            if(current>target){
              speed=-speed;
            }
            //开启一个定时器
            //为obj添加一个timer属性,用来保存它1自己的定时器的标识
            obj.timer=setinterval(function(){
              
            //获取原来的left值
            var oldvalue=parseint(getstyle(obj,arrt));
            //在旧值的基础上增加
            var newvalue=oldvalue+speed;
            if(speed<0&&newvalue<target||speed>0&&newvalue>target)
            {
              newvalue=target;
            }
            obj.style[arrt]=newvalue+"px";
            //当元素到达target关闭定时器
            if(newvalue===target||newvalue===target){
            cleartimeout(obj.timer);
            //动画执行完 执行函数
            callback&&callback();
          }
          
        },30);
        };

实现效果

Js图片点击切换轮播实现代码

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