精华内容
下载资源
问答
  • 网页轮播图

    2018-12-25 15:00:39
    网页轮播图,可实现自己轮播,当点击时可跳转到自己想看的图片页面
  • 网页图片切换

    2013-12-10 17:34:10
    使用js和css实现的网页图片切换效果,适合初学者学习和使用
  • 切换风格的焦点特效,基于jQuery制作的多种自动切换效果的网页轮播图片特效,这款焦点特效不支持手动控件,图片自己自动播放,每张图片都可以显示图片说明,兼容各大浏览器。适合用于电影网站、视频网站、图片...
  • 通过JS实现网页轮播图滚动效果,包含JS缓动动画效果以及一个简单的网页界面,压缩包里包含页面的源代码、缓动动画源代码、轮播图设计思路等。
  • 网页轮播图实现

    2020-12-15 15:32:20
    学习目标:网页轮播图的实现 1.offset .client. scroll 三大家族 2.缓动动画的原理和封 3.网页轮播图实现 4.节流阀 返回顶部及筋斗云案例 5.移动端轮播图实现 6.移动端插件使用 及轮播图的实现 7.html5本地储存及...

    学习目标:网页轮播图的实现

    1.offset .client. scroll 三大家族
    2.缓动动画的原理和封
    3.网页轮播图实现
    4.节流阀 返回顶部及筋斗云案例
    5.移动端轮播图实现
    6.移动端插件使用 及轮播图的实现
    7.html5本地储存及记住用户名案例

    学习内容:网页轮播图的实现

    注意:

    (1)孩子可以比父亲宽,只是在孩子没有设置宽度时 ,是根据父亲来判断宽度(这里为了让所有li的图片浮动在一行显示 设定ul宽度为600%)。

    (2)轮播图必须是 ul >li 用小li装图片 浮动flaot。

    1.鼠标经过轮播图时,显示隐藏左右箭头

    window.addEventListener('load',function() {//页面加载结束后再执行
        //1.获取元素
        var arrow_l= document.querySelector('.arrow-l');//arrow:箭头
        var arrow_r = document.querySelector('.arrow-r');
        var focus = document.querySelector('.focus');//focus:中心 焦点
    
        //2.鼠标经过focus,就显示隐藏左右按钮
        focus.addEventListener('mouseenter',function() {
            arrow_l.style.display = 'block';
            arrow_r.style.display = 'block';
        })
    
        focus.addEventListener('mouseleave',function() {
            arrow_l.style.display = 'none';
            arrow_r.style.display = 'none';
        })
     
    })
    

    2.动态生成小圆圈

    设定:
    如果有四张图片既有四个小圆圈,如果有八张图片既有八个小圆圈。

    核心思路:
    (1)利用for循环动态生成小圆圈(这个小圆圈要放到ol里面)。
    (2)创建节点 createElement(‘li’)
    (3)插入节点 ol.appendChild(li)

    //3.动态生成小圆圈 有几张图片 生成几个小圆圈
        var ul = focus.querySelector('ul');
        var ol = focus.querySelector('.circle');
        for(var i = 0 ; i < ul.children.length ; i++) {
            //创建一个li
            var li = document.createElement('li');
            //把li插入到ol里面
            ol.appendChild(li);
        }
        //把ol里面的第一个li设置类名为current,current现在的
        ol.children[0].className = 'current';
    

    这里注意必须在全局中设定(使得在一开始刷新页面时不做任何事件时第一个圆圈就是白色)

      //把ol里面的第一个li设置类名为current,current现在的
        ol.children[0].className = 'current';
    

    3.小圆圈的排他思想

    设定:
    点击哪个小圈 那个小圈就变白色。

    (1)给每个ol新建的li都要绑定点击事件。
    (2)点击当前的小圆圈,就添加current类。
    (3)其余的小圆圈就移除这个current类。

        
        //3.动态生成小圆圈 有几张图片 生成几个小圆圈
        var ul = focus.querySelector('ul');
        var ol = focus.querySelector('.circle');
        for(var i = 0 ; i < ul.children.length ; i++) {
            //创建一个li
            var li = document.createElement('li');
            //把li插入到ol里面
            ol.appendChild(li);
            //4.我们在生成小圆圈的同时直接绑定点击事件,这里要给每个ol里的li添加点击事件
            li.addEventListener('click', function() {
                //干掉所有人  把所有Li清除current类名
                for(var i = 0;i < ol.children.length;i++) {
                    ol.children[i].className = '';
                }
                //留下我自己 当前的li设置current类名
                this.className = 'current';
            })
        }
    

    4.点击小圆圈就滑动图片

    🐱‍🐉设定:点击哪个⚪ 就滑到对应的图片

    (1)引入animate.js (但是animate.js必须写在index.js上面引入。顺序不可颠倒)

    <!-- 这个animate.js 必须写到 index.js的上面引入 -->
        <script src="js/animate.js"></script>
        <!-- 引入我们首页的js文件 -->
        <script src="js/index.js"></script>
    

    (2)是ul在动而不是li在动 给ul添加定位absolute 给父盒子添加relative。

    (3) 核心算法:
    点击某个小圆圈,就让图片滚动 小圆圈的索引号乘以图片的宽度作为ul的移动距离( animate.js 里的 target 值)

    (4)此时需要知道小圆圈的索引号,可以在生成小圆圈的时候,给它设置一个自定义属性,点击时候获取这个自定义属性即可 setAttribute(‘index’,i)

    for(var i = 0 ; i < ul.children.length ; i++) {
            //创建一个li
            var li = document.createElement('li');
            //记录当前小圆圈的索引号 通过自定义属性来做
            li.setAttribute('index',i);
            //把li插入到ol里面
            ol.appendChild(li);
    

    拿到索引号 getAttribute(‘index’)

     //当我们点击li的时候就拿到当前Li的索引号
    
                var index = this.getAttribute('index');
    

    (5)图片的宽度 = 父盒子的宽度 = focus.offsetWidth
    在这里插入图片描述

    var index = this.getAttribute('index');
                var focuswidth = focus.offsetWidth;
               
                animate(ul,-index*focuswidth);
    

    点击小圆圈滑动图片总代码

    window.addEventListener('load',function() {//页面加载结束后再执行
        //1.获取元素
        var arrow_l= document.querySelector('.arrow-l');//arrow:箭头
        var arrow_r = document.querySelector('.arrow-r');
        var focus = document.querySelector('.focus');//focus:中心 焦点
        
    
        //2.鼠标经过focus,就显示隐藏左右按钮
        focus.addEventListener('mouseenter',function() {
            arrow_l.style.display = 'block';
            arrow_r.style.display = 'block';
        })
    
        focus.addEventListener('mouseleave',function() {
            arrow_l.style.display = 'none';
            arrow_r.style.display = 'none';
        })
        
        //3.动态生成小圆圈 有几张图片 生成几个小圆圈
        var ul = focus.querySelector('ul');
        var ol = focus.querySelector('.circle');
        for(var i = 0 ; i < ul.children.length ; i++) {
            //创建一个li
            var li = document.createElement('li');
            //记录当前小圆圈的索引号 通过自定义属性来做
            li.setAttribute('index',i);
            //把li插入到ol里面
            ol.appendChild(li);
            //4.我们在生成小圆圈的同时直接绑定点击事件,这里要给每个ol里的li添加点击事件
            li.addEventListener('click', function() {
                //干掉所有人  把所有Li清除current类名
                for(var i = 0;i < ol.children.length;i++) {
                    ol.children[i].className = '';
                }
                //留下我自己 当前的li设置current类名
                this.className = 'current';
                
                //5.点击小圆圈 移动图片 移动的是ul
                //当我们点击li的时候就拿到当前Li的索引号
    
                var index = this.getAttribute('index');
                var focuswidth = focus.offsetWidth;
               
                animate(ul,-index*focuswidth);
            })
        }
        //把ol里面的第一个li设置类名为current,current现在的
        ol.children[0].className = 'current';
    
       
    
    })
    

    5.右侧按钮无缝滚动

    🤷‍♀️设定:点击右侧按钮一次,就让图片滚动一张

    (1)声明一个变量num,点击一次,自增1,让这个变量乘以图片宽度,就是ul的滚动距离

        //6.点击图片按钮,图片滚动一张
        var num = 0;
        arrow_r.addEventListener('click', function() {
            num++;
            animate(ul,-num * focuswidth);
        })
    

    😢bug: 点完之后就没图片了,我们需要无缝滚动(不会滚完)

    (2)无缝滚动:

    把ul第一li复制一份,放到ul的最后面(不复制第一个Li就跳的话会导致最后一张图不显示)
    当图片滚动到克隆的最后一张图片时,让ul快速的不作动画的跳到最左侧:left为0。
    同时num赋值为0,又可以重新开始滚动图片了

       //6.点击图片按钮,图片滚动一张
        var num = 0;
        arrow_r.addEventListener('click', function() {
            //如果走到了最后  复制的一张图片 ,此时ul 要快速复原 left:0
            if(num == ul.children.length-1) { //这里时已经复制好第一张图片到最后了
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul,-num * focuswidth);
        })
    

    6.克隆第一张图片

    🐱‍👤设定:克隆第一张图片放到ul children的最后

    (1)克隆ul第一个li cloneNode() 加true 复制里面的子节点 false浅克隆
    (2)添加到ul最后用appendChild
    (3)由于克隆在生成圆圈的下面执行,所以圆圈不会把克隆的li算进去

    //7.克隆第一张图片放到ul.children最后面
        var first = ul.children[0].cloneNode(true);
        ul.appendChild(first);
    

    7.小圆圈跟随右侧按钮一起变化

    💖设定:点击右侧按钮,小圆圈随着一起变化

    👌简单做法:
    (1)声明变量circle,每点击自增1 ,左侧也需要这个变量,因此需要声明全局变量。
    (2)但是图片有5张,我们圆圈只有4个,必须加判断条件
    (3)如果circle==4;就复原为0

    
            //8.点击右侧按钮,小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
    
            
            circle++;
    
            if(circle == ol.children.length) {
                circle = 0;
            }
    
            
    
            for(var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            ol.children[circle].className = 'current';
    

    (4)当我们点击了某个li,就把这个li的索引号给Num 并且把索引号给circle(涉及到全局变量 异步处理 js是一行一行执行的)

          li.addEventListener('click', function() {
                //干掉所有人  把所有Li清除current类名
                for(var i = 0;i < ol.children.length;i++) {
                    ol.children[i].className = '';
                }
                //留下我自己 当前的li设置current类名
                this.className = 'current';
                
                //5.点击小圆圈 移动图片 移动的是ul
                //当我们点击li的时候就拿到当前Li的索引号
    
                var index = this.getAttribute('index');
    //当我们点击了某个li,就把这个li的索引号给Num  并且把索引号给circle
                num=index;
                circle = index;
                
               
                animate(ul,-index*focuswidth);
            })
        }
    

    8.左侧按钮

    //9.左侧按钮做法
        arrow_l.addEventListener('click', function() {
            //如果走到了最前面,快速跳到最后一张,ul走了-num * focuswidth +'px'
            if(num == 0) {
                num = ul.children.length-1;
                ul.style.left = -num * focuswidth +'px';
                
            }
            num--;
            animate(ul,-num * focuswidth);
    
    //circle减小,一旦小于零就立马跳到最后一个小圆点
            circle--;
            if(circle < 0) {
                circle = ol.children.length-1;
            }
    
            circleChange();
    
            
        });
    //把左右按钮相同的代码封装成函数
       function circleChange() {
           
        for(var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
       }
    

    9.网页轮播图——自动播放

    ( ̄︶ ̄)↗ 设定:自动播放图片
    (1)添加一个定时器
    (2)自动播放 相当于点击了右侧按钮
    (3)手动调用右侧按钮点击事件 arrow_r.click()

      //10.自动播放轮播图
    
       var timer = setInterval(function() {
           //自动调用
            arrow_r.click();
       },2000);
    

    (4)鼠标经过focus就停止定时器
    (5)鼠标离开就开启定时器

      //2.鼠标经过focus,就显示隐藏左右按钮
        focus.addEventListener('mouseenter',function() {
            arrow_l.style.display = 'block';
            arrow_r.style.display = 'block';
            //鼠标经过停止定时器
            clearInterval(timer);
            timer = null;//清空定时器,
        })
    
        focus.addEventListener('mouseleave',function() {
            arrow_l.style.display = 'none';
            arrow_r.style.display = 'none';
            //鼠标离开开启定时器
            timer = setInterval(function() {//不需要再定义timer了;
                //自动调用
                 arrow_r.click();
            },2000);
        })
    
    展开全文
  • 网页轮播图详细教程

    千次阅读 2021-03-13 23:32:35
    常见网页特效案例 1. 网页轮播图

    网页轮播图

    1. 搭建框架

    在这里插入图片描述

    分为三个区域:(1)左右按钮 (2)滚动区域 (3)小圆区域

    html代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, user-scalable=no,
    		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="css/index.css"/>
    		<script src="js/index.js"></script>
    	</head>
    	<body>
    		<div class="main">
    			<!-- 左按钮 -->
    			<a href="javascript:;" class="left">&lt;</a>
    			<!-- 右按钮 -->
    			<a href="javascript:;" class="right">&gt;</a>
    			<!-- 滚动区 -->
    			<ul>
    				<li>
    					<a href="#"><img src="img/focus1.jpg"></a>
    				</li>
    				<li>
    					<a href="#"><img src="img/focus2.jpg"></a>
    				</li>
    				<li>
    					<a href="#"><img src="img/focus3.jpg"></a>
    				</li>
    				<li>
    					<a href="#"><img src="img/focus4.jpg"></a>
    				</li>
    			</ul>
    			<!-- 小圆 -->
    			<ol class="circle">
    				<li class="current"></li>
    				<li></li>
    				<li></li>
    				<li></li>
    				<li></li>
    			</ol>
    		</div>
    	</body>
    </html>
    

    css代码

    *{
    	padding: 0;
    	margin: 0;
    }
    ul,ol{
    	list-style: none;
    }
    a{
    	text-decoration: none;
    }
    .main{
    	position: relative;
    	width: 721px;
    	height: 455px;
    	margin: 100px auto;
    }
    .left,.right{
    	position: absolute;
    	top: 50%;
    	margin-top: -20px;
    	width: 24px;
    	height: 40px;
    	background: rgba(0, 0, 0, .3);
    	text-align: center;
    	line-height: 40px;
    	color: #fff;
    	font-size: 18px;
    }
    .right{
    	right: 0;
    }
    .circle {
    	position: absolute;
    	bottom: 10px;
    	left: 50px;
    }
    .main ul{
    	width: 1000%;
    }
    .main ul li{
    	float:left;
    }
    
    .circle li {
    	float: left;
    	width: 8px;
    	height: 8px;
    	border: 2px solid orange;
    	margin: 0 3px;
    	border-radius: 50%;
    	/*鼠标经过显示小手*/
    	cursor: pointer;
    }
    .current {
        background-color: orange;
    }
    

    为了方便观察,暂时选中第一个小圈

    效果图如下:

    在这里插入图片描述

    2.功能需求

    1. 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮

    2. 点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理

    3. 图片播放的同时,下面小圆跟随一起变化

    4. 点击小圆圈,可以播放相应图片

    5. 鼠标不经过轮播图,轮播图自动播放图片

    6. 鼠标经过轮播图,自动播放停止

    3.功能实现

    因为js是写在外部的,所以要添加load事件,页面加载完毕再调用js

    我们先来实现第一个需求,我们通过display和js事件来实现

    分析:先隐藏左右按钮,然后通过js事件显示出来,离开通过js事件再隐藏回去

    左右按钮css代码

    .left,.right{
    	display: none;
    	position: absolute;
    	top: 50%;
    	margin-top: -20px;
    	width: 24px;
    	height: 40px;
    	background: rgba(0, 0, 0, .3);
    	text-align: center;
    	line-height: 40px;
    	color: #fff;
    	font-size: 18px;
    }
    

    js代码

    window.addEventListener('load',function(){
    	//1.获取元素
    	var left = document.querySelector('.left');
    	var right = document.querySelector('.right');
    	var main = document.querySelector('.main');
    	//2.鼠标经过显示左右按钮
    	main.addEventListener('mouseenter',function(){
    		left.style.display = 'block';
    		right.style.display = 'block';
    	})
    	//3.鼠标离开隐藏左右按钮
    	main.addEventListener('mouseleave',function(){
    		left.style.display = 'none';
    		right.style.display = 'none';
    	})
    })
    

    效果图如下:
    在这里插入图片描述

    我们发现,小圆数量和图片的li数量是分开写的,如果后期增减图片修改代码时比较麻烦,所以我们可以优化小圆代码,实现小圆数量随图片li数量一致

    分析:先清空ol里面的li,用js动态创建li,实现自动化的效果

    创建li节点,用for循环,插入到ol里面去,选中li,类名变为current

    js代码

    //4.动态生成圆圈
    	var ul = main.querySelector('ul')
    	var ol = main.querySelector('.circle')
    	for (var i = 0; i < ul.children.length; i++) {
    	        //创建一个li
    	        var li = document.createElement('li'); 
    	        //插入ol
    	        ol.appendChild(li);
    	        //排他思想
    	        li.addEventListener('click', function() {
    	            //所有li清除类名
    	            for (var i = 0; i < ol.children.length; i++) {
    	                ol.children[i].className = '';
    	            }
    	            //当前li设置current类名
    	            this.className = 'current';
    		})
    	}
    	//第一个小li设置为current
    	ol.children[0].className = 'current';
    

    效果图如下:

    在这里插入图片描述

    下面我们实现点击小圆图片滑动的效果

    分析:用到之前封装过的动画函数animate.js

    animate.js 代码:

    function animate(obj, target, callback) {
        // console.log(callback);  callback = function() {}  调用的时候 callback()
    
        // 先清除以前的定时器,只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            // 步长值写到定时器的里面
            // 把我们步长值改为整数 不要出现小数的问题
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                // 停止动画 本质是停止定时器
                clearInterval(obj.timer);
                // 回调函数写到定时器结束里面
                if (callback) {
                    // 调用函数
                    callback();
                }
            }
            // 把每次加 这个步长值改为一个慢慢变小的值  步长公式:(目标值 - 现在的位置) / 10
            obj.style.left = obj.offsetLeft + step + 'px';
    
        }, 15);
    }
    

    引入animate.js文件,因为index.js依赖于animate.js文件,所以要写在index.js的上面

    <script src="js/animate.js"></script>
    <script src="js/index.js"></script>
    

    给ul加定位,就可以使用封装好的动画函数了

    .main ul{
    	position: absolute;
    	left: 0;
    	top: 0;
    	width: 1000%;
    }
    

    核心算法:点击某个小圆,让图片滚动小圆的索引号(创建自定义属性)乘以图片的宽度作为ul移动距离

    //4.动态生成圆圈
    	var ul = main.querySelector('ul')
    	var ol = main.querySelector('.circle')
    	for (var i = 0; i < ul.children.length; i++) {
           //创建一个li
            var li = document.createElement('li'); 
    		// 记录当前小圆圈的索引号 通过自定义属性来做 
    		li.setAttribute('index', i);
            //插入ol
            ol.appendChild(li);
            //排他思想
            li.addEventListener('click', function() {
                //所有li清除类名
                for (var i = 0; i < ol.children.length; i++) {
                    ol.children[i].className = '';
                }
                //当前li设置current类名
                this.className = 'current';
    			var index = this.getAttribute('index');
    			var mainWidth = main.offsetWidth;
    			animate(ul, -index * mainWidth);
    		})
    	}
    

    效果图如下:

    在这里插入图片描述

    效果图发现,左右按钮没了,因为ul加了定位,设置左右按钮的层级为2就好了。

    下面我们做点击右按钮播放图片的效果

    分析:右侧按钮和点击小圆滚动图片的效果大同小异,声明一个变量,点击右按钮,自增1,乘以图片的宽度作为ul的滚动距离就好了

    因为都用到了图片宽度,所以提出来当全局变量

    js代码

    // 6.点击右按钮,图片滚动一张
    	var num = 0;
    	right.addEventListener('click',function(){
    		num++;
    		animate(ul, -num*mainWidth);
    	})
    

    图片不能一直滚动下去,要实现无缝滚动

    分析:把ul的第一个li克隆一份放到ul的后面,当图片滚动到克隆的第一个图片时,让ul快速跳到左侧,left为0,同时num赋值为0

    js代码

    // 6.点击右按钮,图片滚动一张
    	var num = 0;
    	right.addEventListener('click',function(){
    		if(num == ul.children.length-1){
    			ul.style.left = 0;
    			num = 0;
    		}
    		num++;
    		animate(ul, -num*mainWidth);
    	})
    

    我们发现小圆因为直接增加li多了一个,所以我们要优化代码,让js克隆一个li添加到ul后面

    分析:克隆ul第一个li cloneNode() 加true 深克隆,复制里面的子节点 false 浅克隆,然后插入到ul

    因为克隆写到了下面,所以效果图为4个小圆,为了更清晰,我们给main加一个overflowhidden

    效果图如下:

    在这里插入图片描述

    下面我们做小圆跟随右按钮变化的效果

    分析:我们可以单独设置一个变量控制小圆的变化,点击右侧按钮就自加,到克隆的第一张图调回0

    js代码:

    // 6.点击右按钮,图片滚动一张
    	var num = 0;
    	 // circle 控制小圆圈的播放
    	var circle = 0;
    	right.addEventListener('click',function(){
    		if(num == ul.children.length-1){
    			ul.style.left = 0;
    			num = 0;
    		}
    		num++;
    		animate(ul, -num*mainWidth);
    		circle++;
    		if (circle == ol.children.length) {
    			circle = 0;
    		}
    		for (var i = 0; i < ol.children.length; i++) {
    		    ol.children[i].className = '';
    		}
    		ol.children[circle].className = 'current';
    	})
    

    效果图如下:

    在这里插入图片描述

    此时我们发现了一个bug,点击小圆后再点击右侧箭头不同步,因为它们是两个单独变量控制的

    所以我们要优化js代码

     	// 当我们点击了某个小li 就要把这个li 的索引号给 num  
    	num = index;
    	// 当我们点击了某个小li 就要把这个li 的索引号给 circle  
    	circle = index;
    

    这样就能随心所欲的圆点右箭头的点了

    下面我们来做左侧按钮的功能

    分析:与右侧按钮同理,只需要修改参数即可

    // 8.左侧按钮
    	left.addEventListener('click',function(){
    		if(num == 0){
    			num = ul.children.length - 1;
    			ul.style.left = -num * mainWidth + 'px';
    		}
    		num--;
    		animate(ul, -num*mainWidth);
    		circle--;
    		if (circle < 0) {
    			circle = ol.children.length - 1;
    		}
    		//排他思想
    		for (var i = 0; i < ol.children.length; i++) {
    		    ol.children[i].className = '';
    		}
    		ol.children[circle].className = 'current';
    	})
    

    左按钮与右按钮有相同的代码,我们可以封装起来调用

    js代码

    // 7.右侧按钮
    	right.addEventListener('click',function(){
    		if(num == ul.children.length-1){
    			ul.style.left = 0;
    			num = 0;
    		}
    		num++;
    		animate(ul, -num*mainWidth);
    		circle++;
    		if (circle == ol.children.length) {
    			circle = 0;
    		}
    		// 调用函数
    		circleChange();
    	});
    	// 8.左侧按钮
    	left.addEventListener('click',function(){
    		if(num == 0){
    			num = ul.children.length - 1;
    			ul.style.left = -num * mainWidth + 'px';
    		}
    		num--;
    		animate(ul, -num*mainWidth);
    		circle--;
    		if (circle < 0) {
    			circle = ol.children.length - 1;
    		}
    		// 调用函数
    		circleChange();
    	});
    	function circleChange() {
    		// 先清除其余小圆圈的current类名
    		for (var i = 0; i < ol.children.length; i++) {
    			ol.children[i].className = '';
    		}
    		// 留下当前的小圆圈的current类名
    		ol.children[circle].className = 'current';
    	}
    })
    

    效果图如下:

    在这里插入图片描述

    接下来我们做最后一个功能:自动播放

    分析:添加定时器,自动播放相当于点击了右侧按钮,右侧按钮事件已经写好,所以我们要用到手动调用右侧按钮点击事件 right.click()

    js代码

    // 自动播放轮播图
    	var timer = setInterval(function() {
    		//手动调用点击事件
    		right.click();
    	}, 2000);
    

    效果图如下:

    在这里插入图片描述

    鼠标经过main开启定时器

    鼠标离开main关闭定时器

    js代码

    //2.鼠标经过显示左右按钮
    	main.addEventListener('mouseenter',function(){
    		left.style.display = 'block';
    		right.style.display = 'block';
    		clearInterval(timer);
    		timer = null; // 清除定时器变量
    	})
    	//3.鼠标离开隐藏左右按钮
    	main.addEventListener('mouseleave',function(){
    		left.style.display = 'none';
    		right.style.display = 'none';
    		timer = setInterval(function() {
    			//手动调用点击事件
    			right.click();
    		}, 2000);
    	})
    

    效果图如下:

    在这里插入图片描述

    到这里,轮播图大体上基本已经完成,下面我们再进一步优化

    4.节流阀

    防止轮播图按钮连续点击造成播放过快

    节流阀的目的:当上一个函数动画内容执行完毕,再去执行下一个函数动画,让事件无法连续触发

    核心思路:利用回调函数,添加一个变量来控制,锁住函数和解锁函数

    设置一个变量 var flag = true;
    if(flag){flag = fals; do something}
    利用回调函数,动画执行完毕,flag = true 
    

    效果图如下:

    在这里插入图片描述

    5. 完整代码

    html代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, user-scalable=no,
    		initial-sale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    		<title></title>
    		<link rel="stylesheet" type="text/css" href="css/index.css"/>
    		<script src="js/animate.js"></script>
    		<script src="js/index.js"></script>
    	</head>
    	<body>
    		<div class="main">
    			<!-- 左按钮 -->
    			<a href="javascript:;" class="left">&lt;</a>
    			<!-- 右按钮 -->
    			<a href="javascript:;" class="right">&gt;</a>
    			<!-- 滚动区 -->
    			<ul>
    				<li>
    					<a href="#"><img src="img/focus1.jpg"></a>
    				</li>
    				<li>
    					<a href="#"><img src="img/focus2.jpg"></a>
    				</li>
    				<li>
    					<a href="#"><img src="img/focus3.jpg"></a>
    				</li>
    				<li>
    					<a href="#"><img src="img/focus4.jpg"></a>
    				</li>
    			</ul>
    			<!-- 小圆 -->
    			<ol class="circle">
    			</ol>
    		</div>
    	</body>
    </html>
    

    css代码

    *{
    	padding: 0;
    	margin: 0;
    }
    ul,ol{
    	list-style: none;
    }
    a{
    	text-decoration: none;
    }
    .main{
    	position: relative;
    	width: 721px;
    	height: 455px;
    	margin: 100px auto;
    	overflow: hidden;
    }
    .left,.right{
    	display: none;
    	position: absolute;
    	top: 50%;
    	margin-top: -20px;
    	width: 24px;
    	height: 40px;
    	background: rgba(0, 0, 0, .3);
    	text-align: center;
    	line-height: 40px;
    	color: #fff;
    	font-size: 18px;
    	z-index: 2;
    }
    .right{
    	right: 0;
    }
    .circle {
    	position: absolute;
    	bottom: 10px;
    	left: 50px;
    }
    .main ul{
    	position: absolute;
    	left: 0;
    	top: 0;
    	width: 1000%;
    }
    .main ul li{
    	float:left;
    }
    
    .circle li {
    	float: left;
    	width: 8px;
    	height: 8px;
    	border: 2px solid orange;
    	margin: 0 3px;
    	border-radius: 50%;
    	/*鼠标经过显示小手*/
    	cursor: pointer;
    }
    .current {
        background-color: orange;
    }
    

    js代码

    window.addEventListener('load',function(){
    	//1.获取元素
    	var left = document.querySelector('.left');
    	var right = document.querySelector('.right');
    	var main = document.querySelector('.main');
    	var mainWidth = main.offsetWidth;
    	//2.鼠标经过显示左右按钮
    	main.addEventListener('mouseenter',function(){
    		left.style.display = 'block';
    		right.style.display = 'block';
    		clearInterval(timer);
    		timer = null; // 清除定时器变量
    	})
    	//3.鼠标离开隐藏左右按钮
    	main.addEventListener('mouseleave',function(){
    		left.style.display = 'none';
    		right.style.display = 'none';
    		timer = setInterval(function() {
    			//手动调用点击事件
    			right.click();
    		}, 2000);
    	})
    	//4.动态生成圆圈
    	var ul = main.querySelector('ul')
    	var ol = main.querySelector('.circle')
    	for (var i = 0; i < ul.children.length; i++) {
    		//创建一个li
    		var li = document.createElement('li'); 
    		// 记录当前小圆圈的索引号 通过自定义属性来做 
    		li.setAttribute('index', i);
    		//插入ol
    		ol.appendChild(li);
    		//排他思想
    		li.addEventListener('click', function() {
    			//所有li清除类名
    			for (var i = 0; i < ol.children.length; i++) {
    				ol.children[i].className = '';
    			}
    			//当前li设置current类名
    			this.className = 'current';
    			var index = this.getAttribute('index');
    			 // 当我们点击了某个小li 就要把这个li 的索引号给 num  
    			num = index;
    			// 当我们点击了某个小li 就要把这个li 的索引号给 circle  
    			circle = index;
    			// 5. 点击小圆圈,移动ul 
    			animate(ul, -index * mainWidth);
    		})
    	}
    	//第一个小li设置为current
    	ol.children[0].className = 'current';
    	// 克隆第一张图片(li)放到ul 最后面
    	var first = ul.children[0].cloneNode(true);
    	ul.appendChild(first);
    	// 6.点击右按钮,图片滚动一张
    	var num = 0;
    	 // circle 控制小圆圈的播放
    	var circle = 0;
    	var flag = true;
    	// 7.右侧按钮
    	right.addEventListener('click',function(){
    	if(flag){
    		//关闭节流阀
    			flag = false;
    			if(num == ul.children.length-1){
    				ul.style.left = 0;
    				num = 0;
    			}
    			num++;
    			animate(ul, -num*mainWidth,function(){
    				//打开节流阀
    				flag = true;
    			});
    			circle++;
    			if (circle == ol.children.length) {
    				circle = 0;
    			}
    			// 调用函数
    			circleChange();
    		}
    	});
    	// 8.左侧按钮
    	left.addEventListener('click',function(){
    	if(flag){
    			flag = false;
    			if(num == 0){
    				num = ul.children.length - 1;
    				ul.style.left = -num * mainWidth + 'px';
    			}
    			num--;
    			animate(ul, -num*mainWidth, function(){
    				flag = true;
    			});
    			circle--;
    			if (circle < 0) {
    				circle = ol.children.length - 1;
    			}
    			// 调用函数
    			circleChange();
    		}
    	});
    	function circleChange() {
    		// 先清除其余小圆圈的current类名
    		for (var i = 0; i < ol.children.length; i++) {
    			ol.children[i].className = '';
    		}
    		// 留下当前的小圆圈的current类名
    		ol.children[circle].className = 'current';
    	}
    	// 自动播放轮播图
    	var timer = setInterval(function() {
    		//手动调用点击事件
    		right.click();
    	}, 2000);
    })
    
    展开全文
  • 本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参考价值,希望对学习Layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保存到那个地方就行。 如何使用...

    关于html5中自定义属性的介绍_WEB前端开发

    html5为我们提供了以【data-】为前缀定义需要的属性即可设置自定义属性,如【

    】。本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参考价值,希望对学习Layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保存到那个地方就行。

    NRNn6b.jpg

    如何使用LayUI实现网页轮播图

    想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保存到那个地方就行,

    这里是下载地址:https://www.layui.com

    用layui写轮播图的好处就是代码少

    基本不用写css的样式,这是很开心的

    毕竟我们都很懒Bootstrap分页表格插件使用教程_WEB前端开发

    本篇文章介绍了Bootstrap分页表格插件的使用方法,bootStrap table获取数据有两种方式,一是通过table的data-url属性指定数据源,二是通过JavaScript初始化表格时指定url来获取数据。

    写代码前先要把刚才下载的layui包引进去:

    轮播图

    然后就简单了,直接放图片就行了:

    放完图片,就该写layui的代码了:

    //第一个轮播图

    layui.use('carousel', function() {

    var carousel = layui.carousel;

    //建造实例化

    carousel.render({

    elem: '#test1',

    width: '100%', //设置背景容器的宽度

    arrow: 'always', //始终显示箭头,不会消失

    //anim: 'updown' //切换动画方式:anim

    //indicator:'outside',

    indicator: 'outside' //这个属性:小圆点在外面

    });

    });

    下面再给抛出几张大图:

    7fe6nm.png

    好了,拿去玩吧

    更多layui知识请关注layui使用教程栏目。

    展开全文
  • 常见网页特效案例:网页轮播图

    千次阅读 2020-08-30 05:53:25
    常见网页特效案例:网页轮播图 轮播图也称为焦点图,是网页中比较常见的网页特效。 功能需求: ​ 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 ​ 2.点击右侧按钮一次,图片往左播放一张,以此类推,...

    常见网页特效案例:网页轮播图

    轮播图也称为焦点图,是网页中比较常见的网页特效。

    功能需求:

    ​ 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。

    ​ 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。

    ​ 3.图片播放的同时,下面小圆圈模块跟随一起变化。

    ​ 4.点击小圆圈,可以播放相应图片。

    ​ 5.鼠标不经过轮播图,轮播图也会自动播放图片。

    ​ 6.鼠标经过,轮播图模块, 自动播放停止。

    效果:

    在这里插入图片描述

    代码:

    • js部分
    document.addEventListener('DOMContentLoaded', function() {
        // 封装的动画函数 动画对象obj(obj要有定位)  移动的目标举例target ,返回函数callback;
        function animation(obj, target, callback) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                if (obj.offsetLeft == target) {
                    clearInterval(obj.timer);
                    //简写利用&& 的短路          
                    callback && callback();
                }
                var flag = (target - obj.offsetLeft) / 10;
                var step = flag > 0 ? Math.ceil(flag) : Math.floor(flag);
                obj.style.left = obj.offsetLeft + step + 'px';
            }, 30);
        }
        //获取节点
        var focus = document.querySelector('.focus');
        var focus_l = focus.querySelector('.focus_l');
        var focus_r = focus.querySelector('.focus_r');
        var pic_ul = focus.querySelector('.pic_ul');
        var pic_ol = document.querySelector('.focus_ol');
        //焦点图的第一张的最后一张图是一样的,直接克隆节点
        var pic_li = pic_ul.children[0].cloneNode(true);
        pic_ul.appendChild(pic_li);
        var circle = 0;
        for (var i = 0; i < pic_ul.children.length - 1; i++) {
            var ol_li = document.createElement('li');
            pic_ol.appendChild(ol_li);
            pic_ol.children[i].setAttribute('index', i);
            // 点击小圆圈,可以播放相应图片。
            pic_ol.children[i].addEventListener('click', function() {
                for (var i = 0; i < pic_ol.children.length; i++) {
                    pic_ol.children[i].className = '';
                }
                this.className = 'current';
                num = this.getAttribute('index')
                circle = this.getAttribute('index');
                animation(pic_ul, -this.getAttribute('index') * focus.offsetWidth);
            })
        }
        // 鼠标不经过轮播图,轮播图也会自动播放图片 
        var time = setInterval(function() {
            focus_r.click();
        }, 4000);
        // 未点击小圆圈 ,默认选择给第一个加样式
        pic_ol.firstElementChild.className = 'current';
        //1.鼠标经过轮播图模块,左右按钮显示
        focus.addEventListener('mouseenter', function() {
            focus_l.style.display = 'block';
            focus_r.style.display = 'block';
            clearInterval(time); //鼠标经过,轮播图模块, 自动播放停止。
            time = null;
        });
        //1.鼠标经过轮播图模块,离开隐藏左右按钮。
        focus.addEventListener('mouseleave', function() {
            focus_l.style.display = 'none';
            focus_r.style.display = 'none';
            time = setInterval(function() {
                focus_r.click();
            }, 4000);
        });
        var num = 0;
        var flags = true; //节流阀 防止连续点击,造成轮播速度过快
        //.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。
        focus_r.addEventListener('click', function() {
            if (flags) {
                flags = false;
                if (num == pic_ul.children.length - 1) {
                    num = 0;
                    pic_ul.style.left = '0px';
                };
                num++;
                animation(pic_ul, -num * focus.offsetWidth, function() {
                    flags = true;
                });
                circle++;
                if (circle == pic_ol.children.length) {
                    circle = 0;
                }
                for (var i = 0; i < pic_ol.children.length; i++) {
                    pic_ol.children[i].className = '';
                }
                pic_ol.children[circle].className = 'current';
            }
        });
        focus_l.addEventListener('click', function() {
            if (flags) {
                flags = false;
                if (num == 0) {
                    num = pic_ul.children.length - 1;
                    pic_ul.style.left = -num * focus.offsetWidth + 'px';
                }
                num--;
                animation(pic_ul, -num * focus.offsetWidth, function() {
                    flags = true;
                });
                circle--;
                if (circle < 0) {
                    circle = pic_ol.children.length - 1;
                }
                for (var i = 0; i < pic_ol.children.length; i++) {
                    pic_ol.children[i].className = '';
                }
                pic_ol.children[circle].className = 'current';
            }
        });
    })
    
    • html部分

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>网页轮播图---焦点图</title>
          <!-- 引入css文件 -->
          <link rel="stylesheet" href="css/demo.css">
          <!-- 引入js文件 -->
          <script src="js/demo.js"></script>
      </head>
      <body style="background-color: #CCC;">
          <h1>网页轮播图---焦点图</h1>
          <div class="focus">
              <a href="javascript:;" class="focus_l">
                  &lt; </a>
              <a href="javascript:;" class="focus_r"> &gt;</a>
              <ul class="pic_ul">
                  <li>
                      <a href="#"><img src="upload/pic1.webp" alt=""></a>
                  </li>
                  <li>
                      <a href="#"><img src="upload/pic2.webp" alt=""></a>
                  </li>
                  <li>
                      <a href="#"><img src="upload/pic3.webp" alt=""></a>
                  </li>
                  <li>
                      <a href="#"><img src="upload/pic4.jpg" alt=""></a>
                  </li>
                  <li>
                      <a href="#"><img src="upload/pic5.jpg" alt=""></a>
                  </li>
                  <li>
                      <a href="#"><img src="upload/pic6.webp" alt=""></a>
                  </li>
      
              </ul>
              <ol class="focus_ol">
              </ol>
          </div>
      </body>
      
      </html>
      
    • css部分

      a {
          text-decoration: none;
      }
      
      h1 {
          text-align: center;
      }
      
      ul,
      ol {
          margin: 0;
          padding: 0;
          list-style: none;
      }
      
      .focus {
          position: relative;
          width: 590px;
          height: 470px;
          margin: 50px auto;
          background-color: pink;
          overflow: hidden;
      }
      
      .focus_l,
      .focus_r {
          display: none;
          position: absolute;
          top: 50%;
          width: 40px;
          height: 40px;
          color: white;
          background-color: rgba(0, 0, 0, .3);
          font-size: 20px;
          z-index: 1;
          line-height: 40px;
          text-align: center;
          transform: translateY(-50%);
      }
      
      .focus_l {
          left: 0;
          border-radius: 0 50% 50% 0;
      }
      
      .focus_r {
          right: 0;
          border-radius: 50% 0 0 50%;
      }
      
      .focus_ol {
          position: absolute;
          bottom: 20px;
          left: 100px;
      }
      
      .focus_ol li {
          float: left;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          margin-right: 5px;
          cursor: pointer;
          border: 3px solid #fff;
      }
      
      .pic_ul {
          position: relative;
          height: 100%;
          width: 20000px;
      }
      
      .pic_ul li {
          height: 100%;
          float: left;
      }
      
      .pic_ul img {
          height: 100%;
      }
      
      .current {
          background-color: #FFF;
      }
      
    展开全文
  • 20行js代码实现网页轮播图效果(2020年...效果图静态图动态图当前功能是:网页轮播图在自动切换的同时还可以手动切换源代码picplay#divout {max-width: 1000px;position: relative;margin: 0 auto;}.imgdiv img {wid...
  • 网页轮播图——原生JS 1.使用onmouseenter();onmouseleave();这两个方法对左右箭头进行显示与隐藏的操作。并且实现光标移上时显示左右箭头,光标离开时隐藏左右箭头。 2.声明变量Timer代表轮播一次图片所用的时间...
  • 网页轮播图的实现

    2020-12-04 15:24:52
    网页轮播图的实现 实现原点切换图片图片无缝衔接播放,左右按钮切换图片等功能,较为完善。 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></...
  • HTML JavaScript 简单网页轮播图

    千次阅读 2019-06-29 20:51:28
    HTML JavaScript 简单网页轮播图 文章目录HTML JavaScript 简单网页轮播图准备代码结果 准备 将四张图片粘贴至img文件夹 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
  • js原生网页轮播图

    2020-02-21 23:03:34
    轮播图也称为焦点图,是网页中比较常见的网页特效。 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 3.图片播放的同时,...
  • 网页图片切换经典例子,实现左右等来回切换功能
  • web网页轮播图/js控制轮播图

    千次阅读 2018-07-27 08:57:42
    以下是完整网页轮播图完整代码,喜欢的码农可以赋值进行调试使用: <!DOCTYPE html> < html >   < head >   < meta charset = "UTF-8" >   < title > title >   < style ...
  • css、html实现网页轮播图

    千次阅读 2019-12-19 14:56:51
    效果展示: 轮播图 代码下载地址: css、html实现网页轮播图源代码下载
  • 企业级开发网页轮播图Swiper 几乎每个网页都会用到轮播图swiper,今天就‘2分钟企业级快速开发swiper’任意一种轮播图博客 轮播图效果: 1、首先打开网址 https://www.swiper.com.cn/ 2、点击找到最近喜欢的轮播...
  • 网页图片切换显示效果.适合在网站主界面显示图片新闻。稍作修改即可使用。
  • 轮播图也称为焦点图,是网页中比较常见的网页特效。 功能需求: ​ 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 ​ 2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。 ​ 3.图片播放的...
  • 网页图片切换Flash版

    2020-06-24 08:59:31
    Flash图片切换网页上的Flash焦点代码,和幻灯片是一样的,只不是内核不是基于JS,而是flash的SWF文件,有多种的图片切换风格,幻灯片尺寸大小可调整,所调用的图片张数也可调整。
  • 一个很好看的网页图片切换效果的源代码,直接复制到你的网页上就可以用啦。。。
  • javascript制作网页轮播图效果

    千次阅读 2019-05-10 08:33:07
    //保存当前展示的轮播图的索引,默认0 var len=as.length; var t; //自动轮播 t=setInterval(moveNext,2000); //鼠标经过,停止轮播 o.onmouseover=function(){ clearInterval(t); o.style....
  • 1.方法使用findall方法 public List<newsType> findAll(){ return newsTypeDao.findAll(); } 2.controller @RequestMapping("/tomain") public String getEdit(Model model){ ...ne...
  • 网页图片切换Js CSS兼容版,代码示例:  //addTab("标签栏ID","标签栏子的标签tagname",左右按钮是否在标签栏中并在两侧,"标签栏选中时的className","内容栏ID","内容栏子的标签tagname",左右按钮是否在内容栏中并...
  • 网页轮播图多特效源代码

    千次阅读 2018-09-06 12:28:11
    &lt;!...gt;...运动(轮播图)&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style&gt; body{background:#666;}ul{padding:0;margin:0;}li{margin:0;paddin

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 80,739
精华内容 32,295
关键字:

网页轮播图