丐版轮播图
<! DOCTYPE html >
< html lang = " zh-cn" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 基础轮播图 banner 移入移出</ title>
< style>
* {
margin : 0;
padding : 0;
}
body {
display : flex;
justify-content : center;
}
.banner {
display : flex;
flex-direction : column;
align-items : center;
justify-content : center;
position : relative;
width : 500px;
box-shadow : 0 0 8px #333;
}
.slider {
display : flex;
justify-content : space-around;
align-items : center;
position : absolute;
bottom : 10px;
width : 380px;
}
.slider span {
width : 45px;
height : 45px;
line-height : 45px;
background-color : orange;
text-align : center;
font-size : 20px;
color : #fff;
border-radius : 50%;
cursor : pointer;
}
.btn-wrap span {
user-select : none;
position : absolute;
top : 0;
bottom : 0;
margin : auto;
width : 40px;
height : 85px;
line-height : 85px;
font-size : 32px;
color : #fff;
text-align : center;
background-color : rgba ( 0, 0, 0, .4) ;
cursor : pointer;
}
.btn-wrap span:hover {
background-color : rgba ( 0, 0, 0, .8) ;
}
.prev {
left : 0;
}
.next {
right : 0;
}
</ style>
</ head>
< body>
< div class = " banner" >
< img id = " pic" src = " images/p1.jpg" width = " 500" height = " 375" alt = " pkq" >
< div class = " slider" >
< span style = " background-color : pink; " > 1</ span>
< span> 2</ span>
< span> 3</ span>
< span> 4</ span>
</ div>
< div class = " btn-wrap" >
< span class = " prev" > < </ span>
< span class = " next" > > </ span>
</ div>
</ div>
< script>
var oSlider = document. querySelector ( '.slider' )
var aSpan = document. querySelectorAll ( '.slider span' )
var oPic = document. querySelector ( '#pic' )
var oPrev = document. querySelector ( '.prev' )
var oNext = document. querySelector ( '.next' )
var index = 0
var count = 4
oNext. onclick = function ( ) {
aSpan[ index] . style. backgroundColor = 'orange' ;
index++
index = index % count
oPic. src = ` images/p ${ index + 1 } .jpg `
aSpan[ index] . style. backgroundColor = '#543' ;
}
oPrev. onclick = function ( ) {
aSpan[ index] . style. backgroundColor = 'orange' ;
index--
index = ( index + count) % count
oPic. src = ` images/p ${ index + 1 } .jpg `
aSpan[ index] . style. backgroundColor = '#543' ;
}
oSlider. onmouseover = function ( e ) {
if ( e. target. tagName === 'SPAN' ) {
aSpan[ index] . style. backgroundColor = 'orange' ;
oPic. src = ` images/p ${ e. target. innerText} .jpg `
e. target. style. backgroundColor = '#543' ;
index = e. target. innerText - 1
}
}
</ script>
</ body>
</ html>
进阶轮播图
<! DOCTYPE html >
< html lang = " zh-cn" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 基础轮播图 banner 移入移出</ title>
< style>
* {
margin : 0;
padding : 0;
}
ul {
list-style : none;
}
body {
display : flex;
justify-content : center;
}
.banner {
display : flex;
flex-direction : column;
align-items : center;
justify-content : center;
position : relative;
width : 500px;
height : 290px;
margin-top : 100px;
box-shadow : 0 0 12px #333;
}
.pic li {
display : none;
position : absolute;
top : 0;
left : 0;
}
.pic li.on {
display : block;
}
.pic li img {
width : 500px;
height : 290px;
}
.slider {
display : flex;
justify-content : space-around;
align-items : center;
position : absolute;
bottom : 10px;
width : 380px;
}
.slider span {
width : 45px;
height : 45px;
line-height : 45px;
background-color : orange;
text-align : center;
font-size : 20px;
color : #fff;
border-radius : 50%;
cursor : pointer;
}
.slider span.active {
background-color : pink;
}
.btn-wrap span {
user-select : none;
position : absolute;
top : 0;
bottom : 0;
margin : auto;
width : 40px;
height : 85px;
line-height : 85px;
font-size : 32px;
color : #fff;
text-align : center;
background-color : rgba ( 0, 0, 0, .4) ;
cursor : pointer;
}
.btn-wrap span:hover {
background-color : rgba ( 0, 0, 0, .8) ;
}
.prev {
left : 0;
}
.next {
right : 0;
}
</ style>
</ head>
< body>
< div class = " banner" >
< ul class = " pic" >
< li class = " on bg333 c368" > < img src = " images/p1.jpg" alt = " " > </ li>
< li class = " bg333 c368" > < img src = " images/p2.jpg" alt = " " > </ li>
< li class = " bg333 c368" > < img src = " images/p3.jpg" alt = " " > </ li>
< li class = " bg333 c368" > < img src = " images/p4.jpg" alt = " " > </ li>
</ ul>
< div class = " slider" >
</ div>
< div class = " btn-wrap" >
< span class = " prev" > < </ span>
< span class = " next" > > </ span>
</ div>
</ div>
< script>
var oSlider = document. querySelector ( '.slider' )
var oPic = document. querySelector ( '.pic' )
var oWrap = document. querySelector ( '.btn-wrap' )
var switchWrap = {
'prev' : function ( ) {
switchSlider ( function ( ) {
index--
index = ( index + count) % count
} )
} ,
'next' : function ( ) {
switchSlider ( function ( ) {
index++
index = index % count
} )
}
}
var index = 0
var count = oPic. children. length
createSlider ( )
oWrap. addEventListener ( 'click' , function ( e ) {
switchWrap[ e. target. className] && switchSlider ( switchWrap[ e. target. className] ( ) )
} , false )
oSlider. addEventListener ( 'mouseover' , function ( e ) {
if ( e. target. tagName === 'SPAN' ) {
switchSlider ( function ( ) {
index = e. target. innerText - 1
} )
}
} , false )
function switchSlider ( callback ) {
oPic. children[ index] . classList. remove ( 'on' )
oSlider. children[ index] . classList. remove ( 'active' )
callback && callback ( )
oPic. children[ index] . classList. add ( 'on' )
oSlider. children[ index] . classList. add ( 'active' )
}
function createSlider ( ) {
var fragment = document. createDocumentFragment ( ) ;
for ( var i = 0 ; i < count; i++ ) {
var vDom = document. createElement ( 'span' )
vDom. innerText = i + 1
fragment. appendChild ( vDom)
}
fragment. children[ 0 ] . classList. add ( 'on' )
oSlider. appendChild ( fragment)
}
</ script>
</ body>
</ html>
动画轮播自动播放
<! DOCTYPE html >
< html lang = " zh-cn" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 轮播图 </ title>
< style>
* {
margin : 0;
padding : 0;
}
img {
display : block;
}
ul {
list-style : none;
}
body {
display : flex;
justify-content : center;
}
.banner {
overflow : hidden;
position : relative;
width : 500px;
box-shadow : 0 0 8px #333;
}
.pic-list {
width : 100%;
}
.pic-list li {
float : left;
}
.slider {
display : flex;
justify-content : space-around;
align-items : center;
position : absolute;
bottom : 10px;
width : 380px;
left : 0;
right : 0;
margin : auto;
}
.slider span {
width : 45px;
height : 45px;
line-height : 45px;
background-color : orange;
text-align : center;
font-size : 20px;
color : #fff;
border-radius : 50%;
cursor : pointer;
}
.btn-wrap span {
user-select : none;
position : absolute;
top : 0;
bottom : 0;
margin : auto;
width : 40px;
height : 85px;
line-height : 85px;
font-size : 32px;
color : #fff;
text-align : center;
background-color : rgba ( 0, 0, 0, .4) ;
cursor : pointer;
}
.btn-wrap span:hover {
background-color : rgba ( 0, 0, 0, .8) ;
}
.prev {
left : 0;
}
.next {
right : 0;
}
.slider .active {
background-color : pink;
}
</ style>
</ head>
< body>
< div class = " banner" >
< ul class = " pic-list" >
< li> < img src = " images/1.jpg" alt = " " width = " 500" height = " 200" > </ li>
< li> < img src = " images/2.jpg" alt = " " width = " 500" height = " 200" > </ li>
< li> < img src = " images/3.jpg" alt = " " width = " 500" height = " 200" > </ li>
< li> < img src = " images/4.jpg" alt = " " width = " 500" height = " 200" > </ li>
</ ul>
< div class = " slider" >
</ div>
< div class = " btn-wrap" >
< span class = " prev" > < </ span>
< span class = " next" > > </ span>
</ div>
</ div>
< script src = " js/common.js" > </ script>
< script>
var oBanner = $ ( '.banner' ) ;
var oUl = $ ( '.pic-list' ) ;
var aPic = $$ ( '.pic-list li' ) ;
var oBtnWrap = $ ( '.btn-wrap' ) ;
var oSlider = $ ( '.slider' ) ;
var aSlider = oSlider. children;
var picW = aPic[ 0 ] . offsetWidth;
var picLen = aPic. length;
var index = 0 ;
var timer;
var tapMap = {
'prev' : function ( e ) {
move ( function ( ) {
index-- ;
index = ( picLen + index) % picLen;
} )
} ,
'next' : function ( e ) {
move ( function ( ) {
index++ ;
index = index % picLen;
} )
}
}
init ( ) ;
autoTranslate ( ) ;
function init ( ) {
var spanStr = '' ;
var firstClass = '' ;
oUl. style. width = ` ${ picLen * 100 } % ` ;
for ( var i = 0 ; i < picLen; i++ ) {
firstClass = ''
if ( i === 0 ) {
firstClass = 'class="active"' ;
}
spanStr += ` <span ${ firstClass} > ${ i + 1 } </span> ` ;
}
oSlider. innerHTML = spanStr;
}
oBanner. addEventListener ( 'mouseover' , function ( ) {
clearInterval ( timer) ;
} , false ) ;
oBanner. addEventListener ( 'mouseout' , function ( ) {
autoTranslate ( ) ;
} , false )
oBtnWrap. addEventListener ( 'click' , function ( e ) {
e = e || window. event;
if ( e. target. tagName. toLowerCase ( ) === 'span' ) {
var btn = e. target;
if ( tapMap[ btn. className] && typeof tapMap[ btn. className] === 'function' ) {
tapMap[ btn. className] ( e) ;
}
}
} , false ) ;
oSlider. addEventListener ( 'mouseover' , function ( e ) {
e = e || window. event;
if ( e. target. tagName. toLowerCase ( ) === 'span' ) {
var sliderBtn = e. target;
move ( function ( ) {
index = getElementIdx ( sliderBtn) ;
} )
}
} , false ) ;
function move ( callback ) {
aSlider[ index] . classList. remove ( 'active' ) ;
callback && callback ( ) ;
aSlider[ index] . classList. add ( 'active' ) ;
animate ( oUl, {
marginLeft : - index * picW + 'px'
} )
}
function autoTranslate ( ) {
clearInterval ( timer) ;
timer = setInterval ( function ( ) {
move ( function ( ) {
index++ ;
index = index % picLen;
} ) ;
} , 1000 )
}
</ script>
</ body>
</ html>
无缝轮播
<! DOCTYPE html >
< html lang = " zh-cn" >
< head>
< meta charset = " UTF-8" >
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" >
< title> 轮播图 </ title>
< style>
* {
margin : 0;
padding : 0;
}
img {
display : block;
}
ul {
list-style : none;
}
body {
display : flex;
justify-content : center;
}
.banner {
overflow : hidden;
position : relative;
width : 500px;
box-shadow : 0 0 8px #333;
}
.pic-list {
width : 100%;
}
.pic-list li {
float : left;
}
.slider {
display : flex;
justify-content : space-around;
align-items : center;
position : absolute;
bottom : 10px;
width : 380px;
left : 0;
right : 0;
margin : auto;
}
.slider span {
width : 45px;
height : 45px;
line-height : 45px;
background-color : orange;
text-align : center;
font-size : 20px;
color : #fff;
border-radius : 50%;
cursor : pointer;
}
.btn-wrap span {
user-select : none;
position : absolute;
top : 0;
bottom : 0;
margin : auto;
width : 40px;
height : 85px;
line-height : 85px;
font-size : 32px;
color : #fff;
text-align : center;
background-color : rgba ( 0, 0, 0, .4) ;
cursor : pointer;
}
.btn-wrap span:hover {
background-color : rgba ( 0, 0, 0, .8) ;
}
.prev {
left : 0;
}
.next {
right : 0;
}
.slider .active {
background-color : pink;
}
</ style>
</ head>
< body>
< div class = " banner" >
< ul class = " pic-list" >
< li> < img src = " images/1.jpg" alt = " " width = " 500" height = " 200" > </ li>
< li> < img src = " images/2.jpg" alt = " " width = " 500" height = " 200" > </ li>
< li> < img src = " images/3.jpg" alt = " " width = " 500" height = " 200" > </ li>
< li> < img src = " images/4.jpg" alt = " " width = " 500" height = " 200" > </ li>
</ ul>
< div class = " slider" >
</ div>
< div class = " btn-wrap" >
< span class = " prev" > < </ span>
< span class = " next" > > </ span>
</ div>
</ div>
< script src = " js/common.js" > </ script>
< script>
var oBanner = $ ( '.banner' ) ;
var oUl = $ ( '.pic-list' ) ;
var aPic = $$ ( '.pic-list li' ) ;
var oBtnWrap = $ ( '.btn-wrap' ) ;
var oSlider = $ ( '.slider' ) ;
var aSlider = oSlider. children;
var picW = aPic[ 0 ] . offsetWidth;
var picLen = aPic. length + 1 ;
var index = 0 ;
var timer;
init ( ) ;
var tapMap = {
'prev' : function ( e ) {
move ( function ( ) {
if ( index === 0 ) {
index = aPic. length - 1 ;
oUl. style. marginLeft = - index * picW + 'px' ;
}
index-- ;
index = ( picLen + index) % picLen;
} ) ;
} ,
'next' : function ( e ) {
move ( function ( ) {
if ( index === aPic. length - 1 ) {
console. log ( '我要瞬间调到0 然后慢慢走到1' ) ;
index = 0 ;
oUl. style. marginLeft = - index * picW + 'px' ;
}
index++ ;
index = index % picLen;
} ) ;
}
}
function init ( ) {
var spanStr = '' ;
var firstClass = '' ;
oUl. style. width = ` ${ picLen * 100 } % ` ;
for ( var i = 0 ; i < picLen - 1 ; i++ ) {
firstClass = ''
if ( i === 0 ) {
firstClass = 'class="active"' ;
}
spanStr += ` <span ${ firstClass} > ${ i + 1 } </span> ` ;
}
oSlider. innerHTML = spanStr;
oUl. appendChild ( aPic[ 0 ] . cloneNode ( true ) ) ;
aPic = $$ ( '.pic-list li' ) ;
autoTranslate ( ) ;
}
oBanner. addEventListener ( 'mouseover' , function ( ) {
clearInterval ( timer) ;
} , false ) ;
oBanner. addEventListener ( 'mouseout' , function ( ) {
autoTranslate ( ) ;
} , false ) ;
oBtnWrap. addEventListener ( 'click' , function ( e ) {
e = e || window. event;
if ( e. target. tagName. toLowerCase ( ) === 'span' ) {
var btn = e. target;
if ( tapMap[ btn. className] && typeof tapMap[ btn. className] === 'function' ) {
tapMap[ btn. className] ( e) ;
}
}
} , false ) ;
oSlider. addEventListener ( 'mouseover' , function ( e ) {
e = e || window. event;
if ( e. target. tagName. toLowerCase ( ) === 'span' ) {
var sliderBtn = e. target;
move ( function ( ) {
index = getElementIdx ( sliderBtn) ;
} )
}
} , false ) ;
function move ( callback ) {
aSlider[ index % ( aPic. length - 1 ) ] . classList. remove ( 'active' ) ;
callback && callback ( ) ;
aSlider[ index % ( aPic. length - 1 ) ] . classList. add ( 'active' ) ;
animate ( oUl, {
marginLeft : - index * picW + 'px'
} )
}
function autoTranslate ( ) {
clearInterval ( timer) ;
timer = setInterval ( function ( ) {
tapMap[ 'next' ] ( ) ;
} , 1000 )
}
</ script>
</ body>
</ html>