<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>最简单的轮播效果</title>
<style>
@charset "UTF-8";
body {
font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
color: #333;
}
body,
p,
ul,
ol,
dl,
dt,
h1,
h2,
h3,
h4,
h5,
h6,
dl,
dt,
dd {
margin: 0;
padding: 0;
}
ul,
ol {
list-style: none;
}
input {
border: none;
outline: none;
}
a {
text-decoration: none;
}
/*电脑配件商城header-start*/
.header {
width: 80%;
height: 120px;
margin: 0 auto;
}
.header .left {
width: 60%;
height: 120px;
float: left;
/*background-color: #00ff80;*/
}
.header .left .site-logo {
margin-top: 50px;
margin-left: -30px;
display: flex;
width: 35%;
justify-content: flex-start;
float: left;
}
.header .left .site-logo a {
display: block;
width: 56px;
height: 56px;
}
.header .left .headerWord {
width: 65%;
height: 50px;
margin-top: 80px;
/*background-color: #8080ff;*/
float: left;
}
.header .left .headerWord a {
text-decoration: none;
display: inline-block;
position: relative;
left: 8px;
top: 8px;
font-size: 16px;
color: #333;
padding-left: 19px;
}
.header .left .headerWord a:hover {
color: #ff0000;
}
.header .right {
width: 35%;
height: 70px;
float: right;
margin-top: 50px;
display: inline;
/*background-color: #8080ff;*/
}
.searchBar {
margin-top: 30px;
}
.searchBar form {
float: right;
position: relative;
width: 100%;
margin: 0 auto;
}
.searchBar input {
border: none;
outline: none;
width: 320px;
height: 30px;
padding-left: 13px;
border: 2px solid #d90000;
border-radius: 5px;
background: transparent;
top: 0;
right: 0;
float: right;
/*background-color: #8080ff;*/
}
.searchBar button {
border: none;
outline: none;
height: 34px;
width: 42px;
cursor: pointer;
position: absolute;
background: #d90000;
border-radius: 0 5px 5px 0;
width: 60px;
top: 0;
right: 0;
}
.searchBar button:before {
content: "Search";
font-size: 13px;
color: #F9F0DA;
font-family: "Microsoft YaHei", "宋体", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif, FreeSans, Arimo;
}
}
.box {
width: 900px;
height: 450px;
position: relative;
margin-top: 20px;
background-color: #f6f6f6;
}
.inner {
width: 900px;
height: 450px;
position: relative;
overflow: hidden;
align-self: center;
}
.inner img {
width: 900;
height: 450px;
vertical-align: top
}
.inner ul {
width: 1000%;
position: absolute;
list-style: none;
left: 0;
top: 0;
}
.inner li {
float: left;
}
ol {
position: absolute;
height: 20px;
right: 20px;
bottom: 20px;
text-align: center;
padding: 5px;
}
ol li {
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
background-color: #fff;
margin: 5px;
cursor: pointer;
}
ol .current {
background-color: red;
}
#arr #right {
right: 5px;
left: auto;
}
/*.imgindex.active {
position: absolute;
z-index: 12;
opacity: 1;
}*/
.leftNav {
width: 200px;
height: 370px;
background-color: rgba(255, 255, 255, 0.95);
margin: 0;
padding: 0;
border-radius: 10px;
position: relative;
margin-left: 9%;
top: -410px;
left: 74px;
z-index: 10;
}
.leftNav ul {
list-style: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.leftContainer {
width: 200px;
height: 74px;
margin: 0;
padding: 0;
}
.leftContent {
width: 100%;
height: 100%;
box-sizing: border-box;
/*font-weight:bold;*/
padding: 12px 25px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.leftWord a {
font-size: 16px;
color: #000057;
text-decoration: none;
}
.leftWord a:hover {
color: red;
}
.leftWords {
margin-top: 3px;
}
.leftWords a {
color: #969696;
font-size: 14px;
padding-left: 7px;
}
.leftWords a:first-child {
padding-left: 0;
}
/* 侧边栏下拉菜单 */
.leftDropdown {
margin: 0;
position: relative;
display: inline-block;
}
.leftDropdownContent ul {
list-style: none;
;
}
.leftDropdownContent {
width: 662px;
height: 440px;
position: absolute;
display: none;
top: 129px;
left: 274px;
background: #fff;
box-shadow: 0 2px 36px 0 rgba(0, 0, 0, 0.07);
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
z-index: 10000000;
}
.firstImg {
width: 200px;
height: 80px;
;
float: left;
margin-left: 30px;
margin-top: 30px;
}
.secondImg {
width: 200px;
height: 80px;
;
float: left;
margin-left: 30px;
margin-top: 30px;
}
.leftDropdownContent img {
width: 56px;
height: 56px;
/* display: inline-block;
margin-left: 50px;
padding-left: 51px;
margin-top: 44px; */
}
/* .leftDropdownContent img:first-child{
padding: 0;
} */
.leftDropdownContent a {
text-decoration: none;
display: block;
}
.leftDropdownContent span {
color: #777;
font-size: 13px;
overflow: hidden;
display: inline-block;
margin-bottom: 20px;
margin-left: 10px;
white-space: nowrap;
}
.leftDropdown:hover .leftContainer {
border-top-right-radius: 0;
background-color: #ffffff;
border-bottom-right-radius: 0;
}
/*电脑配件商城rotation-end*/
/*精选推荐start*/
.content-desc {
width: 100%;
height: 700px;
background-color: #f6f6f6;
/*background-color: #ff8040;*/
}
.content-desc .box-hd {
height: 58px;
position: relative;
}
.content-desc .box-hd h2 {
font-size: 22px;
font-weight: 200;
line-height: 58px;
color: #333;
}
.content-desc .box-hd .more {
position: absolute;
right: 0;
top: 0;
}
.content-desc .box-hd .more a {
font-size: 16px;
line-height: 58px;
color: #424242;
}
.content-desc .box-hd .more a i {
width: 12px;
height: 12px;
padding: 4px;
margin-left: 8px;
border-radius: 12px;
background-color: #b0b0b0;
color: #fff;
font-size: 12px;
vertical-align: 2px;
}
.content-desc .box-hd .more:hover a {
color: #ff6700;
}
.content-desc .box-hd .more:hover a i {
background-color: #ff6700;
}
/*内容详情标题end*/
/*内容详情start*/
.content-desc .box-bd {
height: 58px;
position: relative;
margin-left: -14px;
margin-right: -60px;
}
.box-bd .row-r {
float: left;
width: 100%;
height: 560px;
}
.box-bd .row-r ul {
overflow: hidden;
}
.box-bd .row-r ul li {
float: left;
height: 260px;
padding: 20px 0;
background-color: #fff;
width: 18%;
/*234*4 = 936 + 56 = 992px*/
position: relative;
margin-left: 14px;
margin-bottom: 14px;
}
/*.box-bd .row-r ul li:hover{
border:1px solid red;
}*/
.box-bd .row-r ul li .figure {
width: 160px;
height: 160px;
margin: 0 auto 18px;
}
.box-bd .row-r ul li .figure a {
display: block;
}
.box-bd .row-r ul li .figure a img {
width: 160px;
height: 160px;
}
.box-bd .row-r ul li .title {
font-size: 14px;
font-wei
JavaScript轮播图
需积分: 3 128 浏览量
2022-07-06
17:22:04
上传
评论
收藏 393KB ZIP 举报
lunbo.zip （11个子文件） 
lunbo 123 css img 
2.jpg 60KB 1.jpg 48KB 6.jpg 69KB 3.jpg 77KB 5.jpg 54KB 4.jpg 29KB 7.jpg 46KB
text.html 23KB index.html 7KB js 
animate.js 2KB .project 965B
评论0