Skip to content

Commit 6a1a3a6

Browse files
SallySally
authored andcommittedJun 13, 2017
使用JavaScript一个无缝轮播图(模仿淘宝,京东效果)
0 parents  commit 6a1a3a6

File tree

8 files changed

+343
-0
lines changed

8 files changed

+343
-0
lines changed
 

‎JS封装/AnimationBasicFrame.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
/**
2+
* Created by Sally on 2017/6/1.
3+
*/
4+
5+
//封装匀速动画框架
6+
function constant(obj,speed,target){
7+
clearInterval(obj.timer);
8+
obj.timer = setInterval(function(){
9+
var speed1 = target>obj.offsetLeft?speed:-speed;
10+
obj.style.left=obj.offsetLeft+speed1+'px';
11+
if (Math.abs(target-obj.offsetLeft)<Math.abs(speed)){
12+
clearInterval(obj.timer);
13+
obj.style.left = target+'px';
14+
}
15+
},20)
16+
}

‎JS封装/ScrollBasic.js

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
/**
2+
* Created by xmg on 2017/6/1.
3+
*/
4+
/*
5+
* 获取scrollTop和scrollLeft
6+
*/
7+
function scroll() {
8+
if(window.pageYOffset !== null){ // ie9+ 和 最新浏览器
9+
return {
10+
left: window.pageXOffset,
11+
top: window.pageYOffset
12+
}
13+
}else if(document.compatMode == 'CSS1Compat'){ // 非怪异浏览器
14+
return{
15+
left: document.documentElement.scrollLeft,
16+
top: document.documentElement.scrollTop
17+
}
18+
}
19+
return{
20+
left: document.body.scrollLeft,
21+
top: document.body.scrollTop
22+
}
23+
}
24+
//封装显示
25+
function show(tagId) {
26+
return document.getElementById(tagId).style.display = 'block';
27+
}
28+
29+
//封装隐藏
30+
function hide(tagId) {
31+
return document.getElementById(tagId).style.display = 'none';
32+
}
33+
34+
function $(tagId) {
35+
return document.getElementById(tagId);
36+
}
37+
function client() {
38+
//1.判断是否是最新浏览器
39+
if(window.innerWidth!=null)
40+
{
41+
return{
42+
width:window.innerWidth,
43+
height:window.innerHeight
44+
}
45+
}
46+
//标准浏览器支持 w3c标准
47+
else if(document.compatMode=='CSS1Compat')
48+
{
49+
return{
50+
width:document.documentElement.clientWidth,
51+
height:document.documentElement.clientHeight
52+
}
53+
}
54+
//非标准模式浏览器
55+
else
56+
{
57+
return{
58+
width:document.body.clientWidth,
59+
height:document.body.clientHeight
60+
}
61+
}
62+
}
63+
64+
//封装匀速动画框架
65+
function constant(obj,speed,target) {
66+
clearInterval(obj.timer);
67+
obj.timer = setInterval(function () {
68+
var speed1 = target>obj.offsetLeft?speed:-speed;
69+
obj.style.left = obj.offsetLeft+ speed1+'px';
70+
if(Math.abs(target-obj.offsetLeft)<Math.abs(speed1))
71+
{
72+
clearInterval(obj.timer);
73+
obj.style.left = target+'px';
74+
}
75+
},20);
76+
}
77+
78+
//缓动动画
79+
//{'width':800,'height':900,'left':100,'top':200,'scrollTop':200,'zIndex':70}
80+
function buffer(obj, json, fn) {
81+
clearInterval(obj.timer);
82+
obj.timer = setInterval(function () {
83+
//定义一个旗帜(统一旗号)
84+
var isStop = true;
85+
//遍历
86+
for (var key in json)
87+
{
88+
//判断是否传入了透明度
89+
if ('opacity' == key)
90+
{
91+
var begin = parseInt( parseFloat(getCSSAttr(obj, key)*100));
92+
var target = parseInt(json[key]*100);
93+
}
94+
//其他情况处理px取值
95+
else
96+
{
97+
var begin = parseInt(getCSSAttr(obj, key));
98+
var target = parseInt(json[key]);
99+
}
100+
var speed = (target - begin) / 20;
101+
speed = target > begin ? Math.ceil(speed) : Math.floor(speed);
102+
103+
//赋值的时候判断是不是opacity
104+
if('opacity'==key)
105+
{
106+
//先赋值opacity //0.4
107+
obj.style.opacity = (begin +speed)/100;
108+
obj.style.filter = 'alpha(opacity:'+(begin+speed)+')';
109+
}
110+
//scrollTop的赋值
111+
else if ('scrollTop' == key) {
112+
obj.scrollTop = begin + speed;
113+
}
114+
//zInde层级
115+
else if('zIndex'==key)
116+
{
117+
obj.style.zIndex = parseInt(json[key]);
118+
}
119+
else
120+
{
121+
obj.style[key] = begin + speed + 'px';
122+
}
123+
//判断
124+
if (begin != target) {
125+
isStop = false;
126+
}
127+
}
128+
if (isStop) {
129+
clearInterval(obj.timer);
130+
//保证外部是否传入了回调,如果没有传入,有可能报错
131+
if (fn) {
132+
//执行回调
133+
fn();
134+
}
135+
136+
}
137+
}, 20);
138+
}
139+
//封装一个获取css样式的函数
140+
function getCSSAttr(obj, attr) {
141+
if (obj.currentStyle) {
142+
return obj.currentStyle[attr];
143+
}
144+
//火狐和谷歌以及ie高版本
145+
else {
146+
return getComputedStyle(obj, null)[attr];
147+
}
148+
}

‎imgs/1.jpg

32.8 KB
Loading

‎imgs/2.jpg

61.1 KB
Loading

‎imgs/3.jpg

48.8 KB
Loading

‎imgs/4.jpg

63.4 KB
Loading

‎imgs/5.jpg

37 KB
Loading

‎无缝轮播.html

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>无缝轮播</title>
6+
<style>
7+
* {
8+
margin: 0;
9+
padding: 0;
10+
}
11+
12+
img {
13+
vertical-align: top;
14+
}
15+
16+
#box {
17+
width: 750px;
18+
height: 320px;
19+
border: 1px solid #cccccc;
20+
margin: 50px auto;
21+
padding: 10px;
22+
position: relative;
23+
}
24+
25+
#box_top {
26+
width: 100%;
27+
height: 100%;
28+
position: relative;
29+
overflow: hidden;
30+
}
31+
32+
#box_top ul {
33+
width: 4500px;
34+
position: absolute;
35+
}
36+
37+
#box_top ul li {
38+
list-style: none;
39+
float: left;
40+
}
41+
42+
#olTag {
43+
width: 180px;
44+
position: absolute;
45+
bottom: 20px;
46+
right: 20px;
47+
/*background-color:red;*/
48+
}
49+
50+
#olTag li {
51+
list-style: none;
52+
float: left;
53+
width: 30px;
54+
height: 30px;
55+
border-radius: 15px;
56+
background-color: skyblue;
57+
margin-left: 5px;
58+
text-align: center;
59+
line-height: 30px;
60+
}
61+
62+
#olTag .current {
63+
background-color: #ffffff;
64+
}
65+
66+
</style>
67+
</head>
68+
<body>
69+
<div id="box">
70+
<div id="box_top">
71+
<ul id="ulTag">
72+
<li><img src="imgs/2.jpg" alt=""></li>
73+
<li><img src="imgs/1.jpg" alt=""></li>
74+
<li><img src="imgs/3.jpg" alt=""></li>
75+
<li><img src="imgs/4.jpg" alt=""></li>
76+
<li><img src="imgs/5.jpg" alt=""></li>
77+
</ul>
78+
</div>
79+
<ol id="olTag">
80+
<!--<li>1</li>-->
81+
<!--<li>2</li>-->
82+
<!--<li>3</li>-->
83+
<!--<li>4</li>-->
84+
<!--<li>5</li>-->
85+
</ol>
86+
</div>
87+
<script src="js封装/ScrollBasic.js"></script>
88+
<script>
89+
//1.找对象
90+
var ulTag = document.getElementById('ulTag');
91+
var allLis = ulTag.children;
92+
var olTag = document.getElementById('olTag');
93+
94+
//2.先克隆第一张图片并且追到ul的最后(为了实现滚动到最后没有卡顿的效果,且UL的宽度应该多加上一张图片的宽度)
95+
ulTag.appendChild(allLis[0].cloneNode(true));
96+
/* 补充知识点:cloneNode()是DOM中Node对象的方法,使用cloneNode可以方便的复制DOM节点。cloneNode()接收一个参数include_all。include_all为一个布尔值,true表示被clone的节点的所有子节点也会被clone(既深度clone),false(默认)只会clone原节点。*/
97+
98+
//3.动态的创建指示器(-1是因为上面ul克隆第一张图片并且追到ul的最后)
99+
for (var i = 0; i < allLis.length - 1; i++) {
100+
//3.1.创建ol中的li
101+
var li = document.createElement('li');
102+
// 给每一个li添加一个数字编号
103+
li.innerHTML = (i + 1);
104+
olTag.appendChild(li);
105+
//6.1.给每一个li绑定一个唯一的索引
106+
li.index = i;
107+
}
108+
//4.让ol中的第一个li选中
109+
olTag.children[0].className = 'current';
110+
111+
//手动轮播
112+
//5.当鼠标在指示器上移动的时候,让当前的选中,其他的干掉(排他思想)
113+
for (var i = 0; i < olTag.children.length; i++) {
114+
//5.1.先取出单个的li
115+
var li = olTag.children[i];
116+
//5.2.监听鼠标在每一li的移动
117+
li.onmouseover = function () {
118+
119+
//5.4.让其他的干掉
120+
for (var j = 0; j < olTag.children.length; j++) {
121+
olTag.children[j].className = '';
122+
}
123+
//5.3.让当前的选中
124+
this.className = 'current';
125+
126+
//6.让手动轮播走起来
127+
constant(ulTag, 20, -this.index * 750);
128+
129+
};
130+
}
131+
132+
//7.自动轮播
133+
var timer = null;
134+
var currentIndex = 0;
135+
var autoPlayIndex = 0;
136+
timer = setInterval(function () {
137+
//7.1先++再判断
138+
currentIndex++;
139+
//7.3.判断currentIndex的范围
140+
if (currentIndex > 5) {
141+
//7.3.1.让ul快速的扯回来
142+
ulTag.style.left = 0;
143+
//7.3.2.让currentIndex还原
144+
currentIndex =1;
145+
//因为之前已经在后面拼接了一张
146+
// currentIndex = 0;
147+
}
148+
//7.2.调用框架
149+
// constant(ulTag, 20, -this.index * 750);
150+
151+
constant(ulTag, 20, -currentIndex * 750);
152+
//8.让自动轮播的指示器走起来
153+
autoPlayIndex++;
154+
//9.判断自动轮播中的指示器范围
155+
if (autoPlayIndex > 4) {
156+
autoPlayIndex = 0;
157+
}
158+
for (var i = 0; i < olTag.children.length; i++) {
159+
160+
for (var j = 0; j < olTag.children.length; j++) {
161+
olTag.children[j].className = '';
162+
}
163+
//5.3.让当前的选中
164+
olTag.children[autoPlayIndex].className = 'current';
165+
166+
}
167+
}, 1000);
168+
169+
//10.当鼠标进入轮播图的时候,让定时器清掉,当鼠标离开的时候,应该继续走起来
170+
box.onmouseover = function(){
171+
clearInterval(timer);
172+
}
173+
box.onmouseout = function(){
174+
clearInterval(timer);
175+
}
176+
</script>
177+
178+
</body>
179+
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.