轮播图_轮播图代码 - CSDN
精华内容
参与话题
  • JS 轮播图 图片切换(定时器)

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

    标题JS 轮播图 图片切换(定时器)

    这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换。
    上次的图片切换的链接:https://blog.csdn.net/qq_38318589/article/details/99050117
    此次全部的代码都在下面,有注释,并有效果图如下:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>图片切换</title>
        <style>
            .picture {
                position: relative;
                width: 500px;
                height: 333px;
                margin: 0 auto;
                border: 2px solid rgb(231, 127, 217);
                overflow: hidden;
            }
    
            .radius {           /* 圆点所在的p (容器)  */
                width: 100%;
                height: 10px;
                position: absolute;
                bottom: 30px;
                text-align: center;
            }
    
            .pg {                         
                position: absolute;
                margin: 0;
                width: 100%;
                height: 20px;
                background-color: rgba(0, 0, 0, .4);
                text-align: center;
                font-size: 16px;
                font-weight: 600;
                color: #fff;
            }
    
            .title {
                position: absolute;
                width: 100%;
                bottom: 0px;
                text-align: center;
                font-size: 16px;
                font-weight: 600;
                color: rgb(21, 223, 72);
            }
    
            span {
                display: inline-block;
                border: 10px solid #fdfdfd;
                border-radius: 50%;
            }
    
            .active {
                border: 10px solid #656466;
            }
    
            /* 左右箭头  */
            .arrowhead-left,
            .arrowhead-right {
                position: absolute;
                width: 41px;
                height: 69px;
                font-size: 30px;
                line-height: 70px;
                text-align: center;
                color: #D6D8D4;
                background-color: rgba(0,0,0,.3);
            }
    
            .arrowhead-left {
                left: 0;
                top: 40%;
            }
    
            .arrowhead-right {
                right: 0;
                top: 40%;
            }
        </style>
    </head>
    
    <body>
        <div class="picture">
            <!-- 图片页码 -->
            <p class="pg">封面</p>
            <img src="./image/d8.jpeg" alt="">
    
            <!-- 小圆点点 -->
            <p class="radius"></p>
            <!-- 图片的下面标题 -->
            <p class="title">标题</p>
    
            <!-- 左右箭头 -->
            <div class="arrowhead-left" id="al"> < </div> 
            <div class="arrowhead-right" id="ar"> > </div>
        </div>
    
        <script>
            var address = ["./image/d1.jpeg", "./image/d2.jpeg", "./image/d3.jpeg", "./image/d4.jpeg", "./image/d5.jpeg", "./image/d7.jpeg"];
            //  var imgs = document.getElementsByTagName("img");
            var imgs = document.querySelector("img");
            var len = address.length;               //图片地址的数量为len
            var str = "";
            var pp = document.getElementsByTagName("p");//获取的是p标签的集合
            //  var pp  = document.querySelector("p");    //获取的是一个元素
            var al = document.getElementById("al");
            var ar = document.getElementById("ar");
            var n = 0 ;
    
            //添加span标签(小圆点),个数为len个
            for (i = 0; i < len; i++) {
                str += ' <span></span>'
            }
            pp[1].innerHTML = str;
           
            var spans = pp[1].getElementsByTagName('span');  //获取p[1]里所有span标签
            spans[0].className = 'active';                  //给第一个span标签添加样式 active
    
            for (i = 0; i < len; i++) {
                spans[i].index = i;              //自定义索引值
            
                spans[i].onmouseover = function () {            //鼠标指向圆点时的事件
                    for (i = 0; i < len; i++) {
                        spans[i].className = "";               //通过循环,清除所有圆点的类名
                    }
                    n=this.index ;
                    this.className = 'active';                 //给鼠标移入的圆点添加类名
                    imgs.src = address[this.index];
                    pp[0].innerHTML = [this.index + 1] + "/6";    
                    pp[2].innerHTML = "风光" + [this.index + 1];
                    
                }
               
            }
                
            ar.onclick = function () {            //右侧箭头,点击一次图片向右换一张
                n++;
               if (n>5) {
                  n=0;  
               } 
               for (i = 0; i < len; i++) {
                    spans[i].className = "";
                }
    
                spans[n].className = "active";
                imgs.src = address[n];
                pp[0].innerHTML = (n+1) + "/6";
                pp[2].innerHTML = "风光" +(n+1);
              
            }
    
            al.onclick = function () {        // //左侧箭头,点击一次图片向左换一张
              n--;
             if (n<0) {
                 n=(len-1);
             }
             for (i = 0; i < len; i++) {
                  spans[i].className = "";
              }         
              spans[n].className = "active";
              imgs.src = address[n];
              pp[0].innerHTML = (n+1) + "/6";
              pp[2].innerHTML = "风光" +(n+1);
            } 
           
           setInterval(ar.onclick,3000);             //添加定时器  setInterval(函数,间隔时间单位为毫秒)
                                                     //此次添加的函数为点击右侧箭头,间隔为3秒
        </script>
    </body>
    
    </html>
    

    与上次相比,仅仅添加了一句 setInterval(ar.onclick,3000);
    setInterval(函数,间隔时间单位为毫秒)
    ar.onclick是点击右侧箭头的函数,3000是3000毫秒,既3秒。

    (请忽略图片上的水印,随便找的一个做动图的软件,带水印-_-!)在这里插入图片描述

    展开全文
  • HTML5轮播图全代码

    万次阅读 多人点赞 2018-11-21 21:33:40
    轮播图原理大概是这样的,假定三张图片需要做轮播效果,首先需要将这三张图片并列放置,然后将这个整体并列向左移动,每当一张图片完整的从显示框走出,则将这张图片放置到最后面,循环往复就可以实现图片向左(或一...

    轮播图原理大概是这样的,假定三张图片需要做轮播效果,首先需要将这三张图片并列放置,然后将这个整体并列向左移动,每当一张图片完整的从显示框走出,则将这张图片放置到最后面,循环往复就可以实现图片向左(或一个方向)移动。然后,需要有两个定时器,一个定时器A控制三张图片整体左移速度,另一个定时器B控制每当一张完整的图片走进这个显示框就等待一到两秒得到更好的用户体验。
    我这里用三个div框当作轮播图来演示。
    在html的body中添加一个div作为显示框,然后在这个div内部添加三个子div作为图片显示。代码如下:

    <div id="box">
    	<div id="red" class="slide"></div>
    	<div id="green" class="slide"></div>
    	<div id="blue" class="slide"></div>
    </div>
    

    头部添加css样式:

    此时网页中应该是有一个黑色显示框div,内部有红、绿、蓝三个div框,三个框从上到下排列。
    第一步,需要将三张图片都并列显示。
    要实现将div挪动,且div比较方便控制每时每刻的位置(移动),只能使用相对定位,且为方便,三个子div位置移动应该是相对box,所以box应该作为相对的参照点。分别为box和slide代码添加position属性:

    #box{
    	width:100px;
    	height:100px;
    	border:1px solid black;
    	position:relative;
    }
    .slide{
    	width:100px;
    	height:100px;
    	position:absolute;
    }
    

    为整个页面添加onload加载完成事件,当浏览器打开并加载完并自动执行事件中的代码块。这部分js代码写在刚才css下面即可,保持同级结构。

      <script type="text/javascript">
    onload=function(){
    	var arr = document.getElementsByClassName("slide");
    	for(var i=0;i<arr.length;i++){
    		arr[i].style.left = i*100+"px";
    	}
    }
    </script>
    

    当页面加载完全,三个div应该并列在一起。
    接下来,需要实现将这三个div整体向左移动,使用定时器,即前面的定时器A。*onload同级下面添加如下代码:

    function LeftMove(){
    		var arr = document.getElementsByClassName("slide");//获取三个子div
    		for(var i=0;i<arr.length;i++){
    			var left = parseFloat(arr[i].style.left);
    			left-=2;
    			var width = 100;//图片的宽度
    			if(left<=-width){
    				left=(arr.length-1)*width;//当图片完全走出显示框,拼接到末尾
    			}
    			arr[i].style.left = left+"px";
    		}
    		}
    	moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器,并给自己取名
    **此时,三个div已经能够缓慢向左移动。现在需要再开启一个定时器B,并将A定时器装入到B定时器中,A的定时器时间间隔应该长于一个div完全走进显示框的时间,我这里设置为3秒。然后,将A定时器装入到方法divInterval中,B定时器调用这个方法。且为了用户体验效果更好,当一个div完全走入显示框后,应该等待一段时间,再开是移动。所以在LeftMove方法中,*if判断中还需关闭moveId这个定时器*,停止此时移动的div定时器。当3秒不到的时间后,定时器B又会开启一个新的定时器A。**
    	if处添加一句代码为:
    		
    
    if(left<=-width){
    				left=(arr.length-1)*width;//当图片完全走出显示框,拼接到末尾
    				clearInterval(moveId);
    			}
    		
    		function divInterval(){
    		moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器
    		}
    		timeId=setInterval(divInterval,3000);//设置一个3秒的定时器。
    

    到这里,轮播图基本已经实现了。然后,还需要在css样式中为box添加overflow,将超出显示框的div隐藏。

      	#box{
    width:100px;
    height:100px;
    border:1px solid black;
    position:relative;
    overflow:hidden;
    

    }

    然后为了解决当鼠标悬停在轮播图,轮播图停止轮播效果,需要在box上添加鼠标移入和移出事件。开始标签:

    <div id="box" onmouseover="stop()" onmouseout="start()">
    

    添加js代码:

    function stop(){
    	clearInterval(timeId);//鼠标停留关闭B定时器
    }
    function start(){
    	clearInterval(timeId);//重新打开一个定时前,先关闭之前定时器。
    	timeId=setInterval(divInterval,2000);//重启一个定时器
    }
    

    当浏览器窗口切出或页面切换到其他页面一段时间再回来时,轮播效果会有短暂加速(随切出时间加长而加长)。主要是因为虽然窗口切出去了,定时器依然在执行,但页面却没有将效果显示,所以切回来后会将之前的效果显示出来而加速轮播图。所以添加页面焦点事件:

    //页面失去焦点定时器停止
    onblur = function(){
    	stop();
    }
    //页面获取焦点时重启定时器
    onfocus = function(){
    	start();
    }
    

    全部代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css">
    	#box{
    		width:100px;
    		height:100px;
    		border:1px solid black;
    		position:relative;
    		overflow:hidden;
    	}
    	#red{
    		background-color:red;
    		width:100px;
    	}
    	#green{
    		background-color:green;
    		width:100px;
    	}
    	#blue{
    		background-color:blue;
    		width:100px;
    	}
    	.slide{
    		width:100px;
    		height:100px;
    		position:absolute;
    	}
    </style>
    <script type="text/javascript">
    	onload=function(){
    		var arr = document.getElementsByClassName("slide");
    		for(var i=0;i<arr.length;i++){
    			arr[i].style.left = i*100+"px";
    		}
    	}
    	function LeftMove(){
    		var arr = document.getElementsByClassName("slide");//获取三个子div
    		for(var i=0;i<arr.length;i++){
    			var left = parseFloat(arr[i].style.left);
    			left-=2;
    			var width = 100;//图片的宽度
    			if(left<=-width){
    				left=(arr.length-1)*width;//当图片完全走出显示框,拼接到末尾
    				clearInterval(moveId);
    			}
    			arr[i].style.left = left+"px";
    		}
    	}
    	function divInterval(){
    		moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器
    	}
    	
    	
    	timeId=setInterval(divInterval,2000);//设置一个3秒的定时器。
    	
    	function stop(){
    		clearInterval(timeId);
    	}
    	function start(){
    		clearInterval(timeId);
    		timeId=setInterval(divInterval,2000);
    	}
    	
    	//页面失去焦点停止
    	onblur = function(){
    		stop();
    	}
    	//页面获取焦点时开始
    	onfocus = function(){
    		start();
    	}
    </script>
    </head>
    <body>
    	<div id="box" onmouseover="stop()" onmouseout="start()">
    		<div id="red" class="slide"></div>
    		<div id="green" class="slide"></div>
    		<div id="blue" class="slide"></div>
    	</div>
    </body>
    </html>
    
    展开全文
  • 四种方式实现轮播图

    万次阅读 多人点赞 2018-06-11 22:28:39
    不论是app,还是网站,基本上都会出现轮播图,今天和大家分享几种不同工具实现轮播图的几种方式。 轮播图的基本样式和功能就不需要解释了,相信能根据题目选择看文章的话都知道啥是轮播图,如果哪位读者老爷真的...

    转载自:http://www.jianshu.com/p/bd1f34e7e953


    不论是app,还是网站,基本上都会出现轮播图,今天和大家分享几种不同工具实现轮播图的几种方式。

    轮播图的基本样式和功能就不需要解释了,相信能根据题目选择看文章的话都知道啥是轮播图,如果哪位读者老爷真的让非要我解释一下啥是轮播图,求您饶了在下吧,真心词穷~

    为了方便大家观看,我把css,html,js都写在一个文件里。

    swiper插件实现轮播图

    swiper是一个实现轮播图很强大,上手也容易。并且也是现在app,网址等用的最多的,
    官方网址:http://www.swiper.com.cn/
    下载插件导入,按照教程即可实现精美效果

    运行效果


    GIF.gif

    代码部分

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="swiper-3.4.1.min.css">
        <script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
        <script type="text/javascript" src="swiper-3.4.1.jquery.min.js"></script>
        <style type="text/css">
            .swiper-container{
                width: 790px;
                height: 340px;
            }
        </style>
    </head>
    
    <!-- 结构以及class的类名不允许更改 -->
    <body>
        <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">![]((1).jpg)</div>
            <div class="swiper-slide">![]((2).jpg)</div>
            <div class="swiper-slide">![]((3).jpg)</div>
            <div class="swiper-slide">![]((4).jpg)</div>
            <div class="swiper-slide">![]((5).jpg)</div>
            <div class="swiper-slide">![]((6).jpg)</div>
            <div class="swiper-slide">![]((7).jpg)</div>
            <div class="swiper-slide">![]((8).jpg)</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    
        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->
    </div>
    
    <script type="text/javascript">
        var mySwiper = new Swiper ('.swiper-container', {
          // 滚动方向 horizontal/vertical
        direction: 'horizontal',
        // 自动播放
        autoplay:2000,
        // 是否循环播放
        loop: true,
        // 如果需要分页器(小圆点)
        // 是否需要分页器
        pagination: '.swiper-pagination',
        // 点击分页器是否切换到对应的图片 是 true 否 false
        paginationClickable:true,
    
        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
    
         // 用户操作swiper之后,是否禁止autoplay。默认为true:停止。
        // 如果设置为false,用户操作swiper之后自动切换不会停止,每次都会重新启动autoplay。
        // 操作包括触碰,拖动,点击pagination等。
        autoplayDisableOnInteraction:false,
      }) 
    
    </script>
    </body>
    
    </body>
    </html>

    JS实现轮播图

    运行效果


    GIF.gif


    代码部分

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        <style>
            #loopDiv{
                width: 790px;
                height: 340px;
                margin: 0 auto;
                position: relative;
            }
    
            #list{
                list-style: none;
    
                position: absolute;
                bottom: 10px;
                left: 250px;
            }
            #list li{
                float: left;
                width: 20px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                border-radius: 50%;
                background: #aaa;
                margin-right: 10px;
            }
            .chooseBut{
                width: 50px;
                height: 80px;
                background-color: rgba(0,0,0,0.2);
                color: #fff;
                font-size: 30px;
                line-height: 80px;
                text-align: center;
                display: none;
            }
            #left{
                position: absolute;
                left: 0px;
                top: 130px;
            }
            #right{
                position: absolute;
                right: 0px;
                top: 130px;
            }
        </style>
    </head>
    <body>
        <div id="loopDiv">
            ![](img/0.jpg)
            <ul id="list">
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
            <div id="left" class="chooseBut"><</div>
            <div id="right" class="chooseBut">></div>
        </div>
        <script type="text/javascript">
            var jsDivBox = document.getElementById("loopDiv");
            //图片节点
            var jsImg = document.getElementById("pic");
            //左右按钮节点
            var jsLeft = document.getElementById("left");
            var jsRight = document.getElementById("right");
            //获取所有的li
            var jsUl = document.getElementById("list");
            var jsLis = jsUl.getElementsByTagName("li");
            //让第一个小圆点变为红色
            jsLis[0].style.backgroundColor = "red";
    
            //显示当前的图片下标
            var currentPage = 0;
    
            //启动定时器
            var timer = setInterval(func, 1000);
            function func() {
                currentPage++;
                changePic();
    
            }
            function changePic() {
                if (currentPage == 8) {
                    currentPage = 0;
                }
                if (currentPage == -1) {
                    currentPage = 7;
                }
                //更换图片
                //"img/1.jpg"
                jsImg.src = "img/" + currentPage + ".jpg";
                //将所有的小圆点颜色清空
                for (var i = 0; i < jsLis.length; i++) {
                    jsLis[i].style.backgroundColor = "#aaa";
                }
                //改变对应小圆点为红色
                jsLis[currentPage].style.backgroundColor = "red";
            }
    
            //鼠标进入
            jsDivBox.addEventListener("mouseover", func1, false);
            function func1() {
                //停止定时器
                clearInterval(timer);
                //显示左右按钮
                jsLeft.style.display = "block";
                jsRight.style.display = "block";
            }
            //鼠标移出
            jsDivBox.addEventListener("mouseout", func2, false);
            function func2() {
                //重启定时器
                timer = setInterval(func, 1000);
    
                //隐藏左右按钮
                jsLeft.style.display = "none";
                jsRight.style.display = "none";
            }
    
            //点击左右按钮
            jsLeft.addEventListener("click", func3, false);
            function func3() {
                currentPage--;
                changePic();
            }
            jsLeft.onmouseover = function() {
                this.style.backgroundColor = "rgba(0,0,0,0.6)";
            }
            jsLeft.onmouseout = function() {
                this.style.backgroundColor = "rgba(0,0,0,0.2)";
            }
            jsRight.addEventListener("click", func4, false);
            function func4() {
                currentPage++;
                changePic();
            }
            jsRight.onmouseover = function() {
                this.style.backgroundColor = "rgba(0,0,0,0.6)";
            }
            jsRight.onmouseout = function() {
                this.style.backgroundColor = "rgba(0,0,0,0.2)";
            }
    
            //进入小圆点
            for (var j = 0; j < jsLis.length; j++) {
                jsLis[j].onmouseover = function() {
                    currentPage = parseInt(this.innerHTML) - 1;
                    changePic();
                };
            }
    
        </script>
    </body>
    </html>

    jQuery实现轮播图

    运行结果


    GIF.gif


    代码部分

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .pic{
                width: 790px;
                height: 340px;
                margin: 10px auto;
                position: relative;
                overflow: hidden;
            }
            .content{
                width: 99999px;
                height: 340px;
                position: absolute;
                left: 0px;
                top: 0px;
    
            }
            .content img{
                float: left;
            }
            .index{
                position: absolute;
                left: 300px;
                bottom: 5px;
                width: 200px;
                height: 20px;
                list-style: none;
            }
            .index li{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                float: left;
                margin-left: 10px;
                background-color: rgba(100,100,100,0.3);
            }
    
            .left{
                width: 30px;
                height:50px;
                background-color:rgba(100,100,100,0.5);  
                position: absolute;
                left: 0px;
                top: 150px;
                line-height: 50px;
                text-align: center;
                font-size: 20px;
                color: #fff;
                display: none;
            }
            .right{
                width: 30px;
                height:50px;
                background-color:rgba(100,100,100,0.5);  
                position: absolute;
                right: 0px;
                top: 150px;
                line-height: 50px;
                text-align: center;
                font-size: 20px;
                color: #fff;
                display: none;
            }
            .index .first{
                background-color: red;
            }
    
        </style>
        <script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
    </head>
    <body>
        <div class="pic">
            <div class="content">
                ![](img/(1).jpg)
                ![](img/(2).jpg)
                ![](img/(3).jpg)
                ![](img/(4).jpg)
                ![](img/(5).jpg)
                ![](img/(6).jpg)
                ![](img/(7).jpg)
                ![](img/(8).jpg)
            </div>
            <ul class="index">
                <li class="first"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div class="right">></div>
            <div class="left"><</div>
        </div>
        <script type="text/javascript">
            $(function(){
                //每个固定的时间移动图片
                var timer = setInterval(picLoop,1000);
                var index = 0;
                function picLoop(){
                    index++;
                    if (index==8) {index=0;}
                    $(".content").animate({"left":-790*index},300);
                    $("li").eq(index).css("background-color","red")
                           .siblings().css("background-color","rgba(100,100,100,0.3)");
                }
    
                //定时器的控制
                $(".pic").hover(function(){
                    clearInterval(timer);
                    $(".left").show();
                    $(".right").show();
                },function(){
                    timer = setInterval(picLoop,1000);
                    $(".left").hide();
                    $(".right").hide();
                })
    
                $("li").mouseover(function(){
                    $(this).css("background-color","red")
                           .siblings().css("background-color","rgba(100,100,100,0.3)");
                    index = $(this).index();
                    $(".content").animate({"left":-790*index},300);
    
                })
    
                $(".left").click(function(){
                    index--;
                    if (index==-1) {index=7;}
                    $(".content").animate({"left":-790*index},300);
                    $("li").eq(index).css("background-color","red")
                           .siblings().css("background-color","rgba(100,100,100,0.3)");
                })
                $(".right").click(function(){
                    index++;
                    if (index==8) {index=0}
                    $(".content").animate({"left":-790*index},300);
                    $("li").eq(index).css("background-color","red")
                           .siblings().css("background-color","rgba(100,100,100,0.3)");    
                })
    
    
            })
        </script>
    </body>
    </html>

    css3实现轮播图

    css3的轮播实用性差,但是也可以使用,但是可以锻炼我们的思维。
    运行效果


    GIF.gif


    代码部分

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
            * {
                  margin:0;
                padding:0;
            }
    
            ul {
                  list-style:none;
            }
            .loop{
                position: relative;
                margin:30px auto;
                width:600px;
                height:300px;
            }
    
            #wrap {
                  position:relative;
                  width:600px;
                  height:300px;
                   border:1px solid #9cc5ef;
                   overflow:hidden;
            }
    
            #slider {
                  width:300%;
                  height:100%;
                  font:100px/400px Microsoft Yahei;
                  text-align:center;
                  color:#fff;
                  margin-left:0;
                  -webkit-animation:slide1 3s ease-out infinite;
            }
    
            #slider li {
                  float:left;
                  width:600px;
                  height:100%;
            }
            #slider img{
                 width:600px;
                 height:100%;
            }
            /*创建三种动画策略*/
            @-webkit-keyframes slide1 {
              0% { margin-left:0;}
              23% { margin-left:0;}
              33% { margin-left:-600px;}
              56% { margin-left:-600px;}
              66% { margin-left:-1200px;}
              90% { margin-left:-1200px;}
              100% {margin-left:0;}
            }
    
            @-webkit-keyframes slide2 {
              0% { margin-left:-600px;}
              23% { margin-left:-600px;}
              33% { margin-left:-1200px;}
              56% { margin-left:-1200px;}
              66% { margin-left:0;}
              90% { margin-left:0;}
              100% {margin-left:-600px;}
            }
    
            @-webkit-keyframes slide3 {
              0% { margin-left:-1200px;}
              23% { margin-left:-1200px;}
              33% { margin-left:0;}
              56% { margin-left:0;}
              66% { margin-left:-600px;}
              90% { margin-left:-600px;}
              100% {margin-left:-1200px;}
            }
    
    
            /*当我们点击对应按钮时显示对应的动画*/
            #first:checked ~ #wrap #slider {
              -webkit-animation-name:slide1;
            }
    
            #second:checked ~ #wrap #slider {
              -webkit-animation-name:slide2;
            }
    
            #third:checked ~ #wrap #slider {
              -webkit-animation-name:slide3;
            }
    
    
            /*短暂地取消动画名称,模拟重启动画*/
            #first:active ~ #wrap #slider {
              -webkit-animation-name:none;
              margin-left:0;
            }
    
            #second:active ~ #wrap #slider {
              -webkit-animation-name:none;
              margin-left:-600px;
            }
    
            #third:active ~ #wrap #slider {
              -webkit-animation-name:none;
              margin-left:-1200px;
            }
            #opts {
              width:600px;
              height:40px;
              margin:auto;
              color:#fff;
              text-align:center;
              font:16px/30px Microsoft Yahei;
              position: absolute;
              top: 260px;
              left: 250px;
            }
    
            #opts label {
              float:left;
              width:30px;
              height:30px;
              margin-right:10px;
              background:#cccccc;
              cursor:pointer;
              border-radius: 50%;
            }
    
            #opts label:hover {
              background:#405871;
            }
    
            /* 隐藏Input按钮*/
            #first, #second, #third {
              display:none;
            }
    
            </style>
        </head>
        <body>
            <div class="loop">
                <input type="radio" name="slider" id="first">
                <input type="radio" name="slider" id="second">
                <input type="radio" name="slider" id="third">
    
                <div id="wrap">
                  <ul id="slider">
                    <li>![](img/0.jpg)</li>
                    <li>![](img/1.jpg)</li>
                    <li>![](img/2.jpg)</li>
                  </ul>
                </div>  
                <div id="opts">
                  <label for="first">1</label>
                  <label for="second">2</label>
                  <label for="third">3</label>
                </div>
            </div>
        </body>
    </html>

    觉得有收获就点赞啦




    展开全文
  • 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-10-15 10:19:45
    轮播图: 可以从图上,看出我们要实现的效果,首先罗列出来,方便我们一步步的进行处理。 此处我才用的是重叠图片,通过定时器,按一定时间进行对图片display属性进行更改。 实现的效果是:1&amp;gt;图片自动...
  • 轮播图出现的问题

    2020-03-01 10:50:49
    为什么我的轮播图一播到第五张图片就没有了?后面全是空白,播放时间一到就又会重新开始,图片格式为640*400希望各位大佬可以帮我找找问题所在。 代码如下 } /* 暂停动画 */ div>ul:hover{ animation-play-...
  • html+css+JavaScript实现轮播图(新手教程)

    万次阅读 热门讨论 2019-04-07 18:19:50
    简易模仿芒果TV官网轮播图 目录 轮播图分析: 1、轮播图实现的功能 2、图片叠加原理 html页面布局: CSS修饰: JavaScript: 轮播图分析: 1、轮播图实现的功能 自动滚动图片。 触碰圆点按钮,按钮亮起;...
  • 完整轮播图(4)

    2020-02-28 14:37:25
    我们终于迎来了最完整的轮播图 当然还是WebAPI做的 依旧和之前一样,结构样式只给代码,script里面会有一些注释 有的图片路径可能会报错什么的,因为我本来使用的是本地图片,然后换成了临时百度的图片图片路径...
  • 超详细轮播图,让你彻底明白轮播图! 个人博客地址:http://www.zhsh666.xyz/ 刚开始学JavaScript时候很多新手都会尝试写一些简单的小项目,轮播图应该是写的最多的。但是很多时候对于基础不是很好的新手,虽然...
  • html------轮播图

    万次阅读 多人点赞 2018-07-19 11:42:30
    2.用ul和li标签实现轮播图中的小圆点 float:left; 让li标签横着排列 list-style:none; 去除小圆点 border-radius:10px; 圆形边框 line-height:2px; text-align:center; 左右上下居中 3.将小圆点移动到...
  • 用三种方式实现轮播图

    万次阅读 多人点赞 2018-11-06 10:06:08
    顾名思义,轮播图就是实现图片的轮换播放效果。先显示一张图片,一定的时间,让这张图片消失,下一张图片显示。让它们实现跟淘宝首页一样的广告轮播效果。 首先是前端html代码 &lt;!DOCTYPE html&gt; &...
  • 用js和CSS写图片切换效果(轮播图

    千次阅读 多人点赞 2019-01-18 13:56:07
    用js和CSS写图片切换效果(轮播图)、 ** 学习前提** 了解CSS伪类元素,css3过度效果 对js拥有基础的了解。 清楚图片切换原理。 &amp;lt;!doctype html&amp;gt; &amp;lt;html lang=&quot;...
  • 用JS实现图片切换、定时器、轮播图

    千次阅读 2019-09-09 18:43:44
    图片切换 实现功能: 当点击“下一页”时,跳转到下一张图片; 当点击“上一页”时,跳转到上一张照片; 显示当前页/总页数,如:2/6。 <!DOCTYPE html> <html> <head> <meta charset=...
  • 使用CSS实现简单的图片切换轮播图) 预览图如下: 一:首先创建基本布局 创建一个div容器 ,里面的ul与ol标签分别对应轮播图片和下方圆点; <!DOCTYPE html> <html lang="en"> <head> <...
  • 使用js制作简易轮播图图片切换) 此方法在实际应用中用处不大 了解即可** 主要思想为把每一个图片的路径存到一个数组中 获取按钮的id, 为该按钮绑定单机响应函数即可 以下为js代码 <script type="text...
  • vuetify carouse轮播图图片自动切换的时候, 会自动聚焦跳转到轮播图自身的位置. 这导致了一个问题, 当屏幕同时显示着轮播图和其他内容时, 轮播图一自动切换, 页面就会自动跳转到轮播图的位置… Solution1 ...
  • 轮播图的五张图片要求每隔3秒自动轮播一次 当鼠标移入时,轮播效果会停止,当鼠标移出时又会继续轮换播放 图片的两侧会有两个方向按钮,当点击按钮时图片会随之对应的方向切换 轮播图的下方会有五个...
  • js实现轮播图(点击小图片切换图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div class="switch fl" ...
  • 可以在网页实现图片左右切换,即轮播图。使用bootstraps框架,不需要css、js文件。导入即可使用。图片的数量和样式可自由更改。
  • Jquery和纯JS实现轮播图(一)--左右切换

    万次阅读 热门讨论 2017-05-16 10:14:44
    给大家分享下常见 的左右切换轮播图; 一、页面结构 对于左右切换式的轮播图的结构主要分为以下几个部分: 1、首先是个外围部分(其实也就是最外边的整体wrapper) 2、其次就是你设置图片轮播的地方(也就是一...
1 2 3 4 5 ... 20
收藏数 312,388
精华内容 124,955
关键字:

轮播图