风吹钰成花丶

不积小流无以成江海。

js点击轮播或者自动轮播图代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="gbk">
    <title>js点击轮播或者自动轮播</title>
    <style>
        #d{position: relative;top: -30px;}
        label{margin: -5px;}
        .one{width: 10px;height: 10px;border: 1px solid black; background-color: red;}
    </style>


    <script>
        var n =0;//图片下标 label下标
        var t=0;// 清除动画用


        function init(){
            //1.默认进来自动播放轮播图
            switchImgs();


            //2. 当鼠标移入移出不同的label切换不同的图片.
            var img = document.getElementById("img");
            var labels =document.getElementsByTagName("label");//拿到所有的label标签对象


            for(var i=0;i<labels.length;i++){//给每个label标签注册一个hover事件
                labels[i].onmouseover=function(){
                    clearTimeout(t);//停止动画
                    var b= this.innerText*1;//拿到标签上的数字
                    img.src="images/photo_0"+b+".jpg";//显示对应的图片
                    clearStyle();//清除label上的样式
                    this.className="one";//让当前的label的样式变化
                }


                labels[i].onmouseout=function(){//鼠标移出动画开始,动画从当前的图片开始动画
                    n=this.innerText*1;//获取当前label上的数字并转换成整型
                    switchImgs();
                }
            }


        }


        //默认动画,图片轮播,每个1秒切换
        function switchImgs(){
            n++;
            if(n==7){n=1;}//到达末尾的时候跳转到第一张
            var img = document.getElementById("img");
            img.src="images/photo_0"+n+".jpg";
            clearStyle();//当图片到第二张的时候,要把label1的样式清除,
            document.getElementById("i"+n).className="one";
            t=setTimeout("switchImgs()",1000);
        }


        //清除label的所有的样式
        function clearStyle(){
               var labels= document.getElementsByTagName("label");
                for(var i=0;i<labels.length;i++){
                    labels[i].className="";//让label表的classname置为空
                }
        }


    </script>
</head>
<body onload="init()">
    <div align="center">
        <img src="images/photo_01.jpg" width="400" height="500" id="img">
        <div id="d">
            <label id="i1">&nbsp;1&nbsp;</label>
            <label id="i2">&nbsp;2&nbsp;</label>
            <label id="i3">&nbsp;3&nbsp;</label>
            <label id="i4">&nbsp;4&nbsp;</label>
            <label id="i5">&nbsp;5&nbsp;</label>
            <label id="i6">&nbsp;6&nbsp;</label>
        </div>
    </div>
</body>

</html>


//自动轮播图代码


<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="gbk">
 <title>自动轮播图</title>
 <style>
  #div1{
   width: 192px;
   height: 120px;
   border: 1px solid gray;
   margin: 0 auto;
   position: relative;
   overflow: hidden;
  }
  #div1 img{
   position: absolute;
  }
 </style>
</head>
<body>
<div id="div1">
 <img src="meinv.jpng" alt="" width="192"/>
 <img src="44.jpg" alt="" width="192"/>
 <img src="video.png" alt="" width="192"/>
 <img src="images/4.jpg" alt="" width="192"/>
</div>
<div id="div2">
 
</div>
<script>
 //获取页面元素
 var div1 = document.getElementById('div1');
 var div2 = document.getElementById('div2');
 var imgs = div1.getElementsByTagName('img');
 //初始化页面图片的位置
 window.onload=function(){
  for(var i=0; i<imgs.length; i++){
   imgs[i].style.left = i*192 +'px'
  }
 };
 //轮播移动的函数
 function imgMove(){
  var b1 = false;
  for(var i = 0; i < imgs.length; i++) {
   imgs[i].style.left = imgs[i].offsetLeft-1 + 'px';
   if(imgs[i].offsetLeft==0){
    b1=true;
    if(i==0)
    imgs[imgs.length-1].style='576px';
    else
    imgs[i-1].style.left='576px'
   }
  }
  if(!b1)
   setTimeout(imgMove,20);
  else
   setTimeout(imgMove,2000);
 }
 setTimeout(imgMove,3000);
</script>
</body>
</html>


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a772116804/article/details/78791551
想对作者说点什么? 我来说一句

JS简单实现仿网页图片轮播

2017年10月30日 625KB 下载

带后台的图片轮播代码

2009年08月19日 1KB 下载

没有更多推荐了,返回首页

不良信息举报

js点击轮播或者自动轮播图代码

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭