图片轮播_图片轮播代码 - CSDN
精华内容
参与话题
  • JavaScript 实现图片轮播

    万次阅读 热门讨论 2018-08-11 18:02:53
    今天给大家介绍下怎么用 JS 实现图片轮播效果。 原理描述: 使用JS实现轮播的原理是这样的:  假设初始的情况,下图一个网格代表一个图,初始时,显示1 : 当进行一次轮播后,显示变为下图 显示2: 依次类...

    今天给大家介绍下怎么用 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 实现效果:

    展开全文
  • 图片轮播的实现(详解两种方法)

    万次阅读 2018-08-11 22:26:56
    今天带来的是前端里图片轮播的实现,可以说,这两种方法都很简单,尤其第一种,只要是有点基础的应该都可以看懂,这也是小编花费了一定时间想到的代码较少的方式。(图片我放在文末了) 当然也有更复杂的图片,也会...

    今天带来的是前端里图片轮播的实现,可以说,这两种方法都很简单,尤其第一种,只要是有点基础的应该都可以看懂,这也是小编花费了一定时间想到的代码较少的方式。(图片我放在文末了)

    当然也有更复杂的图片,也会有人说第一种方法无法实现链接跳转,其实我只是实现了图片轮播,如果可以做的到轮播,相信聪明的你也可以做到链接跳转的。第二种方法就完全可以加上链接跳转,但是相对第一种方法,第二种理解起来更复杂,但其实只要学会了浮动和层的概念就可以看懂,很像PS中的层的概念。

    1、通过背景实现(带按钮变换图片)

    首先,是主体部分:

    <body onload="showImg()">
    		<div id="ad">
    			<div id="num">
    				<input type="button" name="num1" id="num1" value="1" onclick="showImg(1)"/>
    				<input type="button" name="num2" id="num2" value="2" onclick="showImg(2)"/>
    				<input type="button" name="num3" id="num3" value="3" onclick="showImg(3)"/>
    				<input type="button" name="num4" id="num4" value="4" onclick="showImg(4)"/>
    			</div>
    		</div>
    </body>

    然后看看style设置:

    <style type="text/css">
    			* {
    				margin: 0;
    				padding: 0;
    			}
    			
    			#ad {
    				width: 360px;
    				height: 190px;
    				margin: 0 auto;
    			}
    </style>

    最后是js部分(这是精髓):

    <script type="text/javascript">
    			var temp = 1; //用来保存哪个图片显示
    			function showImg(changNum) { //让背景图片显示
    				if (Number(changNum)) {//判断点击了要显示图片的按钮
    					clearTimeout(t);
    					temp = changNum;
    				}
    				document.getElementById("ad").style.backgroundImage = "url(images/ad-0" + temp + ".jpg)";
    				temp++;
    				if(temp == 5) {
    					temp = 1;
    				}
    				t = setTimeout("showImg()", 1000);//刷新时间
    			}
    </script>

    2、通过浮动实现(不带按钮,也可以实现带按钮,看懂了第一种你可以自己动手写入按钮)

    主体部分:

    <body onload="hiddenImg()">
    		<div class="wide">
    			<img src="images/1.jpg" />
    			<div id="ad0">
    				<img src="images/2.gif"/>
    			</div>
    			<div id="ad1">
    				<img src="images/ad-01.jpg"/>
    			</div>
    			<div id="ad2">
    				<img src="images/ad-02.jpg"/>
    			</div>
    			<div id="ad3">
    				<img src="images/ad-03.jpg"/>
    			</div>
    			<div id="ad4">
    				<img src="images/ad-04.jpg"/>
    			</div>
    		</div>
    </body>

    style部分:

    <style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			.wide{
    				width: 360px;
    				height: 190px;
    				margin: 0 auto;
    				background-color: yellow;
    			}
    			#ad0,#ad1,#ad2,#ad3,#ad4{
    				position: absolute;
    				left: 490;
    				top: 0;
    				z-index: 1;
    			}
    </style>

    js部分:

    <script type="text/javascript">
    			var temp = 0;//用来保存应该从哪个图片开始隐藏
    			function showImg(){//让所有图片显示
    				for (var i = 0; i <= 4;i++ ) {
    					document.getElementById("ad"+i+"").style.display = "block";
    				}
    			}
    			function hiddenImg(){
    				showImg();//先让所有图片显示
    				for (var i = temp;i <= 4;i++ ) {//判断需要隐藏的图片
    					document.getElementById("ad"+i+"").style.display = "none";
    				}
    				temp++;
    				if (temp == 6) {
    					temp = 0;
    				}
    				setTimeout("hiddenImg()",1000);
    			}
    </script>

    图片如下:

    展开全文
  • H5图片切换,js图片轮播,js图片自动切换

    没有插入图片,效果如下:



    注意:下面代码为PC端显示样式,如果要放在手机端,需要微调下style

    #wrapper、#banner、.bg width 自行修改,我的手机端iphone5s 为 width: 300px; 与之对应的changeTo(num)方法里也应该修改为300,,var goLeft = num * 300;

    每张图片也对应为width="300px"

    <li><a href="#"><img src="./img/test3.jpg" width="300px"
    height="200px" alt="胃黏膜损伤">
    </a>
    </li>

    课程推荐:

    企业必用的sql语句优化,手把手学习oracle数据库,一周轻松掌握并精通。

    https://m.qlchat.com/topic/details?topicId=2000000204413360

    <!DOCTYPE html>
    <html>
    <head>
    <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title>图片轮播 jq(左右切换)</title>
    <styletype="text/css">
      body,div,ul,li,a,img{margin: 0;padding: 0;}
      ul,li{list-style: none;}
      a{text-decoration: none;}
      #wrapper{position: relative;margin: 30px auto;width: 400px;height: 200px;}
      #banner{position:relative;width: 400px;height: 200px;overflow: hidden;}
      .imgList{position:relative;width:2000px;height:200px;z-index: 10;overflow: hidden;}
      .imgList li{float:left;display: inline;}
      #prev,
      #next{position: absolute;top:80px;z-index: 20;cursor: pointer;opacity: 0.2;filter:alpha(opacity=20);}
      #prev{left: 10px;}
      #next{right: 10px;}
      #prev:hover,
      #next:hover{opacity: 0.5;filter:alpha(opacity=50);}
      .bg{position: absolute;bottom: 0;width: 400px;height: 40px;z-index:20;opacity: 0.4;filter:alpha(opacity=40);background: black;}
      .infoList{position: absolute;left: 10px;bottom: 10px;z-index: 30;}
      .infoList li{display: none;}
      .infoList .infoOn{display: inline;color: white;}
      .indexList{position: absolute;right: 10px;bottom: 5px;z-index: 30;}
      .indexList li{float: left;margin-right: 5px;padding: 2px 4px;border: 2px solid black;background: grey;cursor: pointer;}
      .indexList .indexOn{background: red;font-weight: bold;color: white;}
    </style>
    </head>
    <body>
      <divid="wrapper"><!-- 最外层部分 -->
        <divid="banner"><!-- 轮播部分 -->
          <ulclass="imgList"><!-- 图片部分 -->
            <li><ahref="#"><imgsrc="./img/test1.jpg"width="400px"height="200px"alt="puss in boots1"></a></li>
          <li><ahref="#"><imgsrc="./img/test2.jpg"width="400px"height="200px"alt="puss in boots2"></a></li>
          <li><ahref="#"><imgsrc="./img/test3.jpg"width="400px"height="200px"alt="puss in boots3"></a></li>
          <li><ahref="#"><imgsrc="./img/test4.jpg"width="400px"height="200px"alt="puss in boots4"></a></li>
          <li><ahref="#"><imgsrc="./img/test5.jpg"width="400px"height="200px"alt="puss in boots5"></a></li>
          </ul>
          <imgsrc="./img/prev.png"width="20px"height="40px"id="prev">
          <imgsrc="./img/next.png"width="20px"height="40px"id="next">
          <divclass="bg"></div><!-- 图片底部背景层部分-->
          <ulclass="infoList"><!-- 图片左下角文字信息部分 -->
            <liclass="infoOn">puss in boots1</li>
            <li>puss in boots2</li>
            <li>puss in boots3</li>
            <li>puss in boots4</li>
            <li>puss in boots5</li>
          </ul>
          <ulclass="indexList"><!-- 图片右下角序号部分 -->
            <liclass="indexOn">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
          </ul>
        </div>
      </div>
      <scripttype="text/javascript"src="./js/jquery.min.js"></script>
      <scripttype="text/javascript">
      var curIndex = 0, //当前index
          imgLen = $(".imgList li").length; //图片总数
         // 定时器自动变换2.5秒每次
      var autoChange = setInterval(function(){
        if(curIndex <imgLen-1){
          curIndex ++;
        }else{
          curIndex= 0;
        }
        //调用变换处理函数
        changeTo(curIndex);
      },2500);
       //左箭头滑入滑出事件处理
      $("#prev").hover(function(){
        //滑入清除定时器
        clearInterval(autoChange);
      },function(){
        //滑出则重置定时器
        autoChangeAgain();
      });
      //左箭头点击处理
      $("#prev").click(function(){
        //根据curIndex进行上一个图片处理
        curIndex = (curIndex > 0) ? (--curIndex) : (imgLen - 1);
        changeTo(curIndex);
      });
      //右箭头滑入滑出事件处理
      $("#next").hover(function(){
        //滑入清除定时器
        clearInterval(autoChange);
      },function(){
        //滑出则重置定时器
        autoChangeAgain();
      });
      //右箭头点击处理
      $("#next").click(function(){
        curIndex = (curIndex <imgLen - 1) ? (++curIndex) : 0;
        changeTo(curIndex);
      });
      //对右下角按钮index进行事件绑定处理等
      $(".indexList").find("li").each(function(item){
        $(this).hover(function(){
          clearInterval(autoChange);
          changeTo(item);
          curIndex= item;
        },function(){
          autoChangeAgain();
        });
      });
      //清除定时器时候的重置定时器--封装
      function autoChangeAgain(){
          autoChange= setInterval(function(){
          if(curIndex < imgLen-1){
            curIndex ++;
          }else{
            curIndex= 0;
          }
        //调用变换处理函数
          changeTo(curIndex);
        },2500);
        }
      function changeTo(num){
        vargoLeft = num * 400;
        $(".imgList").animate({left: "-" + goLeft + "px"},500);
        $(".infoList").find("li").removeClass("infoOn").eq(num).addClass("infoOn");
        $(".indexList").find("li").removeClass("indexOn").eq(num).addClass("indexOn");
      }
      </script>
    </body>
    </html>

    展开全文
  • JS实现图片轮播效果(自动和手动)

    万次阅读 多人点赞 2020-03-30 17:23:18
    本次轮播效果图如下:具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换以下为实现代码:首先是html代码:&lt;!DOCTYPE html&gt; &lt;html lang="en"...

    本次轮播效果图如下:

    具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换  3.底下小按钮切换

    ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS实现图片轮播效果

    以下为实现代码:

    首先是html代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>最简单的轮播效果</title>
    </head>
    <body>
    <div class="box" id="box">
        <div class="inner">
            <!--轮播图-->
            <ul>
                <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
            </ul>
            <ol class="bar">
                小按钮数量无法确定,由js动态生成
            </ol>
            <!--左右焦点-->
            <div id="arr">
                  <span id="left"> <</span>
                  <span id="right">></span>
            </div>
    
        </div>
    </div>
    
    </body>
    </html>
    
     

    接下来是css样式:

    <style>
            * {
                margin: 0;
                padding: 0
            }
            .box {
                width: 500px;
                height: 300px;
                border: 1px solid #ccc;
                margin: 100px auto;
                padding: 5px;
    
            }
            .inner{
                width: 500px;
                height: 300px;
                position: relative;
                overflow: hidden;
            }
            .inner img{
                width: 500px;
                height: 300px;
                vertical-align: top
            }
            ul {
                width: 1000%;
                position: absolute;
                list-style: none;
                left:0;
                top: 0;
            }
            .inner li{
                float: left;
    
            }
    
            ol {
                position: absolute;
                height: 20px;
                right: 20px;
                bottom: 20px;
                text-align: center;
                padding: 5px;
            }
            ol li{
                display: inline-block;
                width: 20px;
                height: 20px;
                line-height: 20px;
                background-color: #fff;
                margin: 5px;
                cursor: pointer;
    
            }
            ol .current{
                background-color: red;
            }
            #arr{
                display: none;
            }
            #arr span{
                width: 40px;
                height: 40px;
                position: absolute;
                left: 5px;
                top: 50%;
                margin-top: -20px;
                background: #fff;
                cursor: pointer;
                line-height: 40px;
                text-align: center;
                font-weight: bold;
                font-family: '黑体';
                font-size: 30px;
                color: #000;
                opacity: 0.5;
                border: 1px solid #fff;
            }
            #arr #right {
                right: 5px;
                left: auto;
            }

    第三部分是最主要的js代码:

    <script>
        /**
         *
         * @param id  传入元素的id
         * @returns {HTMLElement | null}  返回标签对象,方便获取元素
         */
        function my$(id) {
            return document.getElementById(id);
        }
    
        //获取各元素,方便操作
        var box=my$("box");
        var inner=box.children[0];
        var ulObj=inner.children[0];
        var list=ulObj.children;
        var olObj=inner.children[1];
        var arr=my$("arr");
        var imgWidth=inner.offsetWidth;
        var right=my$("right");
        var pic=0;
        //根据li个数,创建小按钮
        for(var i=0;i<list.length;i++){
            var liObj=document.createElement("li");
    
            olObj.appendChild(liObj);
            liObj.innerText=(i+1);
            liObj.setAttribute("index",i);
    
            //为按钮注册mouseover事件
            liObj.onmouseover=function () {
                //先清除所有按钮的样式
    
                for (var j=0;j<olObj.children.length;j++){
                    olObj.children[j].removeAttribute("class");
                }
                this.className="current";
                pic=this.getAttribute("index");
                animate(ulObj,-pic*imgWidth);
            }
    
        }
    
    
        //设置ol中第一个li有背景颜色
        olObj.children[0].className = "current";
        //克隆一个ul中第一个li,加入到ul中的最后=====克隆
        ulObj.appendChild(ulObj.children[0].cloneNode(true));
    
        var timeId=setInterval(onmouseclickHandle,1000);
        //左右焦点实现点击切换图片功能
        box.onmouseover=function () {
            arr.style.display="block";
            clearInterval(timeId);
        };
        box.onmouseout=function () {
            arr.style.display="none";
            timeId=setInterval(onmouseclickHandle,1000);
        };
    
        right.onclick=onmouseclickHandle;
        function onmouseclickHandle() {
            //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
            //所以,如果用户再次点击按钮,用户应该看到第二个图片
            if (pic == list.length - 1) {
                //如何从第6个图,跳转到第一个图
                pic = 0;//先设置pic=0
                ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
            }
            pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
            animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
            //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
            if (pic == list.length - 1) {
                //第五个按钮颜色干掉
                olObj.children[olObj.children.length - 1].className = "";
                //第一个按钮颜色设置上
                olObj.children[0].className = "current";
            } else {
                //干掉所有的小按钮的背景颜色
                for (var i = 0; i < olObj.children.length; i++) {
                    olObj.children[i].removeAttribute("class");
                }
                olObj.children[pic].className = "current";
            }
        }
        left.onclick=function () {
            if (pic==0){
                pic=list.length-1;
                ulObj.style.left=-pic*imgWidth+"px";
            }
            pic--;
            animate(ulObj,-pic*imgWidth);
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            //当前的pic索引对应的按钮设置颜色
            olObj.children[pic].className = "current";
        };
        
        //设置任意的一个元素,移动到指定的目标位置
        function animate(element, target) {
            clearInterval(element.timeId);
            //定时器的id值存储到对象的一个属性中
            element.timeId = setInterval(function () {
                //获取元素的当前的位置,数字类型
                var current = element.offsetLeft;
                //每次移动的距离
                var step = 10;
                step = current < target ? step : -step;
                //当前移动到位置
                current += step;
                if (Math.abs(current - target) > Math.abs(step)) {
                    element.style.left = current + "px";
                } else {
                    //清理定时器
                    clearInterval(element.timeId);
                    //直接到达目标
                    element.style.left = target + "px";
                }
            }, 10);
        }
    </script>

    所有用图片如下:

    1.jpg

    2.jpg

    3.jpg

    4.jpg

    5.jpg

    下面是完整的代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>最简单的轮播效果</title>
        <style>
            * {
                margin: 0;
                padding: 0
            }
            .box {
                width: 500px;
                height: 300px;
                border: 1px solid #ccc;
                margin: 100px auto;
                padding: 5px;
    
            }
            .inner{
                width: 500px;
                height: 300px;
                position: relative;
                overflow: hidden;
            }
            .inner img{
                width: 500px;
                height: 300px;
                vertical-align: top
            }
            ul {
                width: 1000%;
                position: absolute;
                list-style: none;
                left:0;
                top: 0;
            }
            .inner li{
                float: left;
    
            }
    
            ol {
                position: absolute;
                height: 20px;
                right: 20px;
                bottom: 20px;
                text-align: center;
                padding: 5px;
            }
            ol li{
                display: inline-block;
                width: 20px;
                height: 20px;
                line-height: 20px;
                background-color: #fff;
                margin: 5px;
                cursor: pointer;
    
            }
            ol .current{
                background-color: red;
            }
            #arr{
                display: none;
            }
            #arr span{
                width: 40px;
                height: 40px;
                position: absolute;
                left: 5px;
                top: 50%;
                margin-top: -20px;
                background: #fff;
                cursor: pointer;
                line-height: 40px;
                text-align: center;
                font-weight: bold;
                font-family: '黑体';
                font-size: 30px;
                color: #000;
                opacity: 0.5;
                border: 1px solid #fff;
            }
            #arr #right {
                right: 5px;
                left: auto;
            }
        </style>
    </head>
    <body>
    <div class="box" id="box">
        <div class="inner">
            <!--轮播图-->
            <ul>
                <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
    
            </ul>
    
            <ol class="bar">
    
            </ol>
            <!--左右焦点-->
            <div id="arr">
                        <span id="left">
                            <
                        </span>
                <span id="right">
                            >
                        </span>
            </div>
    
        </div>
    </div>
    <script>
        /**
         *
         * @param id  传入元素的id
         * @returns {HTMLElement | null}  返回标签对象,方便获取元素
         */
        function my$(id) {
            return document.getElementById(id);
        }
    
        //获取各元素,方便操作
        var box=my$("box");
        var inner=box.children[0];
        var ulObj=inner.children[0];
        var list=ulObj.children;
        var olObj=inner.children[1];
        var arr=my$("arr");
        var imgWidth=inner.offsetWidth;
        var right=my$("right");
        var pic=0;
        //根据li个数,创建小按钮
        for(var i=0;i<list.length;i++){
            var liObj=document.createElement("li");
    
            olObj.appendChild(liObj);
            liObj.innerText=(i+1);
            liObj.setAttribute("index",i);
    
            //为按钮注册mouseover事件
            liObj.onmouseover=function () {
                //先清除所有按钮的样式
    
                for (var j=0;j<olObj.children.length;j++){
                    olObj.children[j].removeAttribute("class");
                }
                this.className="current";
                pic=this.getAttribute("index");
                animate(ulObj,-pic*imgWidth);
            }
    
        }
    
    
        //设置ol中第一个li有背景颜色
        olObj.children[0].className = "current";
        //克隆一个ul中第一个li,加入到ul中的最后=====克隆
        ulObj.appendChild(ulObj.children[0].cloneNode(true));
    
        var timeId=setInterval(onmouseclickHandle,1000);
        //左右焦点实现点击切换图片功能
        box.onmouseover=function () {
            arr.style.display="block";
            clearInterval(timeId);
        };
        box.onmouseout=function () {
            arr.style.display="none";
            timeId=setInterval(onmouseclickHandle,1000);
        };
    
        right.onclick=onmouseclickHandle;
        function onmouseclickHandle() {
            //如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
            //所以,如果用户再次点击按钮,用户应该看到第二个图片
            if (pic == list.length - 1) {
                //如何从第6个图,跳转到第一个图
                pic = 0;//先设置pic=0
                ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
            }
            pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
            animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
            //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
            if (pic == list.length - 1) {
                //第五个按钮颜色干掉
                olObj.children[olObj.children.length - 1].className = "";
                //第一个按钮颜色设置上
                olObj.children[0].className = "current";
            } else {
                //干掉所有的小按钮的背景颜色
                for (var i = 0; i < olObj.children.length; i++) {
                    olObj.children[i].removeAttribute("class");
                }
                olObj.children[pic].className = "current";
            }
        }
        left.onclick=function () {
            if (pic==0){
                pic=list.length-1;
                ulObj.style.left=-pic*imgWidth+"px";
            }
            pic--;
            animate(ulObj,-pic*imgWidth);
            for (var i = 0; i < olObj.children.length; i++) {
                olObj.children[i].removeAttribute("class");
            }
            //当前的pic索引对应的按钮设置颜色
            olObj.children[pic].className = "current";
        };
    
        //设置任意的一个元素,移动到指定的目标位置
        function animate(element, target) {
            clearInterval(element.timeId);
            //定时器的id值存储到对象的一个属性中
            element.timeId = setInterval(function () {
                //获取元素的当前的位置,数字类型
                var current = element.offsetLeft;
                //每次移动的距离
                var step = 10;
                step = current < target ? step : -step;
                //当前移动到位置
                current += step;
                if (Math.abs(current - target) > Math.abs(step)) {
                    element.style.left = current + "px";
                } else {
                    //清理定时器
                    clearInterval(element.timeId);
                    //直接到达目标
                    element.style.left = target + "px";
                }
            }, 10);
        }
    </script>
    </body>
    </html>

     

    展开全文
  • HTML图片轮播

    千次阅读 2019-07-16 14:22:21
    一、简述: 如果自己创建闲麻烦可以下载源码,代码的素材也发出,在文章的下面可自行下载。 二、源码下载: https://download.csdn.net/download/m0_45329584/11348612 三、文件创建: ...<!...meta charset="utf-8...
  • 效果图: 思路分析: 1、开启一个定时器  方法名  功能 window.s
  • Javascript实现图片轮播效果。

    万次阅读 多人点赞 2019-06-14 23:22:01
    用js做一个简单的图片轮播效果。 思路如下:用JavaScript来控制轮播的图片的样式(margin-left)。用计时器来控制图片的自动播放。鼠标点击控制图片的翻页。 效果图如下。具有以下功能:1.自动图片轮播 2.左右切换...
  • day19-三位轮播,淡入淡出,横向滚动,
  • 图片轮播

    千次阅读 2019-03-28 20:29:09
    一、淡入淡出 轮播特点: 实现图片自动以淡入淡出的方式轮播,当鼠标悬停在图片上面的时候轮播停止;...图片的淡入淡出轮播,可以理解为每一张图片切换到最上面的时候透明度由0慢慢变为1; <!DOCTYPE html&g...
  • html+css+js实现图片轮播

    万次阅读 2018-11-20 17:24:10
    通过js让margin-left的值改变来实现图片轮播; &lt;body&gt; &lt;div class="warp"&gt; &lt;div class="broadcast" id="broadcast"&gt..
  • jQuery自适应图片轮播代码_自适应图片切换代码
  • JS 轮播图片切换(定时器)

    千次阅读 多人点赞 2019-09-22 18:47:43
    JS 轮播图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换。 上次的图片切换的链接:https://blog.csdn.net/qq_38318589/article/details/99050117
  • Android实现图片轮播切换

    千次阅读 2014-03-20 23:46:28
    利用Android的ViewFlipper和AnimationUtils实现图片带有动画的轮播切换,其中当点击“上一张”图片时,切换到上一张图片;当点击“下一张”图片时,切换到下一张图片。其效果图如下: 1、设置布局文件activity_...
  • 用JS实现图片切换、定时器、轮播

    千次阅读 2019-09-09 18:43:44
    图片切换 实现功能: 当点击“下一页”时,跳转到下一张图片; 当点击“上一页”时,跳转到上一张照片; 显示当前页/总页数,如:2/6。 <!DOCTYPE html> <html> <head> <meta charset=...
  • Qt之实现图片轮播效果

    万次阅读 多人点赞 2018-10-30 16:25:14
    今天文章讲述的是如何用Qt实现图片轮播的效果,其实我们经常在网页中看到各种广告就是使用了图片轮播,实现小区域内嵌入多个广告的效果。 下面是CSDN页面中两种常见的图片轮播效果。基本上就是定时自动切换广告页面...
  • Jquery 广告图片轮播切换

    千次阅读 2019-01-03 11:01:45
     2、单击左右箭头时,显示上一个/下一个图片,当前数字背景为橙色,其他数字背景为#333333,第一个/最后一个图片显示时,单击箭头时继续显示轮播图片  3、定时1秒换一张图片,轮播出图片,直到最后一张时换第一张...
  • 使用HTML实现图片切换/轮播

    万次阅读 多人点赞 2018-03-08 15:51:23
    实现中国天气网中全国降水量预报图的切换轮播。点击图中左下方的长方形按钮可以切换三个时段降水量的预报图,点击图中左下方的播放按钮自动轮播三张预报图。 2、代码实现 HTML &lt;head&gt; &...
  • 图片轮播带小圆点选择左右切换

    千次阅读 2017-09-06 10:47:00
    图片轮播效果 导入JS html代码
  • 带数字的图片切换+轮播

    千次阅读 2017-03-07 18:18:59
    带数字的图片切换+轮播 亲测
  • 一、首先是html部分 &lt;section class="scroll_sec"&gt; &lt;div class="banner_container"&gt; &lt;ul class="banner"&gt; &...&
1 2 3 4 5 ... 20
收藏数 306,477
精华内容 122,590
关键字:

图片轮播