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

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. (转)利用 SVG 和 CSS3 实现有趣的边框动画

    目录 SVG 学习<一>基础图形及线段 SVG 学习<二>进阶 SVG世界,视野,视窗 stroke属性 svg分组 SVG 学习<三>渐变 SVG 学习<四 ...

  2. android 开发 时间选择器TimePicker的使用

    android系统自带时间控件:DatePicker 日期显示控件 DatePickerDialog 日期对话框控件TimePicker 时间显示控件 TimePickerDialog 时间对话框控件 ...

  3. java 基础之 list

    ArrayList 基于 array, 顾名思义. ArrayList是用数组实现的,这个数组的内存是连续的,不存在你说的相邻元素之间还隔着其他内存什么的 索引ArrayList时,速度比原生数组慢是 ...

  4. 3. easyui 修改功能实例

    function modifyPerson() { var rows = $('#personInfoGrid').datagrid('getSelections'); if (rows.length ...

  5. layui动态options

    layui 坑 layui 针对各种表单元素做了较为全面的UI支持,你无需去书写那些 UI 结构,你只需要写 HTML 原始的 input.select.textarea 这些基本的标签即可.我们在 ...

  6. oracle添加列到指定位置

    http://blog.csdn.net/liufeng_king/article/details/7421826

  7. Mybatis:通过MapperScannerConfigurer进行mapper扫描

    在applicationContext.xml里配置的

  8. spring data jpa update

    一:在controller  加上: @Controller @RequestMapping("/user") public class UserController { @Aut ...

  9. ubuntu简单安装apache

    环境: ubuntu 目标: 1.安装web服务器apache 2.打开浏览器,访问自己的web服务器,看到 Hello,World! 开始动手了! 安装sudo apt-get install ap ...

  10. Linux中的Wheel组的作用

    原文:http://www.360doc.com/content/11/0505/10/4644186_114496525.shtml Linux中的Wheel组的作用(用自己的话翻译的) (原文) ...