这是一个朋友前天刚接触这个行业不久问我的一个问题,我网上也查了一些,看了下代码,不喜欢;所以
自己动手做了这个小demo;希望大家可以借鉴一下
首先页面布局:其中最主要的是对类wrapper设置position:relative;overflow:hidden;
类items设置:position:absolute等属性;
接下来就事分析如何轮播:
我的思路是:点击下一页的时候:items的animate向左移动
animate({“marginLfet”:”-800px”},1000,function(){});其中function({})里执行的方法:
首先将item-1放到$(”.items li”)最后面,然后items({marginLeft:0})
【一开始在想,将item-1追加到$(”.items li”)最后面之后,那么一开始item-1是不是要移除掉呢,
然后我观察了下一页的方法执行后的页面元素,才发现这个担心是多余的】
下面是执行下一页之后的页面元素:
【大家发现了没有,第一个li元素跑到最后面了,然后接下来点击上一页的时候,我们只需要取最后一个li元素就行了】
思路:点击上一页的时候,items的css向左移动({“marginLfet”:0}),然后$(”.items li”).eq(3)放在items第一个位置里,然后动画aniamte({“marginLeft”:0},1000);
这时候大家脑补一下:items的css向左移动({“marginLfet”:0})和$(”.items li”).eq(3)[即item-1]放在items第 一个位置里都是瞬间完成,人眼是看不出来的;所以再之后执行aniamte({“marginLeft”:0},1000)时候,发现item-1慢悠悠从左侧出来
js代码如下:
接下来就是定时器了:自动轮播
【timer一定去做下判断,不然会导致连续点击的时候,图片移动会越来越快】
还有最后一个setTimeout这个:在点击上下一页的时候,我会清除定时器,所有我会在其事件里添加它,然后三秒之后再执行show(),自动轮播;
最后点击事件:
总体页面展示:
本文由知识库于2021-09-28发表在龙哥云资源网,如有疑问,请联系我们。本文链接:https://www.longgeyun.com/knowledge/5851.html
上一篇plc与plc通讯怎么连接(三菱plc与威纶通讯设置)
下一篇共享文件夹打不开怎么办(win10共享找不到网络路径)
高校最常见的食物中毒有哪些
急性肠胃炎与食物中毒怎么分辨
莫代尔面料和纯棉面料哪个好内裤 哪个儿童可以穿
为什么说开速腾的都不是一般人 速腾开出去有面子吗
活珠子和毛蛋的区别在哪里 哪个好吃
家里放石头的八大禁忌有哪些 家中石头最佳摆放位置
怎么判断自己帅还是丑男 男生怎样越长越帅
单身女生红绳戴左手还是右手 女生红绳戴哪里合适
Pr2020零基础快速入门
文字转语音App最新版3.0
APP下载页源码-带后台