用jQuery实现轮播图效果,js中的排他思想
---恢复内容开始---
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中的排他思想的更多相关文章
- jQuery实现轮播图效果
通过改变背景色来达到效果,有下角标和左右箭头,都已经实现. html部分: <!DOCTYPE html> <html> <head> <meta chars ...
- js轮播图和bootstrap中的轮播图
js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- js原生实现轮播图效果(面向对象编程)
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- js 实现淘宝无缝轮播图效果,可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- jQuery 简单滑动轮播图效果
一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box"> < ...
随机推荐
- 20165205 2017-2018-2 《Java程序设计》第五周学习总结
20165205 2017-2018-2 <Java程序设计>第五周学习总结 教材学习内容总结 学会内部类,匿名类,异常类的写法 牚握try...catch...finally处理异常的方 ...
- linux环境下Mysql的卸载和重新安装和启动
MySql安装 1 安装包准备 1.查看mysql是否安装,如果安装了,卸载mysql (1)查看 [root@hadoop102 桌面]# rpm -qa|grep mysqlmysql-libs- ...
- 恺撒密码 I Python实现
'''恺撒密码 I描述凯撒密码是古罗马凯撒大帝用来对军事情报进行加解密的算法,它采用了替换方法对信息中的每一个英文字符循环替换为字母表序列中该字符后面的第三个字符,即,字母表的对应关系如下:原文:A ...
- Spring MVC 的springMVC.xml疑问解析
<mvc:annotation-driven /> <mvc:annotation-driven /> 会自动注册DefaultAnnotationHandlerMapping ...
- Xshell 用鼠标选中一段文字后自动换行
现象: 使用Xshell连接远程服务器,一般选中都是鼠标选中,然后按快捷键 Ctrl+Insert复制,Shift+Insert粘贴. 可是当选中后松开鼠标,这时候仿佛在xshell里自动输了一个回车 ...
- 浅谈 CAS
CAS: CAS:Compare and Swap, 翻译成比较并交换. java.util.concurrent包中借助CAS实现了区别于 synchronized 同步锁的一种乐观锁. CAS应用 ...
- day10-列表生成式
列表生成式即List Comprehensions,是Python内置的非常简单却强大的可以用来创建list的生成式. 1.生成一个列表 a = [i for i in range(1,100) if ...
- jq时间戳动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- kafka无法消费数据
遇到一个问题,使用Python kafka客户端和kafka命令行都无法消费数据,但是在kafka命令行后面添加--partition 0后就可以消费数据. bin/kafka-console-con ...
- C语言复习:指针知识
指针知识体系搭建 指针强化 指针是一种数据类型 指针也是一种变量,占有内存空间,用来保存内存地址 测试指针变量占有内存空间大小:sizeof(指针名); 2)*p操作内存 在指针声明时,*号表示所声明 ...