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

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. PHP微信公共号H5页面跳转小程序。

    1.H5跳转小程序. function myfun(){ var openid = "<?=$_SESSION['openid']?>"; wx.miniProgram ...

  2. Mysql 获取表属性

    获取表字段信息: select column_name from information_schema.COLUMNS where table_name='表名' nformation_schema. ...

  3. Ubuntu12.04 内核树建立

    先查看自己使用的内核版本 lin@lin-virtual-machine:~$ uname -r --generic 如果安装系统时,自动安装了源码.在 /usr/src 目录下有对应的使用的版本目录 ...

  4. spring异常

    1.The type org.springframework.core.NestedRuntimeException cannot be resolved. It is indirectly refe ...

  5. elasticsearch-java异常

    1. Unsupported major.minor version 52.0 java的jdk版本过低导致,需要更换为jdk1.8+ 2. elasticsearch 的version在pom中提示 ...

  6. BBS--功能4:个人站点页面设计(ORM跨表与分组查询)

    查询: 日期归档查询 1 date_format ============date,time,datetime=========== create table t_mul_new(d date,t t ...

  7. 配置tomcat的开发环境

    第一步:鼠标右键计算机->属性->高级系统设置,进去之后,点击环境变量,如下图所示: 第二步:开始配置tomcat的环境变量,新建系统变量名CATALINA_BASE,值tomcat的安装 ...

  8. KMP算法next数组求解

    关于KMP算法,许多教材用的是递推式求解,虽然代码简洁,但是有些不好理解,这里我介绍一种迭代求next数组的方法 KMP算法关键部分就是滑动模式串,我们可以每次滑动一个单位,直到出现可能匹配的情况,此 ...

  9. C++复习:纯虚函数和抽象类

    纯虚函数和抽象类 1基本概念 2抽象类案例   3抽象类在多继承中的应用 C++中没有Java中的接口概念,抽象类可以模拟Java中的接口类.(接口和协议) 3.1有关多继承的说明 工程上的多继承 被 ...

  10. Eclipse开发Web常见异常

    1.java.lang.IllegalStateException: Web app root system property already set to different value 错误原因: ...