1左右焦点无缝轮播写法
CSS部分
<style type="text/css">
body,
ul,
ol,
li,
img {
margin: 0;
padding: 0;
list-style: none;
}
#box {
width: 490px;
height: 170px;
padding: 5px;
position: relative;
border: 1px solid #ccc;
margin: 100px auto 0;
overflow: hidden;
}
.ad {
width: 490px;
height: 170px;
overflow: hidden;
position: relative;
}
#box img {
width: 490px;
}
.ad ol {
position: absolute;
right: 10px;
bottom: 10px;
}
.ad ol li {
width: 20px;
height: 20px;
line-height: 20px;
border: 1px solid #ccc;
text-align: center;
background: #fff;
float: left;
margin-right: 10px;
cursor: pointer;
_display: inline;
}
.ad ol li.current {
background: yellow;
}
.ad ul li {
float: left;
}
.ad ul {
position: absolute;
top: 0;
width: 2940px;
}
.ad ul li.current {
display: block;
}
#arr {
display: none;
}
#arr span {
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑体';
font-size: 30px;
color: #fff;
opacity: 0.3;
border: 1px solid #fff;
}
#arr #right {
right: 5px;
left: auto;
}
div {
background-color: red;
filter: alpha(opacity=50);
}
HTML部分
<div id="box" class="all">
<div class="ad">
<ul id="imgs">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
</ul>
</div>
<div id="arr">
<span id="left"> < </span>
<span id="right"> >
</span>
</div>
</div>
JS部分
缓冲动画 JS插件部分
引入语句
<script src="./animate.tool.js"></script>
JS文件代码
class Utils {
static getStyle(obj, attr) {
if (obj.currentStyle) {
return obj.currentStyle[attr]
}
return window.getComputedStyle(obj, null)[attr];
}
static getScroll() {
if (window.pageXOffset != undefined) {
return {
left: window.pageXOffset,
top: window.pageYOffset
}
} else if (window.compatMode == "CSS1Compat") {
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
static animate(oEle, json, callback) {
// 1.清空定时器
clearInterval(oEle.timer);
// 2.开启定时器
oEle.timer = setInterval(() => {
let flag = true;
// 开启遍历
for (let attr in json) {
let target = 0;
let current = 0;
if (Object.is(attr, "opacity")) {
target = parseFloat(json[attr]) * 100;
current = parseFloat(Utils.getStyle(oEle, attr)) * 100;
} else {
target = parseInt(json[attr]);
current = parseInt(Utils.getStyle(oEle, attr));
}
//步长=(目标值-当前值)/10;
let steps = (target - current) / 10;
steps = steps >= 0 ? Math.ceil(steps) : Math.floor(steps);
// 新的位置 = 当前值+ 步长
if (attr == "opacity") {
oEle.style[attr] = (current + steps) / 100;
} else if (attr == "zIndex") {
oEle.style[attr] = target;
} else {
oEle.style[attr] = (current + steps) + "px";
}
if (current != target) {
flag = false;
}
}
if (flag) {
clearInterval(oEle.timer)
if (typeof (callback) == "function") {
callback();
}
}
}, 15)
}
}
JS部分
class SwiperFocus {
constructor(settings = {}) {
this.el = document.querySelector(settings.el);
// ul动,只需调用ul即可
this.oUl = this.el.children[0].children[0];
this.oArr = this.el.children[1];
this.imgIndex = 0;
this.init();
this.autoPlay();
this.mouseHandler();
this.clickHandler();
}
init() {
// 鼠标移入显示,移除隐藏,创建一张图片,将其添加到最后一张去
this.el.addEventListener("mouseenter", () => {
this.oArr.style.display = "block";
})
this.el.addEventListener("mouseleave", () => {
this.oArr.style.display = "none";
})
this.oUl.appendChild(this.oUl.children[0].cloneNode(true));
}
// 自动轮播
autoPlay(){
this.timer=setInterval(()=>{
this.imgIndex++;
if(this.imgIndex>5){
this.imgIndex=1;
this.oUl.style.left=0*490;
}
this.Play();
},1000)
}
//播放行为
Play(){
Utils.animate(this.oUl,{left:-this.imgIndex*490});
}
//鼠标移入暂停行为
mouseHandler(){
//鼠标移入清除定时器
this.el.addEventListener("mouseenter",()=>{
clearInterval(this.timer);
})
this.el.addEventListener("mouseleave",()=>{
this.autoPlay();
})
}
clickHandler(){
this.oArr.addEventListener("click",(evt)=>{
let e=evt||window.event;
let ele=e.target||e.srcElement;
if(ele.nodeName=="SPAN"&&ele.id=="left"){
this.imgIndex--;
if( this.imgIndex<0){
this.imgIndex=4;
this.oUl.style.left=-5*490+"px";
}
this.Play();
}
if(ele.nodeName=="SPAN"&&ele.id=="right"){
this.imgIndex++;
if( this.imgIndex>5){
this.imgIndex=1;
this.oUl.style.left="0px";
}
this.Play();
}
})
}
}
//new
new SwiperFocus({
el: "#box"
})
JS思路
1.constructor部分绑定ul部分,通过移动Ul达到移动图片的效果
绑定箭头部分
2.初始化功能实现
移入箭头显示,
this.el.addEventListener("mouseenter", () => {
this.oArr.style.display = "block";
})
移出箭头隐藏,
this.el.addEventListener("mouseleave", () => {
this.oArr.style.display = "none";
})
把ul第一张图片添加到ul中最后一张位置
this.oUl.appendChild(this.oUl.children[0].cloneNode(true));
3 播放行为实现
图片下标*图片长度为ul移动距离,距离为负数,缓冲动画引入实现
Play(){
Utils.animate(this.oUl,{left:-this.imgIndex*490});
}
4 自动轮播实现
autoPlay(){
this.timer=setInterval(()=>{
this.imgIndex++;
if(this.imgIndex>5){
this.imgIndex=1;
this.oUl.style.left=0*490;
}
this.Play();
},1000)
}
5鼠标移入暂停,移出恢复.自动轮播
this.el.addEventListener("mouseenter",()=>{
clearInterval(this.timer);
})
this.el.addEventListener("mouseleave",()=>{
this.autoPlay();
})
6鼠标点击左右切换事件
事件委托,循环判断皆可
this.oArr.addEventListener("click",(evt)=>{
let e=evt||window.event;
let ele=e.target||e.srcElement;
if(ele.nodeName=="SPAN"&&ele.id=="left"){
this.imgIndex--;
if( this.imgIndex<0){
this.imgIndex=4;
this.oUl.style.left=-5*490+"px";
}
this.Play();
}
if(ele.nodeName=="SPAN"&&ele.id=="right"){
this.imgIndex++;
if( this.imgIndex>5){
this.imgIndex=1;
this.oUl.style.left="0px";
}
this.Play();
}
})
}
}
7 最后不要忘记实例化对象以及方法的调用
tab栏切换的实现
CSS代码
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display: inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
}
.hd span.current {
background-color: purple;
}
.bd li {
height: 255px;
background-color: purple;
display: none;
}
.bd li.current {
display: block;
}
</style>
HTML代码
<div class="box">
<div class="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd">
<ul>
<li class="current">我是体育模块</li>
<li>我是娱乐模块</li>
<li>我是新闻模块</li>
<li>我是综合模块</li>
</ul>
</div>
</div>
js代码实现,面向对象
class TabBar {
constructor(settings = {}) {
this.el = document.querySelector(settings.el);
this.oSpans = this.el.children[0].children;
this.oLis = this.el.children[1].children[0].children;
this.clickHandler();
}
clickHandler() {
for (let i = 0; i < this.oSpans.length; i++) {
this.oSpans[i].onclick = () => {
for (let j = 0; j < this.oSpans.length; j++) {
this.oSpans[j].className = i == j ? "current" : "";
console.log(this.oLis);
this.oLis[j].className = i == j ? "current" : "";
}
}
}
}
}
new TabBar({
el: ".box"
})
面向tab栏切换思路
1.绑定切换按钮,和要切换的部分,创建下标,通过遍历进行点击事件判断,在点击事件里遍历,进行判断是否相匹配
