实现某宝上面的网页轮播图+缓动效果

代码和注释：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style type="text/css">*{                                          /*清除浏览器原带的格式*/margin: 0;padding: 0;}#content{                                     /*注意不要向content添加border和margin属性会影响offset的使用*/width: 600px;height: 300px;margin: 0 auto;                     /*设置为0没事*/font-size: 12px;position: relative;                     /*添加定位并超过子元素父盒子部分隐藏*/overflow: hidden;}#img-s li{list-style-type: none;                     /*浮动定位，让li标签一排显示*/float: left;}#img-s{width: 600%;                                /*之所以要把ul设置这么大是因为要给li安排浮动，让li一排显示 */position: absolute;                         /*如果ul太小li就无法浮动，而li仍然会一列显示 */}.pre{list-style-type:none;                       /*设置小圆圈按钮选中之前的样式*/width: 10px;height: 10px;cursor: pointer;border:3px rgba(255,255,255,0.5) solid;margin: 0 3px;border-radius:50% 50% ;float: left;}.current{background-color: white;                    /*设置小圆圈按钮选中之后的样式*/width: 12px;height: 12px;box-shadow: 2px 2px 10px white;}#pot-s{position: absolute;                 /*对小圆圈相对于content设置定位*/top: 250px;left: 100px;}img{width: 600px;                                   /*图片大小*/height: 300px;}a{z-index: 3;                                     /*a标签样式*/display: none;font-size: 50px;color: white;text-align: center;width: 60px;height: 70px;background-color:rgba(55,25,55,0.2) ;text-decoration: none;position: absolute;top: 120px;}.arrow-l{left: 20px;                                     /*左箭头*/}.arrow-r{right: 20px;                                       /*右箭头*/}</style><script type="text/javascript" defer="">window.addEventListener('load',function () {var content=document.querySelector('#content');var img_s=document.querySelector('#img-s');var pot_s=document.querySelector('#pot-s');var arrow_l=document.querySelector('.arrow-l');var arrow_r=document.querySelector('.arrow-r');st_current_con();content.addEventListener('mouseenter',function () {         //content鼠标放上去的时候左右箭头显示，且图片停止滚动arrow_l.style.display='block';arrow_r.style.display='block';clearInterval(pot_s.timer);});content.addEventListener('mouseleave',function ( ) {        //content鼠标离开的时候左右箭头消失，且图片重新滚动arrow_l.style.display='none';arrow_r.style.display='none';st_current_con();});for (let i=0;i<img_s.children.length;i++){let li=document.createElement('li');                    //创建li标签并添加对应的css样式，设置自定义属性和对应的点击事件li.className='pre';li.setAttribute('data-index',i);                           //注意自定义属性是有一定的定义格式和访问格式的pot_s.appendChild(li);pot_s.children[i].addEventListener('click',function () {for (let j=0;j<pot_s.children.length;j++) {             //排他思想pot_s.children[j].className='pre';}this.className='pre current';moves(img_s,-img_s.parentElement.offsetWidth*pot_s.children[i].dataset.index);})}pot_s.children[0].className='pre current';                      //初始化，点进网页的时候第一个小圆点亮var num=0;                                                              //对应img图片设定对应的索引var circle=0;                                                          //对应圆圈图片设定对应的索引function st_current_con() {                                                 //页面图片自动缓动的封装函数pot_s.timer=setInterval(function() {if (num === pot_s.children.length) {                     //如果超出长度，则对num进行处理，且图片瞬移到第一个num = 0;img_s.style.left=0+'px';}moves(img_s, (++num) * -img_s.parentElement.offsetWidth);     //滚动到下一个imgfor (let j=0;j<pot_s.children.length;j++) {                 //排它思想pot_s.children[j].className='pre';}if (circle ===pot_s.children.length-1) {                            //如果超出长度，则对circle进行处理circle=-1;}pot_s.children[++circle].className='pre current';},1500);}var pict=img_s.children[0].cloneNode(true);                                 //克隆第一个imgimg_s.appendChild(pict);                                                         //把它加载最后面arrow_l.addEventListener('click',function () {                      //左箭头的点击事件if(!(img_s.offsetLeft%img_s.parentElement.offsetWidth)){            //只有当当前图片复原之后才可以缓动出下一个图片，否则会引起图片播放混乱(function () {if (num ===0) {                     //如果超出长度，则对num进行处理，且图片瞬移到最后一个num = 4;img_s.style.left=-img_s.parentElement.offsetWidth*num+'px';}moves(img_s, (--num) * -img_s.parentElement.offsetWidth);     //滚动到下一个imgfor (let j=0;j<pot_s.children.length;j++) {                 //排它思想pot_s.children[j].className='pre';}if (circle ===0) {                                          //如果超出长度，则对circle进行处理circle=pot_s.children.length;}pot_s.children[--circle].className='pre current';}())}});arrow_r.addEventListener('click',function () {                                  //右箭头的点击事件if(!(img_s.offsetLeft%img_s.parentElement.offsetWidth)){                    //只有当当前图片复原之后才可以缓动出下一个图片，否则会引起图片播放混乱(function () {if (num === pot_s.children.length) {                     //如果超出长度，则对num进行处理，且图片瞬移到第一个num = 0;img_s.style.left=0+'px';}moves(img_s, (++num) * -img_s.parentElement.offsetWidth);     //滚动到下一个imgfor (let j=0;j<pot_s.children.length;j++) {                 //排它思想pot_s.children[j].className='pre';}if (circle ===pot_s.children.length-1) {                    //如果超出长度，则对circle进行处理circle=-1;}pot_s.children[++circle].className='pre current';}())}});function moves(doc,target){                             //让img图片缓动的封装函数clearInterval(doc.timer);doc.timer=setInterval(function () {var x=(target-doc.offsetLeft)/10;var step=x>0?Math.ceil(x):Math.floor(x);doc.style.left=doc.offsetLeft+step+'px';if (target===doc.offsetLeft){clearInterval(doc.timer);}},30)}})</script></head><body><div id="content"><a href="javascript:;" class="arrow-l">&lt;</a>             <!--javascript:;为禁止跳转--><a href="javascript:;" class="arrow-r">&gt;</a>              <!-- &lt; 和 &gt; 为html 实体字符--><ul id="img-s"><li><img src="../images/image03.jpg" alt="" title=""/></li><li><img src="../images/image04.jpg" alt="" title=""/></li><li><img src="../images/image01.jpg" alt="" title=""/></li><li><img src="../images/image06.jpg" alt="" title=""/></li></ul><ul id="pot-s"></ul></div></body>
</html>

效果图：

***
本文只用于个人学习和纪录

网页轮播图+缓动效果相关推荐

【JavaScript】缓动动画、网页轮播图
缓动动画动画函数封装 1.1 动画实现原理缓动动画 1.1 缓动效果原理 1.2 动画函数多个目标值之间移动 1.3 动画函数添加回调函数 1.4 动画函数封装到单独JS文件里面案例:京东侧边栏 ...
Javascript-API-BOM、动画函数、网页轮播图、节流阀、筋斗云、固定侧边栏返回顶部案例
动画实现原理核心原理:通过定时器 setInterval() 不断移动盒子位置. 实现步骤: 获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件 ...
用javascript做网页轮播图
文章目录网页轮播图: 功能需求: 动图展示: 代码分析: 主题结构部分: 样式设置: 交互效果: 引用缓动动画(图片滚动的效果) 网页轮播图: 轮播图也称为焦点图,是网页中比较常见的网页特效. 功能 ...
【JavaScript】网页轮播图
目录 HTML搭建功能实现小圆圈事件左右按钮事件自动播放轮播图也叫焦点图,是网页中比较常见的网页特效. 功能: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往 ...
web前端html图片轮播,如何使用LayUI实现网页轮播图_WEB前端开发,layui,轮播图
关于html5中自定义属性的介绍_WEB前端开发 html5为我们提供了以[data-]为前缀定义需要的属性即可设置自定义属性,如[ ].本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参 ...
layui的轮播图片自适应大小_如何使用LayUI实现网页轮播图
详细内容本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参考价值,希望对学习Layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保 ...
原生js进阶版轮播图实现(走马灯效果，无缝衔接)
原生js进阶版轮播图实现(走马灯效果,无缝衔接) 利用原生js手写一个轮播图,是上一篇文章的简易版的一个进阶,本次轮播图主要是利用定位和定时器实现了走马灯效果,并且是左右轮播.实现过程与代码也是很简单 ...
html+css部分面试题（4）+拼多多商家入驻网页轮播图hover效果
目录 31:为什么要初始化样式? 32. BFC 是什么? 33.HTML 与 XHTML--二者有什么区别? 34.html 常见兼容性问题? 35.对 WEB 标准以及 W3C 的理解与认识补充 ...
网页轮播图（详细版）
在网页中,我们经常会看到各种轮播图的效果,它们到底是怎样实现的呢?今天,我们就一起来看一下!首先,我们需要准备若干张图片,在这里我准备了五张图片. 功能需求: 鼠标经过轮播图模块,左右按钮显示,离开隐 ...

网页轮播图+缓动效果

代码和注释：

效果图：

网页轮播图+缓动效果相关推荐

最新文章

热门文章