• 用jQuery实现轮播图效果,js中的排他思想


    ---恢复内容开始---

    jQuery实现轮播图不用单独加载。

    思路:

    a. 通过$("#id名");选择需要的一类标签,获得一个伪数组

    b.由于是伪数组的原因,而对数组的处理最多的是遍历,所以会用到for(); 通过循环可以排除掉其他(包括自己)

    c.遍历后可以单独改变自己的样式 

     1 <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
     2 <script>
     3  $(function(){
     4                 var index=1;
     5                 var lis=$(".num li");
     6                 var time=window.setInterval(function(){
     7                     $("#img1").attr("src","images/flash/"+index+".jpg");
     8                     index++;
     9                     if(index>4){
    10                         index=1;
    11                     }
    12                 //排他思想
    13                 for(var i=0;i<lis.length;i++){
    14                     for(var j=0;j<lis.length;j++){
    15                         lis[j].style.background="red";
    16                         lis[j].style.color="white";
    17                         lis[j].style.opacity=0.6;
    18                     }
    19                     lis[index-1].style.background="black";
    20                     lis[index-1].style.color="blue";
    21                 }
    22                 },1000);
    23             });
    24         </script>

    代码不知道还能简化不,有优化的地方,可以互相交流哦!

  • 相关阅读:
    JAVA基础(十六)Super关键字
    JAVA基础(十五)this关键字
    JAVA基础(十四2.0)
    JAVA基础(十三)多态
    JAVA基础(十二)抽象类与接口
    git基本使用
    vuetify中treeview部分属性梳理
    vuetify初次使用心得
    react-常见面试题
    maven中profile的使用
  • 原文地址:https://www.cnblogs.com/yanpingping/p/10464094.html
Copyright © 2020-2023  润新知