JS实现单击切换图片

JS实现单击切换图片

前言

讲明一点,这是小编参照书上的代码写的,希望读者不要随意转载。

参考代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>项目1title>
    <style type="text/css">
        ul{
      
            margin: 0;
            padding: 0;
        }
        li{
      
            display: inline-block;
        }
        body{
      
            background: #333;
        }
        #pic{
      
            width: 300px;
            height: 206px;
            margin: 0 auto;
        }
        #pic img{
      
            width: 300px;
            height: 206px;
        }
        #pic ul{
      
            margin-top: 10px;
            text-align: center;
        }
        #pic .item,#pic .active{
        /*设置圆点*/
            width: 9px;
            height: 9px;
            cursor: pointer;
            border-radius: 10px;
            margin: 1px 1px 1px 8px;
        }
        #pic .item{
       /*设置没有点击圆点时显示的背景*/
            background: #FFF;
        }
        #pic .active{
       /*设置点击圆点时显示的背景*/
            background: #F60;
        }
    style>
    <script type="text/javascript">
        window.onload=function () {
      
            var div=document.getElementById('pic');
            var img=div.getElementsByTagName('img')[0];
            var ul=div.getElementsByTagName('ul')[0];
            var imgUrl=['imgs/p1.jpg','imgs/p2.jpg','imgs/p3.jpg','imgs/p4.jpg'];
            var li=div.getElementsByTagName('li');

            for(var i=0;i<imgUrl.length;i++){
      
                ul.innerHTML+="
  • "
    ; } img.src=imgUrl[0]; li[0].className='item active'; for (var j=0;j<li.length;j++){ li[j].index=j; li[j].onclick=function () { img.src=imgUrl[this.index]; for(var i=0;i<li.length;i++){ li[i].className='item'; } this.className='item active'; } } }
    script> head> <body> <div id="pic"> <img src="" alt=""> <ul>ul> div> body> html>

    运行效果如下:

    你可能感兴趣的:(前端,js,css,html)