zoukankan      html  css  js  c++  java
  • js轮播图

    <!DOCTYPE html">
    <html" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>images slide</title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            li {
                list-style: none;
            }
            img {
                border: 0;
            }
            a {
                text-decoration: none;
            }
            #slide {
                width: 530px;
                height:300px;
                box-shadow: 0px 0px 5px #c1c1c1;
                margin: 20px auto;
                position: relative;
                overflow: hidden;
            }
            #slide ul {
                position: absolute;
                left: 0px;
                top: 0px;
                height:300px;
                width: 11930px;
            }
            #slide ul li {
                width: 530px;
                height: 300px;
                overflow: hidden;
                float: left;
            }
            #slide .ico {
                width: 530px;
                height: 20px;
                overflow: hidden;
                text-align: center;
                position: absolute;
                left: 0px;
                bottom: 10px;
                z-index: 1;
            }
            #slide .ico a {
                display: inline-block;
                width: 10px;
                height:10px;
                background: #fff;
                margin: 0px 5px;
                border-radius: 50%;
            }
            #slide .ico .active {
                background:red;
            }
            #btnLeft {
                width: 60px;
                height:60px;
                line-height: 60px;
                left: 0px;
                top:120px;
                background: rgba(0,0,0,0.2);
                position: absolute;
                z-index: 2;
                border-radius: 50%;
                text-align: center;
                font-size: 30px;
                color: #fff;
            }
            #btnLeft:hover {
                background: rgba(0,0,0,0.8);
            }
            #btnRight {
                width: 60px;
                height:60px;
                line-height: 60px;
                right: 0px;
                top:120px;
                background: rgba(0,0,0,0.2);
                position: absolute;
                z-index: 2;
                border-radius: 50%;
                text-align: center;
                font-size: 18px;
                color: #fff;
            }
            #btnRight:hover {
                background: rgba(0,0,0,0.8);
            }
    
        </style>
    
        <script type="text/javascript">
            window.onload = function() {
                var oIco = document.getElementById("ico");
                var aBtn = oIco.getElementsByTagName("a");
                var oSlide = document.getElementById("slide");
                var oUl = oSlide.getElementsByTagName("ul");
                var aLi = oUl[0].getElementsByTagName("li");
                var oBtnLeft = document.getElementById("btnLeft");
                var oBtnRight = document.getElementById("btnRight");
    
                //获取每个li的宽度
                var baseWidth = aLi[0].offsetWidth;
    //            alert(baseWidth);
                //设置外围ul的总宽度
                oUl[0].style.width = baseWidth * aLi.length + "px";
                var iNow = 0;
    
                //获取焦点圆点 点击的时候显示
                for(var i=0;i<aBtn.length;i++) {
                    aBtn[i].index = i;
                    aBtn[i].onclick = function() {
                        //alert(this.index);
                        //alert(oUl[0].style.left);
                        move(this.index);
                        //aIco[this.index].className = "active";
                    }
                }
                //左侧点击
                oBtnLeft.onclick = function() {
                    iNow ++;
                    //document.title = iNow;
                    move(iNow);
                }
                //右侧点击
                oBtnRight.onclick = function() {
                    iNow --;
                    document.title = iNow;
                    move(iNow);
                }
    
                var curIndex = 0;
                var timeInterval=3000 ;
                setInterval(change,timeInterval);
                function change() {
                    if(curIndex == aBtn.length) {
                        curIndex =0;
                    } else {
                        move(curIndex);
                        curIndex += 1;
                    }
                }
                //设置函数
                function move(index) {
                    //document.title = index; 超过数组的长度,重置index=0
                    if(index>aLi.length-1) {
                        index = 0;
                        iNow = index;
                    }
                    //小于0的时候 设置index=数组最大的
                    if(index<0) {
                        index = aLi.length - 1;
                        iNow = index;
                    }
                    //设置焦点颜色
                    for(var n=0;n<aBtn.length;n++) {
                        aBtn[n].className = "";
                    }
                    aBtn[index].className = "active";
    
                    //ul宽度滚动
                    oUl[0].style.left = -index * baseWidth + "px";
                    //buffer(oUl[0],{
                    // left: -index * baseWidth
                    // },8)
    
                }
            }
        </script>
    </head>
    <body>
    <div id="slide">
        <a id="btnLeft" href="javascript:void(0);" >></a>
        <a id="btnRight" href="javascript:void(0);" ><</a>
        <!--when change next image:style="left: -(n-1)*800px;"-->
        <ul>
            <li><img src="1.jpg" alt="" /></li>
            <li><img src="2.jpg" alt="" /></li>
            <li><img src="3.jpg" alt="" /></li>
            <li><img src="4.jpg" alt="" /></li>
        </ul>
        <div id="ico" class="ico">
            <a class="active" href="javascript:void(0);"></a>
            <a href="javascript:void(0);"></a>
            <a href="javascript:void(0);"></a>
            <a href="javascript:void(0);"></a>
        </div>
    </div>
    </body>
    </html>
  • 相关阅读:
    解决:Could not resolve archetype org.apache.maven.archetypes
    Spring MVC配置MyBatis输出SQL
    Spring集成MyBatis 通用Mapper以及 pagehelper分页插件
    关于SpringMVC或Struts2接受参数接收不到的原因
    配置quartz启动时就执行一次
    ajaxFileUpload进行文件上传时,总是进入error
    spring mvc注入配置文件里的属性
    java中将一个文件夹下所有的文件压缩成一个文件
    flume failed to start agent because dependencies were not found in classpath
    ubuntu不能安装pip unable to install pip in unbuntu
  • 原文地址:https://www.cnblogs.com/nifengs/p/4952010.html
Copyright © 2011-2022 走看看