<style type="text/css"> *{ margin: 0 auto; padding: 0; } #clmb{ width: 480px; height: 300px; margin-top: 100px; margin-bottom: 100px; overflow: hidden; } /*移动的图片div*/ #pick{ width: 1500px; height: 300px; } .tup{ width: 495px; height: 300px; } /*圆圈*/ .roll{ width: 20px; height: 20px; border: 1px solid white; border-radius:50% ; position: relative; background: black; opacity: 0.2; } .roll:hover{ cursor: pointer; } #roll_1{ right: 34px; bottom: 135px; } #roll_2{ right: 1px; bottom: 158px; } #roll_3{ right: -32px; bottom: 180px; } /*左右按钮*/ .butt{ width: 50px; height: 50px; color: white; font-size:50px; line-height: 50px; position: relative; } .butt:hover{ color: black; opacity: 0.7; cursor: pointer; } #left{ bottom: 335px; right: 211px; } #right{ bottom: 388px; right: -213px; } </style>
<body> <div class="div_list">3、图片轮播 加图片下方圆点 加左右点击</div> <div id="clmb"> <div id="pick" style="margin-left: 0px; "> <img class="tup" src="20100730154518390017.jpg"/> <img class="tup" src="42166d224f4a20a4edfd8a079c529822730ed00b.jpg"/> <img class="tup" src="u=655850498,3302772215&fm=26&gp=0.jpg"/> </div> </div> <div id="roll_1" class="roll" onclick="test_roll1()" onmouseover="qing()" onmouseout="chong()" style="opacity: 0.9;"></div> <div id="roll_2" class="roll" onclick="test_roll2()" onmouseover="qing()" onmouseout="chong()"></div> <div id="roll_3" class="roll" onclick="test_roll3()" onmouseover="qing()" onmouseout="chong()"></div> <div id="left" class="butt" onclick="test_left()" onmouseover="qing()" onmouseout="chong()">←</div> <div id="right" class="butt" onclick="test_right()" onmouseover="qing()" onmouseout="chong()">→</div> </body>
<script type="text/javascript">
var timer = setInterval("test_3()",2000);//轮播
function qing(){
window.clearInterval(timer);
}
function chong(){
timer = setInterval("test_3()",2000);
}
var bs = 1;
// 图片的切换和圆点的变换
function test_3(){
var a = document.getElementById("pick");
var b = document.getElementsByClassName("roll");
var ml= a.style.marginLeft;
ll=ml.substring(0,ml.length-2);
dl=ll-500;
if(dl ==-1500){
dl=0;
}
a.style.marginLeft=dl+‘px‘;
for (var i= 0;i<b.length;i++) {
b[i].style.opacity="0.2";
}
b[bs].style.opacity="0.9";
bs++;
if (bs==3) {
bs=0;
}
}
// 鼠标点击左右
var xx = 3;
function test_left(){
var a = document.getElementById("pick");
var ml= a.style.marginLeft;
ll=ml.substring(0,ml.length-2);
ll=Number(ll);
dl= ll + 500;
if(dl == 500){
dl=-1000;
}
dl=String(dl);
a.style.marginLeft=dl+‘px‘;
var b = document.getElementsByClassName("roll");
for (var i= 0;i<b.length;i++) {
b[i].style.opacity="0.2";
}
xx--;
b[xx].style.opacity="0.9";
if (xx == 0) {
xx = 3;
}
}
function test_right(){
var a = document.getElementById("pick");
var ml= a.style.marginLeft;
ll=ml.substring(0,ml.length-2);
dl=ll-500;
if(dl == -1500){
dl=0;
}
a.style.marginLeft=dl+‘px‘;
var b = document.getElementsByClassName("roll");
for (var i= 0;i<b.length;i++) {
b[i].style.opacity="0.2";
}
b[bs].style.opacity="0.9";
bs++;
if (bs==3) {
bs=0;
}
}
function test_roll1(){
document.getElementById("pick").style.marginLeft="0px";
for (var i=0;i<3;i++) {
document.getElementsByClassName("roll")[i].style.opacity="0.2";
}
document.getElementsByClassName("roll")[0].style.opacity="0.9";
}
function test_roll2(){
document.getElementById("pick").style.marginLeft="-500px";
for (var i=0;i<3;i++) {
document.getElementsByClassName("roll")[i].style.opacity="0.2";
}
document.getElementsByClassName("roll")[1].style.opacity="0.9";
}
function test_roll3(){
document.getElementById("pick").style.marginLeft="-1000px";
for (var i=0;i<3;i++) {
document.getElementsByClassName("roll")[i].style.opacity="0.2";
}
document.getElementsByClassName("roll")[2].style.opacity="0.9";
}
</script>
原文：https://www.cnblogs.com/mr171733/p/9562681.html