jQuery实现轮播图效果
通过改变背景色来达到效果，有下角标和左右箭头，都已经实现。
html部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<link rel="stylesheet" type="text/css" href="css/5---.css"/>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/5---.js"></script>
</head>
<body>
<div id="box">
<ul id="imgs">
<li class="li1"></li>
<li class="li2"></li>
<li class="li3"></li>
</ul>
<ul id="list">
<li></li>
<li></li>
<li></li>
</ul>
<a class="_left" href="#">左</a>
<a class="_right" href="#">右</a>
</div>
</body>
</html>
jq代码：
var index = 0;
var timer;
$(function(){
$('#list li').eq(0).css('background','gold') //点击页码换图
$('#list li').click(function(){
clearInterval(timer)
index = $(this).index()
$('#imgs li').eq(index).fadeIn().siblings().fadeOut()
$(this).css('background','gold').siblings().css('background','')
timer = setInterval(change,1000)
})
//鼠标滑过停止
$('#imgs li').hover(
function(){
clearInterval(timer)
},
function(){
timer = setInterval(change,1000)
}
)
//左右切换
$('._left').click(function(){
clearInterval(timer)
index -= 2;
change();
timer = setInterval(change,1000)
})
$('._right').click(function(){
clearInterval(timer)
change();
timer = setInterval(change,1000)
})
timer = setInterval(change,1000)
})
function change(){
if(index >= 3){
index = 0;
}
if(index == -1){
index = 2
}
$('#imgs li').eq(index).fadeIn().siblings().fadeOut()
$('#list li').eq(index).css('background','gold').siblings().css('background','')
index++;
}
思路千千种！
jQuery实现轮播图效果的更多相关文章
- 用jQuery实现轮播图效果，js中的排他思想
---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...
- 高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...
- jQuery 简单滑动轮播图效果
一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box"> < ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- jQuey实现轮播图效果
再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式 首先介绍一下,本文实现的轮播图的基本效果: 1. 3s自动切换图片,图片切换时提示点跟随切换 2. 鼠标划到图片 ...
- 用js和jQuery做轮播图
Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...
- 云南农职《JavaScript交互式网页设计》 综合机试试卷②——实现轮播图效果
一.语言和环境 实现语言:HTML,CSS,JavaScript,JQuery. 开发环境:HBuilder. 二.题目(100分): 使用JQuery淡入淡出动画,实现轮播图效果 每隔2秒钟切换一张 ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
随机推荐
- HD1013Digital Roots
Problem Description The digital root of a positive integer is found by summing the digits of the int ...
- error日志
2016/06/15 微信调核心时通用意外险 2016-06-15 11:44:23,771>>INFO >> com.isoftstone.core.service.comm ...
- (高精度运算4.7.21)UVA 10106 Product(大数乘法)
package com.njupt.acm; import java.math.BigInteger; import java.util.Scanner; public class UVA_10106 ...
- 从UnitedStack OS 1.0 Preview试用申请问卷调查学习OpenStack
http://www.diaochapai.com/survey/ 您的角色最可能是? * (必填, 多选) OpenStack私有云用户,希望能将OpenStack/UOS用于公司内部私有云 云计算 ...
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- Ubuntu ENet 的下载和编译
ENet的目的是提供一个相对轻便.简单和强大的网络通信层的UDP(用户数据报协议). 它提供的主要功能是可选的.可靠的.顺序的数据包发送. ENet省略了一些更高层次的网络功能,如身份验证.加密,尤其 ...
- HTML第九天学习笔记
今天就继续看了下浮点float属性,代码如下: <html> <head> <title>CSS float属性</title> <meta ht ...
- Oracle 建表常用数据类型的详解
创建表时,必须为表的各个列指定数据类型.如果实际的数据与该列的数据类型不相匹配,则数据库会拒绝保存.如为学生指定出生日期为“1980-13-31”. 在Oracle中,常见的数据类型有: 字符串:字符 ...
- sc7731 Android 5.1 Camera 学习之一Camera 两个对象
众所周知,在Android中Camera采用了C/S架构,其中Camera server 与 Camera client之间通过Android Binder IPC机制进行通信.在Camera实现的框 ...
- TMsgThread, TCommThread -- 在delphi线程中实现消息循环
http://delphi.cjcsoft.net//viewthread.php?tid=635 在delphi线程中实现消息循环 在delphi线程中实现消息循环 Delphi的TThread类使 ...