html
<!DOCTYPE HTML>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title></title>
<script type="text/javascript" src="echarts.js"></script>
<script type="text/javascript" src="echarts-all.js"></script>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div id="father" class="father">
<div id="img" class="img">
<div id="img1" class="img1"></div>
<div id="list" class="list">
<ul>
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
<li id="li4"></li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
`.father {
width: 100%;
height: 300px;
background: #000000;
text-align: center;
position: relative;
}
.img {
width: 144px;
height: 90px;
position: absolute;
left: 40%;
top: 30%;
}
.img1{
width: 144px;
height: 90px;
background: url(kobe1.jpg) no-repeat;
float:left;
animation: switch1 20s swing infinite;
-moz-animation: switch1 20s linear infinite; /* Firefox */
-webkit-animation: switch1 20s linear infinite ; /* Safari ??Chrome */
-o-animation: switch1 20s linear infinite ; /* Opera */
}
.list{
white-space: nowrap;
text-align: center;
position: absolute;
left: -20px;
top:50px;
}
li {
line-height:5px;
margin:0px 10px;
width: 4px;
height: 4px;
background: #FFFFFF;
text-align:center;
display: inline-block;
border-radius:50%;
}
li:hover {
cursor: pointer;
line-height:5px;
margin:0px 10px;
width: 4px;
height: 10px;
background: #FFFFFF;
text-align:center;
display: inline-block;
}
@keyframes switch1
{
0% {background: url(kobe1.jpg) no-repeat;opacity: 0}
10% {background: url(kobe1.jpg) no-repeat;opacity: 1}
20% {background: url(kobe2.jpg) no-repeat;opacity: 0}
30% {background: url(kobe2.jpg) no-repeat;opacity: 1}
40% {background: url(kobe3.jpg) no-repeat;opacity: 0}
50% {background: url(kobe3.jpg) no-repeat;opacity: 1}
60% {background: url(kobe4.jpg) no-repeat;opacity: 0}
70% {background: url(kobe4.jpg) no-repeat;opacity: 1}
80% {background: url(kobe5.jpg) no-repeat;opacity: 0}
90% {background: url(kobe5.jpg) no-repeat;opacity: 1}
100% {background: url(kobe1.jpg) no-repeat;opacity: 0}
}
@keyframes switch2
{
0% {opacity:0;transform:translateX(144px);}
20% {opacity:0;transform:translateX(0px)}
40% {opacity:1;transform:translateX(-144px);}
60% {transform:translateX(-144px)}
80% {transform:translateX(-144px)}
100% {transform:translateX(0px)}
}
JS
(‘#img1’).click(function() {
var bac = $(‘#img1’).css(“background”);
if(bac.match(‘kobe1.jpg’) != null) {
alert(“kobe1.jpg”);
}
if(bac.match(‘kobe2.jpg’) != null) {
alert(“kobe2.jpg”);
}
if(bac.match(‘kobe3.jpg’) != null) {
alert(“kobe3.jpg”);
}
if(bac.match(‘kobe4.jpg’) != null) {
alert(“kobe4.jpg”);
}
if(bac.match(‘kobe5.jpg’) != null) {
alert(“kobe5.jpg”);
}
});
});
`