精华内容
下载资源
问答
  • JS实现图片轮播效果(自动和手动)

    万次阅读 多人点赞 2018-05-30 16:45:06
    本次轮播效果图如下:具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换以下为实现代码:首先是html代码:<!DOCTYPE html> <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>

     

    展开全文
  • 消息轮播,最新消息的滚动轮播,还有垂直方向的消息滚动轮播
  • android轮播图简单实现 支持左右无限无缝轮播 自动轮播 ,android轮播图简单实现 支持左右无限无缝轮播 自动轮播
  • 安卓广告轮播效果

    千次下载 热门讨论 2014-10-11 14:08:00
    淘宝、京东 等网站的主页轮播广告图片效果。
  • 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>
    
    展开全文
  • 轮播视频,左右轮播播放
  • 使用Swiper 插件实现 类似于轮播图的视频轮播 轮播
  • 简单的轮播实现,以及鼠标悬停在轮播图上,轮播轮播效果停止。
  • 压缩包分为左右轮播和上下轮播两个工程,集成简单,实现逻辑清楚,可以学习思想并尝试自己实现
  • 轮播轮播时的抖动解决方案

    万次阅读 2019-07-21 22:10:57
    笔者做项目时遇到了轮播图莫名奇妙的出现了抖动的问题。 根本就不知道为什么它会抖动。 最后给轮播图的外层容器加了一个css样式就解决了抖动的问题。 比如最外层的盒子的类名叫wrapBox,那么我们就只需要给其加上这...

    笔者做项目时遇到了轮播图莫名奇妙的出现了抖动的问题。

    根本就不知道为什么它会抖动。

    最后给轮播图的外层容器加了一个css样式就解决了抖动的问题。

    比如最外层的盒子的类名叫wrapBox,那么我们就只需要给其加上这句css就好了:

    .wrapBox {
    	transform: translateZ(0);
    }
    

    这样你就会发现轮播图的抖动问题解决了。

    展开全文
  • 采用ViewPager实现的广告轮播图,可以实现无限轮播,代码结构清晰易懂
  • 安卓实现无限轮播 最简单的轮播图 Android中的轮播图实现起来并不难,现在特别是商城类的APP中使用的特别多,自定义view和ViewPager都能很简单的实现,之前找了几篇博文都不具备无限轮播的功能。 供大家参考学习和...
  • flutter 轮播组件 Swiper

    万次阅读 多人点赞 2018-09-19 19:18:54
    flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配. 先放上github上的几张图看一下效果。 ✨✨ 新功能 更多 截图 图就先放到这里,我们看一下用法。 安装 增加 flutter_...

    flutter_swiper

    flutter最强大的siwiper, 多种布局方式,无限轮播,Android和IOS双端适配.

    先放上github上的几张图看一下效果。

    截图

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yNhDhxPj-1573730731356)(https://github.com/jzoom/flutter_swiper/raw/master/example/res/1.gif)] [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lF1E8Xkq-1573730731357)(https://github.com/jzoom/flutter_swiper/raw/master/example/res/2.gif)]

    图就先放到这里,我们看一下用法。

    安装

    增加

    flutter_swiper: ^1.0.6    //请在pub上查看最新版本
    

    到项目根目录下的 pubspec.yaml ,并且根目录运行命令行

    flutter packages get 
    

    基本使用

    /*
     * Created by 李卓原 on 2018/9/19.
     * email: zhuoyuan93@gmail.com
     *
     */
    
    import 'package:flutter/material.dart';
    import 'package:flutter_swiper/flutter_swiper.dart';
    
    class SwiperPage extends StatefulWidget {
      @override
      SwiperPageState createState() {
        return SwiperPageState();
      }
    }
    
    class SwiperPageState extends State<SwiperPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('轮播组件'),
          ),
          body: Container(
              width: MediaQuery.of(context).size.width,
              height: 200.0,
              child: Swiper(
                itemBuilder: _swiperBuilder,
                itemCount: 3,
                pagination: new SwiperPagination(
                    builder: DotSwiperPaginationBuilder(
                  color: Colors.black54,
                  activeColor: Colors.white,
                )),
                control: new SwiperControl(),
                scrollDirection: Axis.horizontal,
                autoplay: true,
                onTap: (index) => print('点击了第$index个'),
              )),
        );
      }
    
      Widget _swiperBuilder(BuildContext context, int index) {
        return (Image.network(
          "http://via.placeholder.com/350x150",
          fit: BoxFit.fill,
        ));
      }
    }
    

    在这里插入图片描述

    Swiper基本参数

    参数 默认值 描述
    scrollDirection Axis.horizontal 滚动方向,设置为Axis.vertical如果需要垂直滚动
    loop true 无限轮播模式开关
    index 0 初始的时候下标位置
    autoplay false 自动播放开关.
    autoplayDely 3000 自动播放延迟毫秒数.
    autoplayDiableOnInteraction true 当用户拖拽的时候,是否停止自动播放.
    onIndexChanged void onIndexChanged(int index) 当用户手动拖拽或者自动播放引起下标改变的时候调用
    onTap void onTap(int index) 当用户点击某个轮播的时候调用
    duration 300.0 动画时间,单位是毫秒
    pagination null 设置 new SwiperPagination() 展示默认分页指示器
    control null 设置 new SwiperControl() 展示默认分页按钮

    分页指示器 pagination

    分页指示器继承自 SwiperPlugin,SwiperPluginSwiper 提供额外的界面.设置为new SwiperPagination() 展示默认分页.

    参数 默认值 描述
    alignment Alignment.bottomCenter 如果要将分页指示器放到其他位置,那么可以修改这个参数
    margin const EdgeInsets.all(10.0) 分页指示器与容器边框的距离
    builder SwiperPagination.dots 目前已经定义了两个默认的分页指示器样式: SwiperPagination.dotsSwiperPagination.fraction,都可以做进一步的自定义.

    简单的自定义:

    pagination: new SwiperPagination(
                    builder: DotSwiperPaginationBuilder(
                  color: Colors.black54,
                  activeColor: Colors.white,
                ))
    

    完全自定义分页组件:

    new Swiper(
        ...,
        pagination:new SwiperCustomPagination(
            builder:(BuildContext context, SwiperPluginConfig config){
                return new YourOwnPaginatipon();
            }
        )
    );
    

    控制按钮 control

    控制按钮组件也是继承自 SwiperPlugin,设置 new SwiperControl() 展示默认控制按钮.

    参数 默认值 描述
    iconPrevious Icons.arrow_back_ios 上一页的IconData
    iconNext Icons.arrow_forward_ios 下一页的IconData
    color Theme.of(context).primaryColor 控制按钮颜色
    size 30.0 控制按钮的大小
    padding const EdgeInsets.all(5.0) 控制按钮与容器的距离

    控制器(SwiperController)

    SwiperController 用于控制 Swiper的index属性, 停止和开始自动播放. 通过 new SwiperController() 创建一个SwiperController实例,并保存,以便将来能使用。

    方法 描述
    void move(int index, {bool animation: true}) 移动到指定下标,设置是否播放动画
    void next({bool animation: true}) 下一页
    void previous({bool animation: true}) 上一页
    void startAutoplay() 开始自动播放
    void stopAutoplay() 停止自动播放

    内建的布局

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QLZW8mVs-1573730731358)(https://github.com/jzoom/images/raw/master/layout1.gif)]

    new Swiper(
      itemBuilder: (BuildContext context, int index) {
        return new Image.network(
          "http://via.placeholder.com/288x188",
          fit: BoxFit.fill,
        );
      },
      itemCount: 10,
      viewportFraction: 0.8,
      scale: 0.9,
    )
    
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1uVvTCCc-1573730731358)(https://github.com/jzoom/images/raw/master/layout2.gif)]

    new Swiper(
      itemBuilder: (BuildContext context, int index) {
        return new Image.network(
          "http://via.placeholder.com/288x188",
          fit: BoxFit.fill,
        );
      },
      itemCount: 10,
      itemWidth: 300.0,
      layout: SwiperLayout.STACK,
    )
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fmLS4Foz-1573730731359)(https://github.com/jzoom/images/raw/master/layout3.gif)]

    new Swiper(
        itemBuilder: (BuildContext context, int index) {
          return new Image.network(
            "http://via.placeholder.com/288x188",
            fit: BoxFit.fill,
          );
        },
        itemCount: 10,
        itemWidth: 300.0,
        itemHeight: 400.0,
        layout: SwiperLayout.TINDER,
     )
    

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZlX2K7gT-1573730731359)(https://github.com/jzoom/images/raw/master/layout4.gif)]

    构建你自己的动画十分简单:

    
     new Swiper(
      layout: SwiperLayout.CUSTOM,
      customLayoutOption: new CustomLayoutOption(
          startIndex: -1,
          stateCount: 3
      ).addRotate([
        -45.0/180,
        0.0,
        45.0/180
      ]).addTranslate([
        new Offset(-370.0, -40.0),
        new Offset(0.0, 0.0),
        new Offset(370.0, -40.0)
      ]),
      itemWidth: 300.0,
      itemHeight: 200.0,
      itemBuilder: (context, index) {
        return new Container(
          color: Colors.grey,
          child: new Center(
            child: new Text("$index"),
          ),
        );
      },
      itemCount: 10)
    
    

    CustomLayoutOption 被设计用来描述布局和动画,很简单的可以指定每一个元素的状态.

    new CustomLayoutOption(
          startIndex: -1,  /// 开始下标
          stateCount: 3    /// 下面的数组长度 
      ).addRotate([        //  每个元素的角度
        -45.0/180,
        0.0,
        45.0/180
      ]).addTranslate([           /// 每个元素的偏移
        new Offset(-370.0, -40.0),
        new Offset(0.0, 0.0),
        new Offset(370.0, -40.0)
      ])
    
    

    文档

    本文实例

    展开全文
  • 图片轮播 新浪图片轮播 雅虎图片轮播 仿照雅虎和新浪我作出的一些图片轮播 很好看的啊
  • js图片轮播

    2017-10-12 14:44:40
    js,图片轮播, js图片轮播, js,图片轮播, js图片轮播, js,图片轮播, js图片轮播
  • swiper轮播组件

    2019-01-25 16:43:58
    轮播组件swiper
  • 普通轮播(文本、图片,图文轮播,支持上下、左右轮播) 堆叠轮播(图片) 图片预览(图片) 数字角标 使用方式 若page.json中配置了"easycom": true,则无需script引入就可以使用,没有则需要引入。 属性 名称...
  • 图片轮播插件

    2018-11-15 15:13:38
    图片轮播插件,适用于web页面开发轮播页面效果展示 。
  • 图片轮播之自动轮播

    2016-02-29 12:31:05
    利用Handler实现图片自动轮播和用户触摸图片时自动停止轮播 Handler mHandler = new Handler(); AutoScrollTask mAutoScrollTask = new AutoScrollTask(); class AutoScrollTask implements Runnable { public ...
  • 已经写好向左和向右轮播的函数,怎么实现从左向右轮播到最后一张时,开始从右向左轮播
  • echarts tooltip 轮播

    2018-08-01 10:21:37
    echarts-tooltip 轮播 很不错的,图标轮播,具体样式还是可以的
  • BootStrap轮播图 (自动轮播)

    万次阅读 2018-09-30 10:24:50
    下面的轮播图已经有了鼠标悬停停止轮播,左右导航,和下方圆点计数器、给图片添加标题,内容等功能 &lt;!--轮播图--&gt; &lt;div class="container" &gt; &lt;div class=&...
  • 移动端轮播插件

    2017-06-08 15:49:21
    移动端轮播插件
  • Flutter轮播图效果、Flutter轮播图Demo

    千次阅读 2021-01-06 23:49:33
    在码农的世界里,优美的应用体验,来源于程序员对细节的处理以及自我要求的境界,年轻人也是忙忙碌碌的码农中一员,每天、...已将轮播图封装成 BannerWidget 大家可以直接拷贝使用: 自动轮播 手指按下时停止轮播 .
  • android viewpager实现轮播

    万次阅读 2020-10-20 15:05:01
    本文是基于ViewPager实现的无限自动轮播banner 分为三步:第一部分是有限手动轮播;第二部分是无限轮播;第三部分是自动轮播;第四部分是指示器适配 有限手动轮播实现: 布局: <androidx.viewpager.widget....
  • 资源包含三个背景轮播效果和两个登录界面背景轮播效果,可以在web 开发中使用。响应式的布局,支持手机端使用。
  • JQuery轮播

    2019-02-25 12:01:09
    JQuery实现轮播图 里面是核心代码部分
  • 页面进入后,轮播图会自动轮播,鼠标 停留在轮播图时会停止轮播,停顿在当前图片上, 鼠标离开会继续轮播 。 思路 编写两个方法, 第一个autoPlay();实现轮播图的自动轮播。 第二个Play()主要进行判断当光标进入轮播...
  • Android实现可轮播循环和手动滑动循环的广告界面

    千次下载 热门讨论 2015-05-08 12:59:40
    Android实现可轮播循环和手动滑动循环的广告界面 源码下载 经常会看到有一些app的banner界面可以实现循环播放多个广告图片和手动滑动循环。本以为单纯的ViewPager就可以实现这些功能。但是蛋疼的事情来了,ViewPager...
  • 轮播框架

    2019-05-19 18:25:10
    轮播框架 开发工具与关键技术:VS、轮播框架 作者:黄桂康 撰写时间:2019.05.15 轮播框架是为了呈现出图片的切换,使页面变得整洁,它就是个盒子,把零散的东西装起来。使地方更加干净、整洁。轮流播放图片,我们...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,387
精华内容 17,754
关键字:

轮播