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

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. 关于QT_Creator不能在线调试问题

    电脑:W7+64位,QT:5_7_0(vs2015版本) 用QTcreator进行在线调试时出现找不到“engine...”,原因是没有在线调试软件 CDB下载地址:http://msdn.micro ...

  2. Snort规则大探秘

    版本联系 Snort规则可以用来检测数据包的不同部分.Snort 1.x可以分析第3层和第4层的信息,但是不能分析应用层协议.Snort v 2.x增加了对应用层头部分析的支持.所有的数据包根据类型的 ...

  3. 20165205 2017-2018-2 《Java程序设计》实验四 Android程序设计

    20165205 2017-2018-2 <Java程序设计>实验四 Android程序设计 实验内容 实验四 Android程序设计-1 Android Stuidio的安装测试: 参考 ...

  4. tensorflowwindows安装

    1.在python官网下载3.5 64位版本的python,并进行安装 https://www.python.org/ 2.进行安装,配置环境变量 3.命令行执行pip3 install numpy ...

  5. Warning: 执行完毕, 但带有警告 trigger trigger_EqPic_insert 已编译。

    create or replace trigger trigger_EqPic_insert before insert on TB_EqPic for each row declare begin ...

  6. Spring MVC 学习笔记8 —— 实现简单的用户管理(4)用户登录

    Spring MVC 学习笔记8 -- 实现简单的用户管理(4)用户登录 增删改查,login 1. login.jsp,写在外面,及跟WEB-INF同一级目录,如:ls Webcontent; &g ...

  7. py库: scrapy (深坑未填)

    scrapy 一个快速高级的屏幕爬取及网页采集框架 http://scrapy.org/ 官网 https://docs.scrapy.org/en/latest/ Scrapy1.4文档 http: ...

  8. 深度学习原理与框架-Tensorflow卷积神经网络-卷积神经网络mnist分类 1.tf.nn.conv2d(卷积操作) 2.tf.nn.max_pool(最大池化操作) 3.tf.nn.dropout(执行dropout操作) 4.tf.nn.softmax_cross_entropy_with_logits(交叉熵损失) 5.tf.truncated_normal(两个标准差内的正态分布)

    1. tf.nn.conv2d(x, w, strides=[1, 1, 1, 1], padding='SAME')  # 对数据进行卷积操作 参数说明:x表示输入数据,w表示卷积核, stride ...

  9. css-图片垂直居中

    1. img { vertical-align: middle; }   2. <body> <div> <img src="1.jpg" alt=& ...

  10. Netty - 3 内存分配

    https://www.cnblogs.com/gaoxing/p/4253833.html netty的buffer引入了缓冲池.该缓冲池实现使用了jemalloc的思想 内存分配是面向虚拟内存的而 ...