jQuery - 广告图片轮播切换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title> 广告图片轮播切换</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function(){
/*创建一个集合保存图片*/
var imgs=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg");
var flag=0; /*代表数组的下标*/
/*点击向左的按钮*/
$(".arrowLeft").click(function(){
var i=0;
if(flag==0){
flag=imgs.length-1;
i=flag+1; /*图片的编号 li中的值*/
}else{
flag--;
i=flag+1; /*图片的编号*/
}
$(".adver").css("background","url(images/"+imgs[flag]+")");
$("li:nth-of-type("+i+")").css("background","orange");
$("li:nth-of-type("+i+")").siblings().css("background","#333333");
});
/*点击向右的按钮*/
$(".arrowRight").click(function(){
var i=0;
if(flag==imgs.length-1){
flag=0;
i=flag+1; /*图片的编号*/
}else{
flag++;
i=flag+1; /*图片的编号*/
}
$(".adver").css("background","url(images/"+imgs[flag]+")");
$("li:nth-of-type("+i+")").css("background","orange");
$("li:nth-of-type("+i+")").siblings().css("background","#333333");
}); /*显示→ ← 的按钮*/
$(".adver").hover((function(){
$(".arrowRight").show();
$(".arrowLeft").show();
}),function(){
$(".arrowRight").hide();
$(".arrowLeft").hide();
})
})
</script>
</head>
<body>
<div class="adver">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="arrowLeft"></div><div class="arrowRight"></div>
</div>
</body>
</html>
html+js
jQuery - 广告图片轮播切换的更多相关文章
- 基于jquery带时间轴的图片轮播切换代码
基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id="decoroll2 ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- jQuery.YesShow - 图片轮播插件（带图片放大功能）
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- （转）jquery实现图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 基于jquery的图片轮播 （IE8以上）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery实现图片轮播
之前有碰到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号,效果如下: 先看一看html代码,以及对应的css代码: < ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
随机推荐
- 6.11---multipartfile在哪个jar包下---6.11---uuid---swagger上传图片包错去掉注解响应体
<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupl ...
- hibernate annotation 之 一对多、多对一双向外键关联
假设,一个农场产出多种植物,具体的某一植物产于某一农场. 3 import java.io.Serializable; 4 import java.util.Set; 5 import javax.p ...
- Java——Spring介绍
spring 是一个开源框架,是为了解决企业应用程序开发. 功能如下:1.目的:解决企业应用开发的复杂性.2.功能:使用基本的JavaBean代替EJB,并提供了更多的企业应用功能.3.范围:任何Ja ...
- MySQL数据库的三大范式定义，作用—------你所期待的最佳答案
第一范式:确保每列的原子性. 如果每列(或者每个属性)都是不可再分的最小数据单元(也称为最小的原子单元),则满足第一范式. 例如:顾客表(姓名.编号.地址.……)其中"地址"列还可 ...
- .net 大数据量，查找Where优化（List的Contains与Dictionary的ContainsKey的比较）
最近优化一个where查询条件,查询时间很慢,改为用Dictionary就很快了. 一.样例 假设:listPicsTemp 有100w条数据,pictures有1000w条数据. 使用第1段代码执 ...
- 移动web——bootstrap如何修改原组件
基本介绍 1.bootstrap提供了丰富的组件,但是有时候我们不仅要删除不必要的标签,还需要修改里面的样式 2.我们建议若是修改样式那么最好将源样式从css中拷贝出来,名字换掉,然后修改具体样式,这 ...
- JS——缓动框架的问题
1.opacity问题:IE678支持filter: alpha(opacity=50)取值1-100:小数位容易精度丢失,所i有统一json字符串设置为百进制,赋值时除以100 2.zIndex问题 ...
- Apache服务器防范DoS
Apache服务器对拒绝服务攻击的防范主要通过软件Apache DoS Evasive Maneuvers Module 来实现.它是一款mod_access的替代软件,可以对抗DoS攻击.该软件可 ...
- VHDL_ADC之cic_diffcell
library IEEE; use ieee.std_logic_1164.all; use ieee.numeric_std.all; library edclib; use edclib.pkg_ ...
- CAD把实体放到当前选择集中
主要用到函数说明: _DMxDrawX::AddCurrentSelect 把实体放到当前选择集中,详细说明如下: 参数 说明 LONGLONG lId 实体id VARIANT_BOOL isSho ...