程序博客网 > 中文域名网站

易理解的轮播效果

来源：互联网发布：中文域名网站编辑：程序博客网时间：2024/05/22 11:40

css部分:

<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;

}
#box{
width: 300px;
height: 250px;
overflow: hidden;
position: relative;
}
#box img{
width: 300px;
height: 250px;
}
#box #ulli{
position: absolute;
left: 0px;
transition: all 1s;
}
#box ul li{
float: left;
}
#littul li{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50px;
background-color: red;
position: relative;
top: 200px;
left: 80px;
margin-left: 10px;
}
#littul .li{
background-color: white;
}
#left{
width: 50px;
height: 50px;
display: block;
border-radius: 50%;
position: absolute;
top: 100px;
left: 20px;
background:rgba(0,0,0,0.3) gray;
font-weight:900;
line-height: 40px;
font-size:40px;
text-align: center;
color: white;
display: none;
}
#rigth{
width: 50px;
height: 50px;
display: block;
border-radius: 50%;
position: absolute;
top: 100px;
left: 230px;
background:rgba(0,0,0,0.3) gray;
font-weight:900;
line-height: 40px;
font-size:40px;
color: white;
text-align: center;
display: none;
}
#box #rigth:hover{
background:rgba(0,0,0,0.3);

cursor: pointer;

}
#box #left:hover{
background:rgba(0,0,0,0.3);
cursor: pointer;
}
#box:hover>span{
display: block;
}
</style>

body部分：

<body>
<div id="box">
<ul id="ulli">
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
</ul>
<ul id="littul">
<li class="li"></li>
<li></li>
<li></li>
<li></li>
</ul>

<span id="left">&lsaquo;</span>
<span id="rigth">&rsaquo;</span>
</div>
</body>

JS部分：

<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
var oUlli = document.getElementById('ulli');
var oLi = oUlli.getElementsByTagName('li');
var oLittul = document.getElementById('littul');
var oLttli = oLittul.getElementsByTagName('li');
var oL = document.getElementById('left');
var oR = document.getElementById('rigth');

var index=0; //设置索引
oLttli.className = 'li'; //改变第一个点点颜色
oUlli.style.width = oLi[0].offsetWidth*oLi.length+'px'; //设置宽度无缝
function mov(){ //点点和图片向右移动的定时器
index ++; //索引移动增加（自增）
if(index==oLttli.length){ //如果到最后一个点点时，则跳回第一个点点
index = 0;
}
for(var i=0;i<oLttli.length;i++){ //移动前清除，所有点点的属性
oLttli[i].className = '';
}

oLttli[index].className = 'li'; //引用索引值逐个设置点点的样式，做到点点移动效果
oUlli.style.left =(-300*index)+'px'; //引用索引值移动UL的left（图片容器），做到图片移动

}
timer = setInterval(mov,3000); //给上面移动做个循环；

for(var i=0;i<oLttli.length;i++){ //遍历每个点点

oLttli[i].index = i; //获取点点的下表
oLttli[i].onclick = function (){ //点击点点时间

for(var j=0;j<oLttli.length;j++){ //点击前清除，所有点点的属性
oLttli[j].className = "";

}
this.className ="li"; //设置点击当前的点点的样式；
index = this.index; //把索引变为当前改变点点的索引
oUlli.style.left =(-300*index)+'px'; //引用当前点点的索引值移动UL的left（图片容器），做到对应图片移动

}
}

oR.onclick =function(){ //点击右标签，图片和点点向右移动
index ++; //索引移动增加（自增）
if(index==oLttli.length){ //如果到最后一个点点时，则跳回第一个点点
index = 0;
}
for(var i=0;i<oLttli.length;i++){ //移动前清除，所有点点的属性
oLttli[i].className = '';
}
oLttli[index].className = 'li'; //引用索引值逐个设置点点的样式，做到点点移动效果
oUlli.style.left =(-300*index)+'px';//引用当前点点的索引值移动UL的left（图片容器），做到对应图片移动
}
oL.onclick =function(){ //点击左标签，图片和点点向左移动
index --; //索引移动减少（自减）
if(index==-1){ ////如果到第一个点点时，则跳回最后一个点点
index =oLttli.length-1;
}
for(var i=0;i<oLttli.length;i++){ //移动前清除，所有点点的属性
oLttli[i].className = '';
}
oLttli[index].className = 'li'; //引用索引值逐个设置点点的样式，做到点点移动效果
oUlli.style.left =(-300*index)+'px'; //引用当前点点的索引值移动UL的left（图片容器），做到对应图片移动
}
oBox.onmouseover = function(){ //鼠标移入时，停掉定时器
clearInterval(timer);
}

oBox.onmouseout = function(){ //鼠标移出时，启动定时器
timer = setInterval(mov,3000);
}

}
</script>

阅读全文

0 0

中文域名网站

中文域名网站

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子 jianxia 之剑太古剑修逆天剑修武道剑修不死剑修洪荒剑修剑修无上剑修剑修娶妻华山剑修无尽剑修超级剑修女配剑修录剑修记事无敌剑修剑修许仙惊世剑修想必剑修剑修纪事剑修另类速成法被迫转职的剑修剑修男神打脸之路武道剑修林辰史上第一剑修洪荒之剑修昊天逆天剑修聂无双绝世剑修在都市被迫成为剑修之后成为剑修的日子太上忘情之女剑修剑傲九天剑傲苍穹神雕之剑傲中华. 幻羽心尘剑道之剑傲九霄一剑空虚剑傲云霄落叶无忧七剑下山更木剑八更木剑八卍解暗修罗剑八八剑齐飞为什么打不赢逍遥王