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

    一.HTML

        <div id="box">

                <ul>  

                   <li>  <img src="Images/img1.jpg" /> </li>

                   <li>  <img src="Images/img2.jpg" />  </li>

                   <li>  <img src="Images/img3.jpg" /> </li> 

                   <li>  <img src="Images/img4.jpg" /> </li> 

                   <li> <img src="Images/img5.jpg" /> </li>

               </ul>

                <ol>  

                               <li class="current">1</li>  

                               <li>2</li>              

                               <li>3</li>            

                               <li>4</li>       

                               <li>5</li>        

                  </ol>  

           </div>

    二.CSS

     #box ol      

        {            

      list-style:none; /*去掉编码  */          

        position: absolute;           

       right:10px;           

       bottom: 10px;

             }

             #box ol li      

        {             

    float: left;           

         20px;          

        height: 20px;         

         background-color: #d110d3;    

          margin: 3px;          

         text-align: center;           

        line-height: 20px;         

         color: #000;            

       cursor: pointer;            

      border:1px solid #ffffff;    

          }

             #box ol li .current    

          {           

       background-color: #ffd800;

             }

    三.JS

    $(document).ready(function () {
        $("#box ol li").mouseover(function (event) {
            var index = $(this).index();//获取当前索引号
            $("#box ul li").eq(index).fadeIn().siblings().hide();
            //$(this).addClass('current').siblings().removeClass('current');//当前加样式,同胞元素去掉样式
        });
    });

    前端-语言
  • 相关阅读:
    Oracle数据库备份与恢复的三种方法
    mybatis内置类型
    mybatis中#{}和${}的区别
    Statement和PreparedStatement的区别; 什么是SQL注入,怎么防止SQL注入?
    java web简单权限管理设计
    Flask总结篇
    Django总结篇
    API总结
    实战小练习
    数据操作
  • 原文地址:https://www.cnblogs.com/beesky520/p/3847350.html
Copyright © 2011-2022 走看看