效果图如下:
文章图片
【js实现多组图片切换】
代码如下:
*{margin: 0; padding: 0; } | |
body{ | |
background: #333; | |
} | |
.box{ | |
width: 800px; | |
height: 500px; | |
border: 1px solid #000000; | |
background: url(img/bg.jpg) no-repeat; | |
background-size: 100% 100%; | |
padding-top:40px ; | |
padding-left: 30px; | |
box-sizing: border-box; | |
margin: 50px auto; | |
} | |
.box .btn{ | |
margin-bottom: 10px; | |
} | |
.box .btn input{ | |
width: 80px; | |
height: 20px; | |
background: rgba(220,200,230,0,5); | |
border: 1px solid #666; | |
border-radius: 5px; | |
} | |
img{ | |
vertical-align: top; | |
border:none; | |
} | |
input{ | |
padding: 0; | |
border: none; | |
} | |
.box .cont{ | |
} | |
.div1{position: relative; } | |
.div2{position: relative; } | |
.div1,.div2{ | |
float: left; | |
background: #fff; | |
padding: 20px; | |
} | |
#f-search1,#f-search2, | |
#s-search1,#s-search2{ | |
position: absolute; | |
width: 50%; | |
height: 300px; | |
top: 20px; | |
} | |
#f-search1,#s-search1{ | |
left: 20px; | |
} | |
#f-search2,#s-search2{ | |
right: 20px; | |
} | |
.div1{ | |
margin-right: 40px; | |
} | |
.div1 img{ | |
width: 400px; | |
height: 300px; | |
} | |
.div2 img{ | |
width: 220px; | |
height: 300px; | |
} | |
.div1 p,.div2 p{ | |
font: bold 14px/30px "宋体"; | |
letter-spacing: 3px; | |
color: #333; | |
text-align: center; | |
} | |
class="box"> | |
class="cont"id="cont"> | |
class="div1"> | |
文章图片 |
|
第一组第一张 |
|
1/4 | |
id="f-search1"> | |
id="f-search2"> | |
class="div2"> | |
文章图片 |
|
第二组第一张 |
|
1/3 | |
id="s-search1"> | |
id="s-search2"> | |
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图,写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel,可修改格子样式,例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换