请自行添加图片并更改地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
img {vertical-align: top; }
#divv{
width: 200px;
height: 150px;
left: 200px;
top: 200px;
/*border: 1px solid red;
background-color: blue;*/
position:relative;
overflow: hidden;
}
ul{
width: 600%;
height: 150px;
list-style-type: none;
position: absolute;
}
.lii{
float: left;
}
ol{
list-style-type: none;
position: absolute;
margin-left: 130px;
margin-top: 130px;
}
.lil{
float: left;
margin-left: 5px;
width: 10px;
width: 10px;
background-color: blue;
}
p{
position: absolute;
margin-top: 133px;
}
.diiv{
position: absolute;
float: left;
width: 10px;
height: 20px;
background-color: red;
margin: 0px auto;
margin-top: 70px;
}
#div2{
margin-left: 190px;
}
</style>
</head>
<body>
<div id="divv">
<ul id="ull">
<li class="lii"><img src="ji.jpg" alt=""/></li>
<li class="lii"><img src="she.jpg" alt=""/></li>
<li class="lii"><img src="gou.jpg" alt=""/></li>
<li class="lii"><img src="tu.jpg" alt=""/></li>
<li class="lii"><img src="ji.jpg" alt=""/></li>
<li class="lii"><img src="she.jpg" alt=""/></li>
</ul>
<ol id="oll">
<li class="lil">1</li>
<li class="lil">2</li>
<li class="lil">3</li>
<li class="lil">4</li>
</ol>
<p></p>
<div class="diiv" id="div1"><</div>
<div class="diiv" id="div2">></div>
</div>
<script type="text/javascript">
var divv=document.getElementById("divv");
// var lil=document.getElementsByClass("lil");
var ul=divv.children[0];
var ol=divv.children[1];
var p=divv.children[2];
var div1=divv.children[3];
var div2=divv.children[4];
var li1=ol.children[0];
var li2=ol.children[1];
var li3=ol.children[2];
var li4=ol.children[3];
var leader=0,target=0;
var timer=null;
timer=setInterval(autoPlay,10);
function autoPlay(){
target--;
target<=-1000 ? target = 0 : target;
leader=leader+(target-leader)/10;
ul.style.left=leader+"px";
if (leader<=0&&leader>=-150) {
p.innerHTML="鸡";
}
else if (leader<-150&&leader>=-350) {
p.innerHTML="蛇";
}
else if (leader<-350&&leader>=-550) {
p.innerHTML="狗";
}
else if (leader<-550&&leader>=-750) {
p.innerHTML="兔";
}
else if (leader<-750&&leader>=-950) {
p.innerHTML="鸡";
}
else if (leader<-950&&leader>=-1000) {
p.innerHTML="蛇";
}
else if (leader<-1000) {
target=0;
leader=0;
p.innerHTML="鸡";
}
}
ul.onmouseover=function(){
clearInterval(timer);
}
ul.onmouseout=function(){
timer=setInterval(autoPlay,10);
p.innerHTML=" ";
}
li1.onmouseover=function(){
ul.style.left="0px";
clearInterval(timer);
p.innerHTML="鸡";
}
li2.onmouseover=function(){
ul.style.left="-200px";
clearInterval(timer);
p.innerHTML="蛇";
}
li3.onmouseover=function(){
ul.style.left="-400px";
clearInterval(timer);
p.innerHTML="狗";
}
li4.onmouseover=function(){
ul.style.left="-600px";
clearInterval(timer);
p.innerHTML="兔";
}
li1.onmouseout=function(){
leader=0;
target=0;
timer=setInterval(autoPlay,10);
}
li2.onmouseout=function(){
leader=-200;
target=-200;
timer=setInterval(autoPlay,10);
}
li3.onmouseout=function(){
leader=-400;
target=-400;
timer=setInterval(autoPlay,10);
}
li4.onmouseout=function(){
leader=-600;
target=-600;
timer=setInterval(autoPlay,10);
}
div1.onmousedown=function(){
if (target<0&&target>-200) {
ul.style.left="0px";
clearInterval(timer);
}
else if (target<=-200&&target>-400) {
ul.style.left="-200px";
clearInterval(timer);
}
else if (target<=-400&&target>-600) {
ul.style.left="-400px";
clearInterval(timer);
}
else if (target<=-600&&target>-800) {
ul.style.left="-600px";
clearInterval(timer);
}
else if (target<=-800&&target>-1000) {
ul.style.left="-800px";
clearInterval(timer);
}
div1.onmouseup=function(){
if (target<0&&target>-200) {
target=0;
leader=0;
timer=setInterval(autoPlay,10);
}
else if (target<=-200&&target>-400) {
target=-200;
leader=-200;
timer=setInterval(autoPlay,10);
}
else if (target<=-400&&target>-600) {
target=-400;
leader=-400;
timer=setInterval(autoPlay,10);
}
else if (target<=-600&&target>-800) {
target=-600;
leader=-600;
timer=setInterval(autoPlay,10);
}
else if (target<=-800&&target>-1000) {
target=-800;
leader=-800;
timer=setInterval(autoPlay,10);
}
}
}
div2.onmousedown=function(){
if (target<0&&target>-200) {
ul.style.left="-200px";
clearInterval(timer);
}
else if (target<=-200&&target>-400) {
ul.style.left="-400px";
clearInterval(timer);
}
else if (target<=-400&&target>-600) {
ul.style.left="-600px";
clearInterval(timer);
}
else if (target<=-600&&target>-800) {
ul.style.left="-800px";
clearInterval(timer);
}
else if (target<=-800&&target>-1000) {
ul.style.left="-1000px";
clearInterval(timer);
}
div2.onmouseup=function(){
if (target<0&&target>-200) {
target=-200;
leader=-200;
timer=setInterval(autoPlay,10);
}
else if (target<=-200&&target>-400) {
target=-400;
leader=-400;
timer=setInterval(autoPlay,10);
}
else if (target<=-400&&target>-600) {
target=-600;
leader=-600;
timer=setInterval(autoPlay,10);
}
else if (target<=-600&&target>-800) {
target=-800;
leader=-800;
timer=setInterval(autoPlay,10);
}
else if (target<=-800&&target>-1000) {
target=-1000;
leader=-1000;
timer=setInterval(autoPlay,10);
}
}
}
</script>
</body>
</html>