简单通过点击左右按钮来改变图片轮播

来源：互联网发布：js push pop 编辑：程序博客网时间：2024/05/22 10:33

根据老师得建议个人第一次写自己平常练习的东西，问题还有很多，还请见谅和指导，

首先建立基本的标签，利用DIV

<div id="contianer">    <ul id="uls">                                                          //建立无序列表，在li里面利用img存储图片，里面路径根据自己的来更改        <li ><img src="img/124402-106.jpg"> </li>        <li ><img src="img/338659-106.jpg"> </li>        <li ><img src="img/351761-106.jpg"> </li>        <li ><img src="img/352846-106.jpg"> </li>    </ul>    <div id="left">左</div>//左右用来实现按钮点击效果    <div id="right">右</div>    <ol id="ols">                 //建立有序列表用来跟踪当前显示那张图片，在li其中添加一个类用来替换显示        <li class="bg"></li>         <li></li>        <li></li>        <li></li>        <li></li>    </ol></div>样式部分*{margin: 0;padding: 0;}#contianer{width: 1920px;height: 900px;overflow: hidden;margin: 50px auto;position: relative;}//给父级添加相对定位#contianer ul{text-decoration: none;}#contianer ul li{height: 100%;width: 100%;float: left;}#contianer div{    width: 30px;    height: 50px;    background: #555;    color: white;    line-height: 60px;    opacity:0.5;    font-size: 20px;    top:450px ;    position: absolute;}#left{    left:0;}#right{right:0;}ol{position: absolute;bottom: 20px;left:300px;list-style-type: none;}ol li{margin: 5px; width: 50px;height: 50px;border-radius: 100%;float: left;background: white;}.bg{background: red;}js效果部分  var left=document.getElementById("left"),    right=document.getElementById("right"),    uls=document.getElementById("uls"),    lis=uls.getElementsByTagName("li"),    ols=document.getElementById("ols"),    lid=ols.getElementsByTagName("li");var index=0;setInterval(function () {    for(var i=0;i<lis.length;i++){        lis[i].style.display="none";        lid[i].className="";    }    index++;    if (index>lis.length-1)    {        index=0;    }    lis[index].style.display="block";    lid[index].className="bg";},10000);right.onclick=function(){    for(var i=0;i<lis.length;i++){        lis[i].style.display="none";        lid[i].className="";    }    index++;    if (index>lis.length-1)    {        index=0;    }    lis[index].style.display="block";    lid[index].className="bg";}left.onclick=function(){    for(var i=0;i<lis.length;i++){        lis[i].style.display="none";        lid[i].className="";    }    index--;    if (index<0)    {        index=lis.length-1;    }    lis[index].style.display="block";    lid[index].className="bg";}


我自己都觉得麻烦，嘻嘻

阅读全文

0 0