1. 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。
因为js较多,我们单独新建js文件夹,再新建js文件, 引入页面中。 此时需要添加 load 事件 。 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。 显示隐藏 display 按钮。
< script>
window. addEventListener ( 'load' , function ( ) {
var arrow_l = document. querySelector ( '.arrow-l' ) ;
var arrow_r = document. querySelector ( '.arrow-r' ) ;
var focus = document. querySelector ( '.focus' ) ;
focus. addEventListener ( 'mouseenter' , function ( ) {
arrow_l. style. display = 'block' ;
arrow_r. style. display = 'block' ;
} ) ;
focus. addEventListener ( 'mouseleave' , function ( ) {
arrow_l. style. display = 'none' ;
arrow_r. style. display = 'none' ;
} )
</ script>
2. 动态生成小圆圈 有几张图片,我就生成几个小圆圈
动态生成小圆圈 核心思路:小圆圈的个数要跟图片张数一致 所以首先先得到ul里面图片的张数(图片放入li里面,所以就是li的个数) 利用循环动态生成小圆圈(这个小圆圈要放入ol里面) 创建节点 createElement(‘li’) 插入节点 ol. appendChild(li) 第一个小圆圈需要添加 current 类
var ul = focus. querySelector ( 'ul' ) ;
var ol = focus. querySelector ( '.circle' ) ;
for ( var i = 0 ; i < ul. children. length; i++ ) {
var li = document. createElement ( 'li' ) ;
ol. appendChild ( li) ;
}
ol. children[ 0 ] . className = 'current' ;
4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
小圆圈的排他思想 点击当前小圆圈,就添加current类 其余的小圆圈就移除这个current类 注意: 我们在刚才生成小圆圈的同时,就可以直接绑定这个点击事件了。
li. addEventListener ( 'click' , function ( ) {
for ( var i = 0 ; i < ol. children. length; i++ ) {
ol. children[ i] . className = '' ;
}
this . className = 'current' ;
5.点击小圆圈,移动图片
点击小圆圈滚动图片 此时用到animate动画函数 ,将js文件引入(注意,因为index.js 依赖 animate.js 所以,animate.js 要写到 index.js 上面) 使用动画函数的前提,该元素必须有定位 注意是ul 移动 而不是小li 滚动图片的核心算法: 点击某个小圆圈 , 就让图片滚动 小圆圈的索引号乘以图片的宽度做为ul移动距离 此时需要知道小圆圈的索引号, 我们可以在生成小圆圈的时候,给它设置一个自定义属性 ,点击的时候获取这个自定义属性即可。
var focusWidth = focus. offsetWidth;
li. setAttribute ( 'index' , i) ;
var index = this . getAttribute ( 'index' ) ;
animate ( ul, - index * focusWidth) ;
6. 点击右侧按钮一次,就让图片滚动一张
点击右侧按钮一次,就让图片滚动一张。 声明一个变量num, 点击一次,自增1, 让这个变量乘以图片宽度,就是 ul 的滚动距离。
var num = 0 ;
arrow_r. addEventListener ( 'click' , function ( ) {
num++ ;
animate ( ul, - num * focusWidth) ;
}
7.图片无缝滚动原理:
把ul 第一个li 复制一份,放到ul 的最后面
克隆第一张图片 克隆ul 第一个li cloneNode() 加true 深克隆 复制里面的子节点 ; false 浅克隆 添加到 ul 最后面 appendChild 当图片滚动到克隆的最后一张图片时, 让ul 快速的、不做动画的跳到最左侧: left 为0 同时num 赋值为0,可以从新开始滚动图片了
var first = ul. children[ 0 ] . cloneNode ( true ) ;
ul. appendChild ( first) ;
arrow_r. addEventListener ( 'click' , function ( ) {
if ( num == ul. children. length - 1 ) {
ul. style. left = 0 ;
num = 0 ;
}
}
8. 点击右侧按钮,小圆圈跟随一起变化 ;可以再声明一个变量控制小圆圈的播放
点击右侧按钮, 小圆圈跟随变化 最简单的做法是再声明一个变量circle,每次点击自增1,注意,左侧按钮也需要这个变量,因此要声明全局变量。 但是图片有5张,我们小圆圈只有4个少一个,必须加一个判断条件 如果circle == 4 就 从新复原为 0
var circle = 0 ;
circle++ ;
for ( var i = 0 ; i< ol. children. length; i++ ) {
ol. children[ i] . className= '' ;
}
ol. children[ circle] . className= 'current' ;
if ( circle == ol. children. length) {
circle = 0 ;
}
9. bug1:圆点和图片顺序不对应
num= index;
circle= index;
10. 左侧按钮的做法
/ 9. 左侧按钮做法
arrow_l. addEventListener ( 'click' , function ( ) {
if ( num == 0 ) {
num = ul. children. length - 1 ;
ul. style. left = - num * focusWidth + 'px' ;
}
num-- ;
animate ( ul, - num * focusWidth, function ( ) {
} ) ;
circle-- ;
if ( circle < 0 ) {
circle = ol. children. length - 1 ;
}
for ( var i = 0 ; i < ol. children. length; i++ ) {
ol. children[ i] . className = '' ;
}
ol. children[ circle] . className = 'current' ;
} ) ;
11. 自动播放功能
自动播放功能 添加一个定时器 自动播放轮播图,实际就类似于点击了右侧按钮 此时我们使用手动调用右侧按钮点击事件arrow_r.click() 鼠标经过focus 就停止定时器 鼠标离开focus 就开启定时器
var timer = setInterval ( function ( ) {
arrow_r. click ( ) ;
} , 2000 ) ;
focus. addEventListener ( 'mouseenter' , function ( ) {
clearInterval ( timer) ;
timer = null ;
} ) ;
focus. addEventListener ( 'mouseleave' , function ( ) {
timer = setInterval ( function ( ) {
arrow_r. click ( ) ;
} , 2000 ) ;
} ) ;
12. 防止播放过快——节流阀
var flag = true ;
arrow_r. addEventListener ( 'click' , function ( ) {
if ( flag) {
flag = false ;
if ( num == ul. children. length - 1 ) {
ul. style. left = 0 ;
num = 0 ;
}
num++ ;
animate ( ul, - num * focusWidth, function ( ) {
flag = true ;
} ) ;
13. 完整轮播图的HTML代码
<! DOCTYPE html >
< html lang = " zh-CN" >
< head>
< meta charset = " UTF-8" >
< title> 品优购</ title>
< meta name = " description" content = " 品优购" />
< meta name = " Keywords" content = " 网上购物" />
< link rel = " shortcut icon" href = " favicon.ico" type = " image/x-icon" />
< link rel = " stylesheet" href = " css/base.css" >
< link rel = " stylesheet" href = " css/common.css" >
< link rel = " stylesheet" href = " css/index.css" >
< script src = " js/animate.js" > </ script>
< script src = " js/index.js" > </ script>
</ head>
< body>
< div class = " w" >
< div class = " main" >
< div class = " focus fl" >
< a href = " javascript:;" class = " arrow-l" >
<
</ a>
< a href = " javascript:;" class = " arrow-r" > </ a>
< ul>
< li>
< a href = " #" > < img src = " upload/focus.jpg" alt = " " > </ a>
</ li>
< li>
< a href = " #" > < img src = " upload/focus1.jpg" alt = " " > </ a>
</ li>
< li>
< a href = " #" > < img src = " upload/focus2.jpg" alt = " " > </ a>
</ li>
< li>
< a href = " #" > < img src = " upload/focus3.jpg" alt = " " > </ a>
</ li>
</ ul>
< ol class = " circle" >
</ ol>
14. 完整轮播图的CSS代码
.main {
width : 980px;
height : 455px;
margin-left : 219px;
margin-top : 10px;
}
.focus {
position : relative;
width : 721px;
height : 455px;
background-color : purple;
overflow : hidden;
}
.focus ul {
position : absolute;
top : 0;
left : 0;
width : 600%;
}
.focus ul li {
float : left;
}
.arrow-l,
.arrow-r {
display : none;
position : absolute;
top : 50%;
margin-top : -20px;
width : 24px;
height : 40px;
background : rgba ( 0, 0, 0, .3) ;
text-align : center;
line-height : 40px;
color : #fff;
font-family : 'icomoon' ;
font-size : 18px;
z-index : 2;
}
.arrow-r {
right : 0;
}
.circle {
position : absolute;
bottom : 10px;
left : 50px;
}
.circle li {
float : left;
width : 8px;
height : 8px;
border : 2px solid rgba ( 255, 255, 255, 0.5) ;
margin : 0 3px;
border-radius : 50%;
cursor : pointer;
}
.current {
background-color : #fff;
}
13. 完整轮播图的js代码
window. addEventListener ( 'load' , function ( ) {
var arrow_l = document. querySelector ( '.arrow-l' ) ;
var arrow_r = document. querySelector ( '.arrow-r' ) ;
var focus = document. querySelector ( '.focus' ) ;
var focusWidth = focus. offsetWidth;
focus. addEventListener ( 'mouseenter' , function ( ) {
arrow_l. style. display = 'block' ;
arrow_r. style. display = 'block' ;
clearInterval ( timer) ;
timer = null ;
} ) ;
focus. addEventListener ( 'mouseleave' , function ( ) {
arrow_l. style. display = 'none' ;
arrow_r. style. display = 'none' ;
timer = setInterval ( function ( ) {
arrow_r. click ( ) ;
} , 2000 ) ;
} ) ;
var ul = focus. querySelector ( 'ul' ) ;
var ol = focus. querySelector ( '.circle' ) ;
for ( var i = 0 ; i < ul. children. length; i++ ) {
var li = document. createElement ( 'li' ) ;
li. setAttribute ( 'index' , i) ;
ol. appendChild ( li) ;
li. addEventListener ( 'click' , function ( ) {
for ( var i = 0 ; i < ol. children. length; i++ ) {
ol. children[ i] . className = '' ;
}
this . className = 'current' ;
var index = this . getAttribute ( 'index' ) ;
num = index;
circle = index;
console. log ( focusWidth) ;
console. log ( index) ;
animate ( ul, - index * focusWidth) ;
} )
}
ol. children[ 0 ] . className = 'current' ;
var first = ul. children[ 0 ] . cloneNode ( true ) ;
ul. appendChild ( first) ;
var num = 0 ;
var circle = 0 ;
var flag = true ;
arrow_r. addEventListener ( 'click' , function ( ) {
if ( flag) {
flag = false ;
if ( num == ul. children. length - 1 ) {
ul. style. left = 0 ;
num = 0 ;
}
num++ ;
animate ( ul, - num * focusWidth, function ( ) {
flag = true ;
} ) ;
circle++ ;
if ( circle == ol. children. length) {
circle = 0 ;
}
circleChange ( ) ;
}
} ) ;
arrow_l. addEventListener ( 'click' , function ( ) {
if ( flag) {
flag = false ;
if ( num == 0 ) {
num = ul. children. length - 1 ;
ul. style. left = - num * focusWidth + 'px' ;
}
num-- ;
animate ( ul, - num * focusWidth, function ( ) {
flag = true ;
} ) ;
circle-- ;
circle = circle < 0 ? ol. children. length - 1 : circle;
circleChange ( ) ;
}
} ) ;
function circleChange ( ) {
for ( var i = 0 ; i < ol. children. length; i++ ) {
ol. children[ i] . className = '' ;
}
ol. children[ circle] . className = 'current' ;
}
var timer = setInterval ( function ( ) {
arrow_r. click ( ) ;
} , 2000 ) ;
} )