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

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

思路:

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

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

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

 <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
<script>
$(function(){
var index=1;
var lis=$(".num li");
var time=window.setInterval(function(){
$("#img1").attr("src","images/flash/"+index+".jpg");
index++;
if(index>4){
index=1;
}
//排他思想
for(var i=0;i<lis.length;i++){
for(var j=0;j<lis.length;j++){
lis[j].style.background="red";
lis[j].style.color="white";
lis[j].style.opacity=0.6;
}
lis[index-1].style.background="black";
lis[index-1].style.color="blue";
}
},1000);
});
</script>

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

用jQuery实现轮播图效果,js中的排他思想的更多相关文章

  1. jQuery实现轮播图效果

    通过改变背景色来达到效果,有下角标和左右箭头,都已经实现. html部分: <!DOCTYPE html> <html> <head> <meta chars ...

  2. js轮播图和bootstrap中的轮播图

    js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...

  3. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  4. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  5. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  6. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  7. js原生实现轮播图效果(面向对象编程)

    面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...

  8. js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  9. jQuery 简单滑动轮播图效果

    一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box">         < ...

随机推荐

  1. LeetCode 失败的尝试 10. regular expression matching & 正则

    Regular Expression Matching 看到正则就感觉头大,因为正则用好了就很强大.有挑战的才有意思. 其实没有一点思路.循环的话,不能一一对比,匹配模式解释的是之前的字符.那就先遍历 ...

  2. ubuntu 16042 安装过程

    IDE接口的硬盘被称为hd SCSI和SATA接口的硬盘则被称为sd 第1块硬盘称为sda, 第2块硬盘称为sdb 一块硬盘最多有4个主分区,主分区以外的分区称为扩展分区,硬盘可以没有扩展分区,但是一 ...

  3. 修改json文件

    第三方库jq https://stedolan.github.io/jq/manual/ cat old_deploy.json \ | jq --arg cpu_limit $cpu_limit ' ...

  4. 重识linux-仅执行一次的工作调动at

    重识linux-仅执行一次的工作调动at 使用的是at命令 1 在系统中使用的是 atd这个服务 默认是不开启的 先启动 atd start 查看atd的状态 service atd status 2 ...

  5. requestAnimFrame动画兼容性封装

    window.requestAnimFrame=function(){ return window.requestAnimationFrame ||window.webkitRequestAnimat ...

  6. STM32之USB电路(摘要笔记)

  7. react-native获取设备信息app版本信息,react-native-device-info

    安装 yarn add react-native-device-info react-native link react-native-device-info link 之后就可以直接使用了,ios ...

  8. Spring cloud(2)B Eureka 注册微服务到服务中心

    1.在provide上添加pom(必须加上web)   如果不加 启动后就会自己关闭 <dependency> <groupId>org.springframework.clo ...

  9. Mysql索引,有哪几种索引,什么时候该(不该)建索引;SQL怎么进行优化以及SQL关键字的执行顺序

    索引(Index)是帮助MySQL高效获取数据的数据结构.提取句子主干,就可以得到索引的本质:索引是数据结构. 1.按照索引列值的唯一性,索引可分为唯一索引和非唯一索引 非唯一索引:B树索引 crea ...

  10. 机器学习入门-文本特征-使用LDA主题模型构造标签 1.LatentDirichletAllocation(LDA用于构建主题模型) 2.LDA.components(输出各个词向量的权重值)

    函数说明 1.LDA(n_topics, max_iters, random_state)  用于构建LDA主题模型,将文本分成不同的主题 参数说明:n_topics 表示分为多少个主题, max_i ...