<! DOCTYPE html > < htmllang = " zh-cn" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ 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> < divclass = " banner" > < imgid = " pic" src = " images/p1.jpg" width = " 500" height = " 375" alt = " pkq" > < divclass = " slider" > < spanstyle = " background-color : pink; " > </ span> < span> </ span> < span> </ span> < span> </ span> </ div> < divclass = " btn-wrap" > < spanclass = " prev" > < </ span> < spanclass = " 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 % countoPic. src = ` images/p ${ index + 1 } .jpg ` [ index] . style. backgroundColor = '#543' ; } oPrev. onclick = function ( ) { aSpan[ index] . style. backgroundColor = 'orange' ; index-- index = ( index + count) % countoPic. src = ` images/p ${ index + 1 } .jpg ` [ 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 ` . target. style. backgroundColor = '#543' ; index = e. target. innerText - 1 } } </ script> </ body> </ html> <! DOCTYPE html > < htmllang = " zh-cn" > < head> < metacharset = " UTF-8" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ 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> < divclass = " banner" > < ulclass = " pic" > < liclass = " on bg333 c368" > < imgsrc = " images/p1.jpg" alt = " " > </ li> < liclass = " bg333 c368" > < imgsrc = " images/p2.jpg" alt = " " > </ li> < liclass = " bg333 c368" > < imgsrc = " images/p3.jpg" alt = " " > </ li> < liclass = " bg333 c368" > < imgsrc = " images/p4.jpg" alt = " " > </ li> </ ul> < divclass = " slider" > </ div> < divclass = " btn-wrap" > < spanclass = " prev" > < </ span> < spanclass = " 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. lengthcreateSlider ( ) 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 > < htmllang = " zh-cn" > < head> < metacharset = " UTF-8" > < metaname = " 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> < divclass = " banner" > < ulclass = " pic-list" > < li> < imgsrc = " images/1.jpg" alt = " " width = " 500" height = " 200" > </ li> < li> < imgsrc = " images/2.jpg" alt = " " width = " 500" height = " 200" > </ li> < li> < imgsrc = " images/3.jpg" alt = " " width = " 500" height = " 200" > </ li> < li> < imgsrc = " images/4.jpg" alt = " " width = " 500" height = " 200" > </ li> </ ul> < divclass = " slider" > </ div> < divclass = " btn-wrap" > < spanclass = " prev" > < </ span> < spanclass = " next" > > </ span> </ div> </ div> < scriptsrc = " 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 > < htmllang = " zh-cn" > < head> < metacharset = " UTF-8" > < metaname = " 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> < divclass = " banner" > < ulclass = " pic-list" > < li> < imgsrc = " images/1.jpg" alt = " " width = " 500" height = " 200" > </ li> < li> < imgsrc = " images/2.jpg" alt = " " width = " 500" height = " 200" > </ li> < li> < imgsrc = " images/3.jpg" alt = " " width = " 500" height = " 200" > </ li> < li> < imgsrc = " images/4.jpg" alt = " " width = " 500" height = " 200" > </ li> </ ul> < divclass = " slider" > </ div> < divclass = " btn-wrap" > < spanclass = " prev" > < </ span> < spanclass = " next" > > </ span> </ div> </ div> < scriptsrc = " 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> 
)
