图片轮播_图片轮播切换 - CSDN
  • 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>

    展开全文
  • HTML图片轮播

    千次阅读 2019-07-16 14:22:21
    一、简述: 如果自己创建闲麻烦可以下载源码,代码的素材也发出,在文章的下面可自行下载。 二、源码下载: https://download.csdn.net/download/m0_45329584/11348612 三、文件创建: ...<!...meta charset="utf-8...

    一、简述:

    如果自己创建闲麻烦可以下载源码,代码的素材也发出,在文章的下面可自行下载。

    二、源码下载:

    https://download.csdn.net/download/m0_45329584/11357209

    三、文件创建:

    在这里插入图片描述

    index.html:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>图片轮换</title>
    <meta name="Keywords" content="图片轮换">
    <meta name="Description" content="这是一个让人知道这个fgo英灵的网页。"> 
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/web.css">
    </head>
    
    <body>
    <!-- 图片轮播 -->
    <div class="box" >
    	<ul  id="img">
    		<li>
    			<a href="#">
    				<img src="images/1.jpg" alt="">
    				<p>瓦尔基里.斯露德</p>
    			</a>
    		</li>
    		<li>
    			<a href="#">
    				<img src="images/2.jpg" alt="">
    				<p>瓦尔基里.希露德</p>
    			</a>
    		</li>
    		<li>
    			<a href="#">
    				<img src="images/3.jpg" alt="">
    				<p>瓦尔基里.奥特琳德</p>
    			</a>
    		</li>
    		<li>
    			<a href="#">
    				<img src="images/4.jpg" alt="">
    				<p>大团结</p>
    			</a>
    		</li>
    	</ul>
    	<div class="box2" id="fangkuai">
    		<a href="javascript:void(0)" index="0"  class="first"></a>
    		<a href="javascript:void(0)" index="1"></a>
    		<a href="javascript:void(0)" index="2"></a>
    		<a href="javascript:void(0)" index="3"></a>
    	</div>
    </div>
    <!-- 图片轮播 end -->
    <script src="js/web.js"></script>
    </body>
    </html>
    

    public.css:

    /* CSS Document */
    *{
    	margin: 0;
    	padding: 0;
    	}
    ul,li,ol{
    	list-style:none;
    	}
    a{
    	text-decoration: none;
    	}
    .clears{
    	clear: both;
    	height: 0;
    	line-height: 0;
    	font-size: 0;
    	overflow: hidden;
    	}
    a img{
    	border:0;
    	}
    
    body{
    	font-family:Arial,Verdana,Microsoft yahei,Simsun;
    	}
    

    web.css:

    /* CSS Document */
    .box{
    	width: 354px;
    	height: 500px;
    	margin-top: 100px;
    	margin-left: auto;
    	margin-right: auto;
    	position: relative;/*约束绝对定位*/
    	overflow: hidden;
    }
    .box>img {
    	width: 354px;
    	height: 500px;
    }
    .box ul{
    	width: 9999px;
    	transition: all 0.5s;
    }
    .box li{
    	width: 354px;
    	height: 500px;
    	position: relative;/*约束绝对定位*/
    	float: left;
    }
    .box ul li p{
    	height: 75px;
    	width: 330px;
    	background: #535954;
    	position: absolute; /*绝对定位,盖住其他标签*/
    	left: 0px;
    	bottom: 0px;
    	line-height: 75px;
    	padding-left: 25px;
    	font-size: 18px;
    	color: #FDFDFD;
    	opacity:0.8 ;  /*透明度,0-1*/
    	filter:alpha(opacity=80); /*IE8- , 0-100*/
    }
    
    .box2{
    	position: absolute; /*绝对定位,盖住其他标签*/
    	height: 75px;
    	right: 25px;
    	bottom: 0px;
    	line-height: 75px;
    }
    .box2 a{
    	width: 15px;
    	height: 15px;
    	display: inline-block;
    	margin-right: 10px;
    	background: #FDFDFD;
    }
    .box2 .first{
    	background: #FD0004;
    }
    

    web.js:

    // JavaScript Document
    var img=document.getElementById("img");
    var fangkuai=document.getElementById("fangkuai");
    var a=fangkuai.getElementsByTagName("a");
    var p=0;//控制循环
    var timer=null;//时钟变量
    var x=1;//左右移动
    timer=setInterval(Slider,2000);
    for(var i = 0 ; i <= a.length-1 ; i++){
    	a[i].onmouseover = function(){
    		allElements();
    		this.className = "first";  //  突出当前标签
    		index = this.getAttribute("index");
    		img.style.marginLeft = -354*index + "px";
    		clearInterval(timer);
    	}
    		a[i].onmouseout = function(){
    		timer=setInterval(Slider,2000);
    		p=parseInt(index);
    	}	
    }
    function  allElements(){
    	for(var k=0 ; k <= a.length-1 ; k++){
    		a[k].className = "";  // 去掉类,复原
    	}
    }
    function Slider(){//自动播放
    	p+=x;
    	((p==0)||(p==3))&&(x=-x);
    	allElements();
    	a[p].className = "first";
    	img.style.marginLeft = -354*p+ "px";	
    }
    

    四、素材图片:

    在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

    五、效果图:

    在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

    展开全文
  • 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 实现效果:

    展开全文
  • 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>

     

    展开全文
  • Javascript实现图片轮播效果。

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

    2019-06-11 13:56:06
    二、设置轮播(当前下标) 1. 将所有的图片display : none; 2. 将当前图片 display : block 3. 将所有的小圆点 background : red 4. 将当前的小圆点 background : blue 三、添加事件 左右按钮点击事件(当前下标) ...
  • 图片轮播

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

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

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

    万次阅读 多人点赞 2015-09-16 10:49:09
    使用纯CSS3代码实现简单的图片轮播。 1.基本布局: 将5张图片左浮动横向并排放入一个div容器(#photos)内,图片设置统一尺寸,div宽度设置5个图片的总尺寸,然后放入相框容器div(#frame),相框设置1个图片的大小...
  • Jquery图片轮播幻灯片效果实现左右滚动图片切换代码
  • jQuery实现广告图片轮播切换

    千次阅读 2018-03-11 14:39:24
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt;...jQuery实现广告图片轮播切换&lt;/title&gt; &lt;style&gt; .scroll{ width:540p
  • 刚入android没多久,遇到的比较郁闷的问题就是子线程主线程的问题,更改UI界面,本想做一个图片轮播但是比较简单,然后就试试实现视频跟图片切换播放进行不停的循环播放。也用过不少控件,但是知其然不知其所以然...
  • 最近在b站上学习的时候,学到了一个用原生js实现图片轮播切换效果的实战,码下来收藏,嘻嘻嘻~ 上图是这个小实战的效果图,整个小实战所实现的功能是图片自动轮播切换、点击上下键图片切换上下图片、点击右下角圆点...
  • 这是是一款带时间轴的图片轮播切换代码。效果图如下: 在线预览 源码下载 实现的代码。 html代码: &lt;div id="decoroll2" class="imgfocus"&gt; &lt;div id="...
  • jQuery html5,全屏图片,幻灯片,图片切换图片轮播,文字和图片切换
  • JS实现图片轮播是个老生常谈的问题,也是新手的必由之路,在这里提供一种思路,供大家参考: 1.生成DIV做外框,并设置overflow:hidden; // 每个方法都必须有的 2.创建一个数组arr,放置图片地址 3.生成两个并排的...
  • 使用HTML实现图片切换/轮播

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

    千次阅读 2017-09-06 10:47:00
    图片轮播效果 导入JS html代码
1 2 3 4 5 ... 20
收藏数 297,773
精华内容 119,109
关键字:

图片轮播