目录 轮播图 移动端轮播图 按下回车发表评论 tab栏切换 全选按钮
< style> * { box-sizing : border-box; } .slider { width : 560px; height : 400px; overflow : hidden; } .slider-wrapper { width : 100%; height : 320px; } .slider-wrapper img { width : 100%; height : 100%; display : block; } .slider-footer { height : 80px; background-color : rgb ( 100, 67, 68) ; padding : 12px 12px 0 12px; position : relative; } .slider-footer .toggle { position : absolute; right : 0; top : 12px; display : flex; } .slider-footer .toggle button { margin-right : 12px; width : 28px; height : 28px; appearance : none; border : none; background : rgba ( 255, 255, 255, 0.1) ; color : #fff; border-radius : 4px; cursor : pointer; } .slider-footer .toggle button:hover { background : rgba ( 255, 255, 255, 0.2) ; } .slider-footer p { margin : 0; color : #fff; font-size : 18px; margin-bottom : 10px; } .slider-indicator { margin : 0; padding : 0; list-style : none; display : flex; align-items : center; } .slider-indicator li { width : 8px; height : 8px; margin : 4px; border-radius : 50%; background : #fff; opacity : 0.4; cursor : pointer; } .slider-indicator li.active { width : 12px; height : 12px; opacity : 1; } </ style> </ head> < body> < divclass = " slider" > < divclass = " slider-wrapper" > < imgsrc = " ./images/slider01.jpg" alt = " " /> </ div> < divclass = " slider-footer" > < p> </ p> < ulclass = " slider-indicator" > < liclass = " active" > </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> < li> </ li> </ ul> < divclass = " toggle" > < buttonclass = " prev" > < </ button> < buttonclass = " next" > > </ button> </ div> </ div> </ div> < script> const data = [ { url : './images/slider01.jpg' , title : '对人类来说会不会太超前了？' , color : 'rgb(100, 67, 68)' } , { url : './images/slider02.jpg' , title : '开启剑与雪的黑暗传说！' , color : 'rgb(43, 35, 26)' } , { url : './images/slider03.jpg' , title : '真正的jo厨出现了！' , color : 'rgb(36, 31, 33)' } , { url : './images/slider04.jpg' , title : '李玉刚：让世界通过B站看到东方大国文化' , color : 'rgb(139, 98, 66)' } , { url : './images/slider05.jpg' , title : '快来分享你的寒假日常吧~' , color : 'rgb(67, 90, 92)' } , { url : './images/slider06.jpg' , title : '哔哩哔哩小年YEAH' , color : 'rgb(166, 131, 143)' } , { url : './images/slider07.jpg' , title : '一站式解决你的电脑配置问题！！！' , color : 'rgb(53, 29, 25)' } , { url : './images/slider08.jpg' , title : '谁不想和小猫咪贴贴呢！' , color : 'rgb(99, 72, 114)' } , ] const img = document. querySelector ( '.slider-wrapper img' ) const p = document. querySelector ( '.slider-footer p' ) const footer = document. querySelector ( '.slider-footer' ) const next = document. querySelector ( '.next' ) let i = 0 next. addEventListener ( 'click' , function ( ) { i++ i = i >= data. length ? 0 : itoggle ( ) } ) const prev = document. querySelector ( '.prev' ) prev. addEventListener ( 'click' , function ( ) { i-- i = i < 0 ? data. length - 1 : itoggle ( ) } ) function toggle ( ) { img. src = data[ i] . urlp. innerHTML = data[ i] . titlefooter. style. backgroundColor = data[ i] . colordocument. querySelector ( '.slider-indicator .active' ) . classList. remove ( 'active' ) document. querySelector ( ` .slider-indicator li:nth-child( ${ i + 1 } ) ` ) . classList. add ( 'active' ) } let timerId = setInterval ( function ( ) { next. click ( ) } , 1000 ) const slider = document. querySelector ( '.slider' ) slider. addEventListener ( 'mouseenter' , function ( ) { clearInterval ( timerId) } ) slider. addEventListener ( 'mouseleave' , function ( ) { if ( timerId) clearInterval ( timerId) timerId = setInterval ( function ( ) { next. click ( ) } , 1000 ) } ) </ script> </ body> </ html> <! DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> </ title> < linkrel = " stylesheet" href = " ./css/swiper.min.css" > < style> .box { position : relative; width : 800px; height : 300px; background-color : pink; margin : 100px auto; } html,body { position : relative; height : 100%; } body { background : #eee; font-family : Helvetica Neue, Helvetica, Arial, sans-serif; font-size : 14px; color : #000; margin : 0; padding : 0; } .swiper { overflow : hidden; width : 100%; height : 100%; } .swiper-slide { text-align : center; font-size : 18px; background : #fff; display : -webkit-box; display : -ms-flexbox; display : -webkit-flex; display : flex; -webkit-box-pack : center; -ms-flex-pack : center; -webkit-justify-content : center; justify-content : center; -webkit-box-align : center; -ms-flex-align : center; -webkit-align-items : center; align-items : center; } .swiper-slide img { display : block; width : 100%; height : 100%; object-fit : cover; } </ style> </ head> < body> < divclass = " box" > < divclass = " swiper mySwiper" > < divclass = " swiper-wrapper" > < divclass = " swiper-slide" > </ div> < divclass = " swiper-slide" > </ div> < divclass = " swiper-slide" > </ div> < divclass = " swiper-slide" > </ div> < divclass = " swiper-slide" > </ div> < divclass = " swiper-slide" > </ div> < divclass = " swiper-slide" > </ div> < divclass = " swiper-slide" > </ div> < divclass = " swiper-slide" > </ div> </ div> < divclass = " swiper-pagination" > </ div> </ div> </ div> < scriptsrc = " ./js/swiper.min.js" > </ script> < script> var swiper = new Swiper ( ".mySwiper" , { pagination : { el : ".swiper-pagination" , } , autoplay : { delay : 1000 , disableOnInteraction : false , } , keyboard : { enabled : true , onlyInViewport : true , } , } ) ; </ script> </ body> </ html> < style> .wrapper { min-width : 400px; max-width : 800px; display : flex; justify-content : flex-end; } .avatar { width : 48px; height : 48px; border-radius : 50%; overflow : hidden; background : url ( ./images/avatar.jpg) ; margin-right : 20px; } .wrapper textarea { outline : none; border-color : transparent; resize : none; background : #f5f5f5; border-radius : 4px; flex : 1; padding : 10px; transition : all 0.5s; height : 30px; } .wrapper textarea:focus { border-color : #e4e4e4; background : #fff; height : 50px; } .wrapper button { background : #00aeec; color : #fff; border : none; border-radius : 4px; margin-left : 10px; width : 70px; cursor : pointer; } .wrapper .total { margin-right : 80px; color : #999; margin-top : 5px; opacity : 0; transition : all 0.5s; } .list { min-width : 400px; max-width : 800px; display : flex; } .list .item { width : 100%; display : flex; } .list .item .info { flex : 1; border-bottom : 1px dashed #e4e4e4; padding-bottom : 10px; } .list .item p { margin : 0; } .list .item .name { color : #FB7299; font-size : 14px; font-weight : bold; } .list .item .text { color : #333; padding : 10px 0; } .list .item .time { color : #999; font-size : 12px; } </ style> </ head> < body> < divclass = " wrapper" > < iclass = " avatar" > </ i> < textareaid = " tx" placeholder = " 发一条友善的评论" rows = " 2" maxlength = " 200" > </ textarea> < button> </ button> </ div> < divclass = " wrapper" > < spanclass = " total" > </ span> </ div> < divclass = " list" > < divclass = " item" style = " display : none; " > < iclass = " avatar" > </ i> < divclass = " info" > < pclass = " name" > </ p> < pclass = " text" > </ p> < pclass = " time" > </ p> </ div> </ div> </ div> < script> const tx = document. querySelector ( '#tx' ) const total = document. querySelector ( '.total' ) const item = document. querySelector ( '.item' ) const text = document. querySelector ( '.text' ) tx. addEventListener ( 'focus' , function ( ) { total. style. opacity = 1 } ) tx. addEventListener ( 'blur' , function ( ) { total. style. opacity = 0 } ) tx. addEventListener ( 'input' , function ( ) { total. innerHTML = ` ${ tx. value. length} /200字 ` } ) tx. addEventListener ( 'keyup' , function ( e ) { if ( e. key === 'Enter' ) { if ( tx. value. trim ( ) ) { item. style. display = 'block' text. innerHTML = tx. value} tx. value = '' total. innerHTML = '0/200字' } } ) </ script> </ body> </ html> < style> * { margin : 0; padding : 0; } .tab { width : 590px; height : 340px; margin : 20px; border : 1px solid #e4e4e4; } .tab-nav { width : 100%; height : 60px; line-height : 60px; display : flex; justify-content : space-between; } .tab-nav h3 { font-size : 24px; font-weight : normal; margin-left : 20px; } .tab-nav ul { list-style : none; display : flex; justify-content : flex-end; } .tab-nav ul li { margin : 0 20px; font-size : 14px; } .tab-nav ul li a { text-decoration : none; border-bottom : 2px solid transparent; color : #333; } .tab-nav ul li a.active { border-color : #e1251b; color : #e1251b; } .tab-content { padding : 0 16px; } .tab-content .item { display : none; } .tab-content .item.active { display : block; } </ style> </ head> < body> < divclass = " tab" > < divclass = " tab-nav" > < h3> </ h3> < ul> < li> < aclass = " active" href = " javascript:;" > </ a> </ li> < li> < ahref = " javascript:;" > </ a> </ li> < li> < ahref = " javascript:;" > </ a> </ li> < li> < ahref = " javascript:;" > </ a> </ li> < li> < ahref = " javascript:;" > </ a> </ li> </ ul> </ div> < divclass = " tab-content" > < divclass = " item active" > < imgsrc = " ./images/tab00.png" alt = " " /> </ div> < divclass = " item" > < imgsrc = " ./images/tab01.png" alt = " " /> </ div> < divclass = " item" > < imgsrc = " ./images/tab02.png" alt = " " /> </ div> < divclass = " item" > < imgsrc = " ./images/tab03.png" alt = " " /> </ div> < divclass = " item" > < imgsrc = " ./images/tab04.png" alt = " " /> </ div> </ div> </ div> < script> const as = document. querySelectorAll ( '.tab-nav a' ) for ( let i = 0 ; i < as . length; i++ ) { as [ i] . addEventListener ( 'mouseenter' , function ( ) { document. querySelector ( '.tab-nav .active' ) . classList. remove ( 'active' ) this . classList. add ( 'active' ) document. querySelector ( '.tab-content .active' ) . classList. remove ( 'active' ) document. querySelector ( ` .tab-content .item:nth-child( ${ i + 1 } ) ` ) . classList. add ( 'active' ) } ) } </ script> </ body> </ html> < style> * { margin : 0; padding : 0; } .tab { width : 590px; height : 340px; margin : 20px; border : 1px solid #e4e4e4; } .tab-nav { width : 100%; height : 60px; line-height : 60px; display : flex; justify-content : space-between; } .tab-nav h3 { font-size : 24px; font-weight : normal; margin-left : 20px; } .tab-nav ul { list-style : none; display : flex; justify-content : flex-end; } .tab-nav ul li { margin : 0 20px; font-size : 14px; } .tab-nav ul li a { text-decoration : none; border-bottom : 2px solid transparent; color : #333; } .tab-nav ul li a.active { border-color : #e1251b; color : #e1251b; } .tab-content { padding : 0 16px; } .tab-content .item { display : none; } .tab-content .item.active { display : block; } </ style> </ head> < body> < divclass = " tab" > < divclass = " tab-nav" > < h3> </ h3> < ul> < li> < aclass = " active" href = " javascript:;" data-id = " 0" > </ a> </ li> < li> < ahref = " javascript:;" data-id = " 1" > </ a> </ li> < li> < ahref = " javascript:;" data-id = " 2" > </ a> </ li> < li> < ahref = " javascript:;" data-id = " 3" > </ a> </ li> < li> < ahref = " javascript:;" data-id = " 4" > </ a> </ li> </ ul> </ div> < divclass = " tab-content" > < divclass = " item active" > < imgsrc = " ./images/tab00.png" alt = " " /> </ div> < divclass = " item" > < imgsrc = " ./images/tab01.png" alt = " " /> </ div> < divclass = " item" > < imgsrc = " ./images/tab02.png" alt = " " /> </ div> < divclass = " item" > < imgsrc = " ./images/tab03.png" alt = " " /> </ div> < divclass = " item" > < imgsrc = " ./images/tab04.png" alt = " " /> </ div> </ div> </ div> < script> const ul = document. querySelector ( '.tab-nav ul' ) const items = document. querySelectorAll ( '.tab-content .item' ) ul. addEventListener ( 'click' , function ( e ) { if ( e. target. tagName === 'A' ) { document. querySelector ( '.tab-nav .active' ) . classList. remove ( 'active' ) e. target. classList. add ( 'active' ) const i = + e. target. dataset. iddocument. querySelector ( '.tab-content .active' ) . classList. remove ( 'active' ) items[ i] . classList. add ( 'active' ) } } ) </ script> </ body> </ html> < style> * { margin : 0; padding : 0; } table { border-collapse : collapse; border-spacing : 0; border : 1px solid #c0c0c0; width : 500px; margin : 100px auto; text-align : center; } th { background-color : #09c; font : bold 16px "微软雅黑" ; color : #fff; height : 24px; } td { border : 1px solid #d0d0d0; color : #404060; padding : 10px; } .allCheck { width : 80px; } </ style> </ head> < body> < table> < tr> < thclass = " allCheck" > < inputtype = " checkbox" name = " " id = " checkAll" > < spanclass = " all" > </ span> </ th> < th> </ th> < th> </ th> < th> </ th> </ tr> < tr> < td> < inputtype = " checkbox" name = " check" class = " ck" > </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> < inputtype = " checkbox" name = " check" class = " ck" > </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> < tr> < td> < inputtype = " checkbox" name = " check" class = " ck" > </ td> < td> </ td> < td> </ td> < td> </ td> </ tr> </ table> < script> const checkAll = document. querySelector ( '#checkAll' ) const cks = document. querySelectorAll ( '.ck' ) checkAll. addEventListener ( 'click' , function ( ) { for ( let i = 0 ; i < cks. length; i++ ) { cks[ i] . checked = this . checked} } ) for ( let i = 0 ; i < cks. length; i++ ) { cks[ i] . addEventListener ( 'click' , function ( ) { checkAll. checked = document. querySelectorAll ( '.ck:checked' ) . length === cks. length} ) } </ script> </ body> </ html> 
