<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>
