网上有很多的例子介绍,在这里我所做的无缝滚动就是 通过改变元素的left值让图片呈现左右滚动的效果。
我们首先看一下 div+css 的结构样式:
div+css代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } ul,ol{ list-style: none; } /*消除图片底部3像素距离*/ img{ vertical-align: top; } .scroll{ width: 500px; height: 200px; margin: 100px auto; border: 1px solid #ccc; padding: 7px; overflow: hidden; position: relative; } .box{ width: 500px; height: 200px; overflow: hidden; position: relative; } .box ul{ width: 600%; position: absolute; left: 0; top: 0; } .box ul li{ float: left; } .scroll ol{ position: absolute; right: 10px; bottom: 10px; } .scroll ol li{ float: left; width: 20px; height: 20px; background: pink; text-align: center; line-height: 20px; border-radius: 50%; background-color: pink; margin-left:10px ; cursor: pointer; } .scroll ol li.current{ background-color: purple; } </style> </head> <body> <div id="scroll" class="scroll"> <div id="box" class="box"> <ul id="ul"> <li><img src="/UploadFiles/2021-04-02/1.jpg">展示效果如图:
接下来js代码,再此之前我们要明白,小圆点 1 2 3 并不是写死的,它是根据ul li中的图片张数来决定的 ,所以我们要先把div中ol li中的代码去掉。
要实现无缝滚动就需要多一张图片才行 ,即克隆第一张图片,放到最后面。此时css布局保留,div中只剩下:
<body> <div id="scroll" class="scroll"> <div id="box" class="box"> <ul id="ul"> <li><img src="/UploadFiles/2021-04-02/1.jpg">此时我们用js代码生成小圆点
var scroll = document.getElementById("scroll"); // 获得大盒子 var ul = document.getElementById("ul"); // 获得ul var ulLis = ul.children;// 获得ul的盒子 以此来生成ol中li的个数 var liWidth = ul.children[0].offsetWidth;// 获得每个li的宽度 // 操作元素 // 因为要做无缝滚动,所以要克隆第一张,放到最后一张后面 // 1. 克隆元素 ul.appendChild(ul.children[0].cloneNode(true)); // 2.创建ol 和li vaar ol = document.createElement("ol");//创建ol元素 scroll.appendChild(ol);// 把ol放到scroll盒子里面去 for (var i=0;i<ulLis.length-1;i++) { var li = document.createElement("li");// 创建li元素 li.innerHTML = i + 1;// 给li里面添加文字 1 2 3 4 5 ol.appendChild(li);// 将li元素添加到ol里面 } ol.children[0].className = "current";// ol中的第一个li背景色为purple此时ol li元素即小圆点创建完毕 我们接着用js做动画
动画部分包括:
1.鼠标经过第几个小圆点,就要展示第几张图片,并且小圆点的颜色也发生变化
2.图片自动轮播,(这需要一个定时器)
3.鼠标经过图片,图片停止自动播放(这需要清除定时器)
4.鼠标离开图片,图片继续自动轮播 (重新开始定时器)
这里我们封装了一个animate()动画函数// 动画函数 第一个参数,代表谁动 第二个参数 动多少 // 让图片做匀速运动,匀速动画的原理是 当前的位置 + 速度 即 offsetLeft + speed function animate(obj,target){ // 首先清除掉定时器 clearInterval(obj.timer); // 用来判断 是+ 还是 - 即说明向左走还是向右走 var speed = obj.offsetLeft < target "px"; // 有可能有小数的存在,所以在这里要做个判断 if (Math.abs(result) <= Math.abs(speed)) { clearInterval(obj.timer); obj.style.left = target + "px"; } },10); }定时器 函数
var timer = null; // 轮播图的定时器 var key = 0;// 控制播放的张数 var circle = 0;// 控制小圆点 timer = setInterval(autoplay,1000);// 自动轮播 function autoplay(){ /*自动轮播时,要对播放的张数key进行一个判断,如果播放的张数超过ulLis.length-1, 就要重头开始播放. 因为我们克隆了第一张并将其放在最后面,所以我们要从第二张图片开始播放*/ key++; // 先++ if(key > ulLis.length-1){// 后判断 ul.style.left = 0; // 迅速调回 key = 1; // 因为第6张是第一张,所以播放的时候是从第2张开始播放 } // 动画部分 animate(ul,-key*liWidth); // 小圆点circle 当显示第几张图片是,对应的小圆点的颜色也发生变化 /*同理,对小圆点也要有一个判断*/ circle++; if (circle > olLis.length-1) { circle = 0; } // 小圆点颜色发生变化 for (var i = 0 ; i < olLis.length;i++) { // 先清除掉所用的小圆点类名 olLis[i].className = ""; } // 给当前的小圆点 添加一个类名 olLis[circle].className = "current"; }好啦,这里我们展示了主要代码,具体代码,查看这里下载js实现轮播效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年09月24日
2024年09月24日
- 陈随意2008-爱的总铺师[美华][WAV+CUE]
- 裘德《一棵树所创造的》[320K/MP3][56.21MB]
- 裘德《一棵树所创造的》[24bit 48kHz][FLAC/分轨][355.1MB]
- 卓依娜姆《美人谋 网剧影视原声带》[320K/MP3][48.29MB]
- 张星特.2024-流绪呢喃【中视鸣达】【FLAC分轨】
- 邓紫棋.2010-MYSECRET【蜂鸟音乐】【WAV+CUE】
- 江惠仪.2011-感謝您【禾广娱乐】【FLAC分轨】
- 韩红2005-精选[首版][WAV+CUE]
- 张敬轩.2004-A.M/P.M【几何文化】【WAV+CUE】
- 范文芳1999-真心话电影原声带[HYPE][WAV+CUE]
- 袁培华.1990-我写不出一首情歌给我最爱的你【可登】【WAV+CUE】
- 群星.2007-歌林10年流行岁月12CD【歌林】【WAV+CUE】
- 软硬天师.2006-LONG.TIME.NO.SEE【金牌大风】【WAV+CUE】
- 卓依娜姆《美人谋 网剧影视原声带》[FLAC/分轨][162.27MB]
- 国风大师纯音系列《蒋倩 :古筝演奏家》1CD[MP3][160.7MB]