PC端网页特效:轮播图

这篇具有很好参考价值的文章主要介绍了PC端网页特效:轮播图。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

轮播图

功能需求:

  • 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。
  • 点击右侧按钮一次,图片往左播放一张, 左侧按钮同理。
  • 图片播放的同时,下面小圆圈模块跟随一起变化。
  • 点击小圆圈,可以播放相应图片。
  • 鼠标不经过轮播图, 轮播图也会自动播放图片。
  • 鼠标经过,轮播图模块, 自动播放停止。

在做好的网页中添加轮播效,JavaScript,javascript,前端,开发语言,css3,css轮播图JavaScript源码在最下面

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
      <!-- 这个animate.js 必须写到 index.js的上面引入 -->
      <script src='./JS/animate.js'></script>
      <!-- 引入我们首页的js文件 -->
      <script src="./JS/index.js"></script>
      <link rel="stylesheet" href="./index.css">
</head>

<body>
   <div class="w">
        <div class="main">
            <div class="focus fl">
                <!-- 左侧按钮 -->
                <a href="javascript:;" class="arrow-l"></a>
                <!-- 右侧按钮 -->
                <a href="javascript:;" class="arrow-r"></a>
                <!-- 核心的滚动区域 -->
                <ul>
                    <li>
                        <a href="#"><img src="upload/focus.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus1.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus2.jpg" alt=""></a>
                    </li>
                    <li>
                        <a href="#"><img src="upload/focus3.jpg" alt=""></a>
                    </li>       
                </ul>
                <!-- 小圆圈 -->
                <ol class="circle">
                </ol>
            </div>
            </div>
            </div>   
</body>
</html>

index.css

.w {
    width: 1200px;
    margin: 0 auto;
}
/*清除元素默认的内外边距  */
* {
    margin: 0;
    padding: 0
}

/*去掉列表前面的小点*/
li {
    list-style: none;
}

/*让button 按钮 变成小手*/
button {
    cursor: pointer;
}
/*取消链接的下划线*/
a {
    color: #666;
    text-decoration: none;
}
/*清除浮动*/
a {
    color: #666;
    text-decoration: none;
}
.main {
    width: 900px;
    height: 455px;
    margin-left: 219px;
    margin-top: 10px;
}
.fl {
    float: left;
}
.focus {
    position: relative;
    width: 721px;
    height: 455px;
    background-color: purple;
    overflow: hidden;
}
.focus ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 600%;
}
.focus ul li {
    float: left;
}
.arrow-l,
.arrow-r {
    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-family: 'icomoon';
    font-size: 18px;
    z-index: 2;
}
.arrow-r {
    right: 0;
}
.circle {
    position: absolute;
    bottom: 10px;
    left: 50px;
}
.circle li {
    float: left;
    width: 8px;
    height: 8px;
    /*background-color: #fff;*/
    border: 2px solid rgba(255, 255, 255, 0.5);
    margin: 0 3px;
    border-radius: 50%;
    /*鼠标经过显示小手*/
    cursor: pointer;
}
.current {
    background-color: #fff;
}

animate.js

function animate(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器,只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        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();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式:(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

轮播图JavaScript分解

1.新建js文件, 引入页面中。鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。

在做好的网页中添加轮播效,JavaScript,javascript,前端,开发语言,css3,css

第一步获取左右按钮,添加鼠标经过和离开事件,鼠标经过,显示左右按钮,鼠标离开,隐藏左右按钮

2.动态生成底部小圆圈

在做好的网页中添加轮播效,JavaScript,javascript,前端,开发语言,css3,css

获取ul和ol元素,通过创建元素的方式,添加li元素,然后将第一个li元素的小圆点默认背景为白色

其中小圆点的css代码实现为:

在做好的网页中添加轮播效,JavaScript,javascript,前端,开发语言,css3,css
效果如下:

在做好的网页中添加轮播效,JavaScript,javascript,前端,开发语言,css3,css

3.点击哪个小圆圈,哪个小圆圈就变背景色(排他思想)

在做好的网页中添加轮播效,JavaScript,javascript,前端,开发语言,css3,css

之所以在创建li的时候添加点击事件是因为,每一个小li都需要添加如果将点击事件放在for循环外面,那么只有最后一个li添加了点击事件

4.点击小圆圈切换图片
在做好的网页中添加轮播效,JavaScript,javascript,前端,开发语言,css3,css
在做好的网页中添加轮播效,JavaScript,javascript,前端,开发语言,css3,css

  • 此时用到animate动画函数,将js文件引入(注意,因为index.js 依赖 animate.js 所以,animate.js 要写到
    index.js 上面)
  • 使用动画函数的前提,该元素必须有定位
  • 是ul 移动 而不是小li
  • 滚动图片的核心算法: 点击某个小圆圈 , 就让图片滚动 小圆圈的索引号乘以图片的宽度做为ul移动距离
  • 此时需要知道小圆圈的索引号, 我们可以在生成小圆圈的时候,给它设置一个自定义属性,点击的时候获取这个自定义属性即可。

5.点击右侧按钮,图片滚动
在做好的网页中添加轮播效,JavaScript,javascript,前端,开发语言,css3,css

点击右侧按钮一次,就让图片滚动一张。 声明一个变量num, 点击一次,自增1, 让这个变量乘以图片宽度,就是 ul的滚动距离。图片无缝滚动原理:把ul 第一个li 复制一份,放到ul 的最后面 当图片滚动到克隆的最后一张图片时, 让ul快速的、不做动画的跳到最左侧: left 为0 同时num 赋值为0,可以从新开始滚动图片了

但是这样做会出现一个问题:第一个是下面的小圆圈会多一个,第二个是灵动性不好,所以我们可以把在最后添加li的方法改为克隆第一张图片的方法

优化方法:克隆最后一张图片
在做好的网页中添加轮播效,JavaScript,javascript,前端,开发语言,css3,css

克隆第一张图片,克隆ul 第一个li cloneNode() 加true 深克隆 复制里面的子节点 false 浅克隆 添加到 ul 最后面 appendChild

6.点击右侧按钮,小圆圈跟随一起变化

在做好的网页中添加轮播效,JavaScript,javascript,前端,开发语言,css3,css
7.点击左侧按钮,实现翻转(方法与右侧按钮类似)
在做好的网页中添加轮播效,JavaScript,javascript,前端,开发语言,css3,css

8.实现自动播放功能,并且鼠标在图片时,不切换图片,鼠标离开,自动切换图片
在做好的网页中添加轮播效,JavaScript,javascript,前端,开发语言,css3,css
在做好的网页中添加轮播效,JavaScript,javascript,前端,开发语言,css3,css

在上面鼠标经过和鼠标离开分别添加停止和开启定时器的功能

index.js完整源码文章来源地址https://www.toymoban.com/news/detail-776885.html

window.addEventListener('load', function () {


    //获取左右按钮
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    //鼠标经过显示左右按钮,停止定时器
    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(){
            //手动调用点击事件
            arrow_r.click();
        },2000)
    })
    //动态生成小圆圈,有几张图生成几个小圆圈,图的个数可以通过li的个数得到
    var ul = focus.querySelector('ul');//ul很多,我们只需要fucus里面的ul
    var ol = focus.querySelector('.circle')
    //通过ul.children.length可以获得ul中有几个li,即有几张图片
    for (var i = 0; i < ul.children.length; i++) {
        //创建li,把li插入到ol中
        var li = document.createElement('li');
        li.setAttribute('index', i);//自定义设置小圆圈的索引号
        ol.appendChild(li);

        //生成小圆圈的同时,绑定小圆圈的点击事件
        li.addEventListener('click', function () {
            //排他思想,先把所有的li全部去除类
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            //点击哪个li就设置哪个li为current类
            this.className = 'current';
            //点击小圆圈移动图片,移动的是ul,不是li
            //ul的移动距离就是小圆圈的索引号乘以图片的宽度,向左移动,是负值
            //点击哪个li,就获得哪个li的索引号
            var index = this.getAttribute('index');//获取索引号
            //当我们点击了某个li,就要把当前的索引号给num
            num = index;
            //当我们点击了某个li,就要把当前的索引号给circle
            circle = index;
            animate(ul, -index * focusWidth);
        })

        //之所以在创建li的时候添加点击事件是因为,每一个小li都需要添加
        //如果将点击事件放在for循环外面,那么只有最后一个li添加了点击事件
    }

    //把ol中第一个li设置current类(第一个li默认为白色)
    ol.children[0].className = 'current';
    //克隆第一张图片
    //克隆不会多出一个小圆圈的原因是,我们在生成小圆圈的下面克隆了第一张图片,因此不会在多出小圆圈
    var first = ul.children[0].cloneNode(true);//深拷贝
    ul.appendChild(first);
    var num = 0;
    //点击右侧按钮,图片滚动
    var circle = 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);
        //点击右侧按钮,小圆圈跟随一起变化 ,可以再声明一个变量控制小圆圈的播放
        circle++;
        //如果circle ==4,说明我们走到了最后克隆的那张图片了,此时circle要赋值为0
        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';

    })

    //左侧按钮实现向左滚动
    arrow_l.addEventListener('click', function () {
        //如果走到最后一张图片,此时我们的ul要快速复原,left改为0
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left =  -num * focusWidth + 'px';
        }
        num--;
        animate(ul, -num * focusWidth);
        //点击右侧按钮,小圆圈跟随一起变化 ,可以再声明一个变量控制小圆圈的播放
        circle--;
        //如果circle <0,第一个小圆圈要改为第四个小圆圈
        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';

    })
    //实现自动播放功能
    var timer = setInterval(function(){
        //手动调用点击事件
        arrow_r.click();
    },2000)
 

})

到了这里,关于PC端网页特效:轮播图的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • html制作网页案例代码----(故宫博物馆9页)特效很多

    ⛵ 源码获取 文末联系 ✈ Web前端开发技术 描述 网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | 等网站的设计与制作 | HTML期末大学生网页设计作业,Web大学生网页 HTML:结构

    2024年02月05日
    浏览(51)
  • css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效

    css3+javaScript实现一个左右钟摆-摇晃的红灯笼网页特效!前天逛博客时无意中看见了,别人的博客顶部有一个会左右钟摆的摇晃的红灯笼,产生了想法,我也想给自己做一个,但是网上找了很多方案,都没有实现。终于在昨天晚上搜索,找到了利用css3和js一起组合的技术,实现

    2024年01月20日
    浏览(45)
  • 10个炫酷特效的网页写法(附源码),拿去就能用,奈斯奈斯

    这是我借鉴其他博主的,给网页加个背景,给鼠标加个特效,“使用简单”,“效果爆炸”的页面,分享给大家,如果觉得有帮助可以点赞收藏支持一下,如果能关注一下就再好不过了。 内容转载于 https://blog.csdn.net/m0_64346035/article/details/124436138 目录 1、鼠标点击弹出爱心 2、

    2024年02月06日
    浏览(46)
  • ❤️创意网页:HTML5 Canvas技术实现绚丽多彩的烟花特效教程

    ✨ 博主: 命运之光   🌸 专栏: Python星辰秘典 🐳 专栏: web开发(简单好用又好看) ❤️ 专栏: Java经典程序设计 ☀️ 博主的其他文章: 点击进入博主的主页 前言: 欢迎踏入我的Web项目专栏,一段神奇而令人陶醉的数字世界! 🌌 在这里,我将带您穿越时空,揭开属于

    2024年02月16日
    浏览(40)
  • 情人节程序员用HTML网页表白【可爱的节日贺卡ui动画特效】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

    这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用网页告诉

    2024年02月02日
    浏览(65)
  • uniapp 在 H5、App、微信小程序中使用 svga 格式动画详细示例教程,附插件源码及示例源码(常见于网页直播刷礼物特效功能)

    兼容 h5 网页,微信小程序 和 App。 本文详细讲解在 uni-app项目中,如何实现 svga 格式动画的引入及展示。 组件源码及使用文档都有! 你直接复制本文的源码,即可得到封装好的 svga 组件,样式随便更改:

    2024年02月10日
    浏览(124)
  • ❤️创意网页:打造简洁美观的网页轮播图(HTML简单实现轮播图)操作简单可以直接使用

    ✨ 博主: 命运之光 🌸 专栏: Python星辰秘典 🐳 专栏: web开发(简单好用又好看) ❤️ 专栏: Java经典程序设计 ☀️ 博主的其他文章: 点击进入博主的主页 前言: 欢迎踏入我的Web项目专栏,一段神奇而令人陶醉的数字世界! 🌌 在这里,我将带您穿越时空,揭开属于

    2024年02月17日
    浏览(48)
  • 移动端网页轮播图

    在制作移动端网页轮播图之前,我们先补充一些移动端的基本触屏事件及事件对象! 1.触屏事件概述 移动端浏览器兼容性比较好,所以我们不需要考虑以前 JS 的兼容性问题,可以放心地使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件,Android 和 IOS 都有

    2023年04月08日
    浏览(42)
  • 网页轮播图制作(html+css+js)

            目的:用于自己做记录,记录制作的过程以及遇到的一些问题。内容参考来自b站的up主:黑马前端 的pink老师JavaScript基础语法课程。 (1)当鼠标经过轮播图,左右两边的按钮出现,离开则隐藏按钮; (2)点击左侧按钮,图片向右播放一张,以此类推,右侧同理;

    2024年02月08日
    浏览(55)
  • 轮播图,用vue来写一个简单的轮播图

    写的很简单,就是一个小练习,哈哈哈,下面的几张图分别是轮播图的第一张,中间图,最后一张的效果图。 使用了vue 中的属性绑定 v-bind ,v-show 以及 事件监听 v-on 指令。 思路: 1.vue实例中声明一个data属性imgArr,用于存放每张轮播图的地址, 2.同时定义一个默认起始索引in

    2024年02月16日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包