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 ...
随机推荐
- POJ3080Blue Jeans（暴力）
开始做字符串专题,地址 第一题水题,暴力就可以做 #include <map> #include <set> #include <stack> #include & ...
- 【CSDN博客之星】2013年CSDN博客之星正在评选，希望大家支持，非常感谢！
首先在此感谢 MoreWindows 秒杀多线程面试题系列让我成长和学习,同时也借鉴了很多优秀观点和示例! 请各位读者可以支持MoreWindows,让更优秀的文章陪伴我们! 各位读者好, 本人博客自 ...
- 创建维护计划时，提示“代理XP”组件已作为此服务器安全配置的一部分被关闭
一.问题在Management Studio中新建维护计划时,提示以下错误信息:“代理XP”组件已作为此服务器安全配置的一部分被关闭.系统管理员可以使用sp_configure来启用“代理XP”.有关 ...
- jqGrid初次使用遇到的问题及解决方法
问题一:初始化定义翻页用的导航栏时,表中出现"undefined"方框: 解决:需要导入grid.locale-cn.js文件. 问题二:页面只有一页,无法翻页: 解决:初始化设置 ...
- wikioi 3038 3n+1问题
题目描述 Description 3n+1问题是一个简单有趣而又没有解决的数学问题.这个问题是由L. Collatz在1937年提出的.克拉兹问题(Collatz problem)也被叫做hailst ...
- IC开短路测试(open_short_test),编程器测试接触不良、开短路
http://kitebee.meibu.com/forum.php?mod=viewthread&tid=69654&extra=page%3D5 IC开短路测试(open_shor ...
- DropdownList绑定的两种方法
动态绑定方法一:动态绑定数据库中的字段. SqlConnection conn = UtilitySqlClass.OperateDataBase.ReturnConn();string strSQL ...
- 【M32】在未来时态下发展程序
1.在未来时态下发展程序,就是接受“事情总会变化”的事实,并准备应对之策. 2.记住,程序的维护者通常不是最初的开发者,因此,设计和实现的时候,应该考虑别人更好地理解,修改自己的程序. 3.重要的一点 ...
- Entity Framework 6 Code First +MVC5+MySql/Oracle使用过程中的几个问题
1. namespace Snapsia.Web.Models { using System; using System.Data.Entity; using System.ComponentMode ...
- Swift学习笔记九
闭包 闭包是指能够在代码中使用和传递的自包含(self-contained)的块. Swift中的闭包和C以及OC中的块很相似.它们可以捕获并且存储定义它们的上下文中的任何常量和变量的引用.Swift ...