图片轮番
html结构:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | < div class="wrap"> < ul class="banner"> < li class="active"> < a href="#">< img src="./imgs/banner1.jpg"></ a > </ li > < li > < a href="#">< img src="./imgs/banner2.jpg"></ a > </ li > < li > < a href="#">< img src="./imgs/banner3.jpg"></ a > </ li > < li > < a href="#">< img src="./imgs/banner4.jpg"></ a > </ li > < li > < a href="#">< img src="./imgs/banner5.jpg"></ a > </ li > </ ul > < ul class="yuandian"> < li class="active"></ li > < li ></ li > < li ></ li > < li ></ li > < li ></ li > </ ul > < div class="left"></ div > < div class="right"></ div > </ div > |
css样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | <style type= "text/css" > body,ul,li,div{ margin : 0 ; padding : 0 ; } li{ list-style : none ; } .wrap{ position : relative ; width : 500px ; height : auto ; margin : 10px auto ; overflow : hidden ; } .banner{ width : 2500px ; height : auto ; } .banner>li{ display : none ; width : 500px ; height : auto ; float : left ; text-align : center ; } .banner>li.active{ display : block ; } .banner>li>a{ display : inline- block ; width : 500px ; height : auto ; } .banner>li>a>img{ display : block ; width : 500px ; height : auto ; } .banner,.yuandian:after{ content : '' ; display : block ; clear : both ; } .yuandian{ position : absolute ; left : 50% ; bottom : 10px ; margin-left : -45px ; } .yuandian>li{ float : left ; margin-right : 10px ; width : 10px ; height : 10px ; border-radius: 50% ; background-color : white ; } .yuandian>li:hover{ cursor : pointer ; } .yuandian>li.active{ background-color : orange; } /*.yuandian>li>span{ /*display: inline-block;*/ /* width: 10px; height: 10px; border-radius: 50%; background-color: white; }*/ . left { position : absolute ; background-color : #967F7F ; width : 40px ; height : 50px ; top : 50% ; margin-top : -25px ; left : 0 ; } . left :hover{ background-color : #C5B2B2 ; cursor : pointer ; } . left :before{ display : block ; text-align : center ; content : '<' ; line-height : 50px ; font-size : 40px ; font-weight : bold ; } . right { position : absolute ; background-color : #967F7F ; width : 40px ; height : 50px ; top : 50% ; margin-top : -25px ; right : 0 ; } . right :hover{ background-color : #C5B2B2 ; cursor : pointer ; } . right :before{ display : block ; text-align : center ; content : '>' ; line-height : 50px ; font-size : 40px ; font-weight : bold ; } </style> |
javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script type= "text/javascript" src= "./jquery.1.7.2.min.js" ></script> <script type= "text/javascript" > $(document).ready( function (){ var banner_li=$( '.banner>li' ), yuandian_li=$( '.yuandian>li' ), left=$( '.left' ), right=$( '.right' ), indexbanner=0; yuandian_li.click( function (){ var index=yuandian_li.index( this ); yuandian_li.removeClass( 'active' ).eq(index).addClass( 'active' ); banner_li.removeClass( 'active' ).eq(index).addClass( 'active' ); banner_li.hide().eq(index).fadeIn( 'slow' ); }); left.click( function (){ if (--indexbanner<0){ indexbanner=4; } yuandian_li.eq(indexbanner).click(); }); right.click( function (){ if (++indexbanner>4){ indexbanner=0; } yuandian_li.eq(indexbanner).click(); }); }); </script> |
【推荐】还在用 ECharts 开发大屏?试试这款永久免费的开源 BI 工具!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET 原生驾驭 AI 新基建实战系列:向量数据库的应用与畅想
· 从问题排查到源码分析:ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
· 开发的设计和重构,为开发效率服务
· 从零开始开发一个 MCP Server!
· .NET 原生驾驭 AI 新基建实战系列(一):向量数据库的应用与畅想
· Ai满嘴顺口溜,想考研?浪费我几个小时
· ThreeJs-16智慧城市项目(重磅以及未来发展ai)