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

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. EF大数据批量处理----BulkInsert

    之前做项目的时候,做出来的系统的性能不太好,在框架中使用了EntityFramework,于是就在网上查资料,研究如何提高EF的性能. 在这分享一篇博客 批量操作提升EntityFramework的性 ...

  2. [Android]Animation 动画介绍和实现

    Animation动画效果来实现菜单的显示和隐藏,本文就来介绍下吧. 1.Animation 动画类型 Android的animation由四种类型组成: XML中 alph 渐变透明度动画效果 sc ...

  3. JVM Tools

    Java VisualVm 提供可视化界面展示运行在JVM上应用的信息.这些信息可用于诊断剖析应用. Jconsole Jconsole是基于JMX监视工具.Jconsole使用内置的JMX在java ...

  4. python中 将你的名字转化成为二进制并输出

    1 name = "吴彦祖" 2 for i in name: 3 i_by = bytes(i, encoding = "utf-8") 4 for i_bi ...

  5. Dagger2使用

    初衷 Dagger2的初衷就是通过依赖注入让你少些很多公式化代码,更容易测试,降低耦合,创建可复用可互换的模块.你可以在Debug包,测试运行包以及release包优雅注入三种不同的实现. 依赖注入 ...

  6. Flex+BlazeDS+java通信详细笔记

    整了很长时间的通信,还是一直有一点问题.现在搞定了,记录一下,也跟有需求的同学们共享. 我重新把所有的过程再做一遍. 1新建Flex+BlazeDS+JAVA项目 右键.新建Flex项目 其中blaz ...

  7. SpringMVC源码学习之request处理流程

    目的:为看源码提供调用地图,最长调用逻辑深度为8层,反正我是springMVC源码学习地址看了两周才理出来的. 建议看完后还比较晕的,参照这个简单的模型深入底层,仿SpringMVC自己写框架,再来理 ...

  8. Django 之单个mysql表使用

    1. mysql 表使用的功能有: 增 删  改 查  这几大功能, 但是mysql 和django 对接之后,使用的语法不是原生的SQL语法. 2. 增功能的实现: User.objects.cre ...

  9. ubuntu防火墙命令初探

    1.防火墙的状态与开关 1)$sudo ufw status  //查看防火墙的状态及当前的设置规则 2)$sudo ufw enable //开启防火墙 3)$sudo ufw disable // ...

  10. redis开启外网访问

    redis默认只允许本地访问,要使redis可以远程访问可以修改redis.conf   打开redis.conf文件在NETWORK部分有说明   ######################### ...