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)首先是页面的结构部分对于我这种左右切换 ...
随机推荐
- JQuery 记第N次被坑 - ajax请求字符集问题
前言:两个功能差不多的页面,都是使用$.post()请求后台,页面A传递到后台的中文参数正常,页面B传递到后台的中文参数则为乱码 分析过程: ①使用chrome的开发者工具,分析两个页面的ajax请求 ...
- win10 打开chm文件内容空白如何解决
win10 打开chm文件内容空白如何解决 .CHM文件是非常常见的帮助文件格式.由于其便携性,很多小说或杂志也会采用chm格式.win7/win8.1/win10系统,由于采用了UAC,致使原本在x ...
- asp.net MVC 下拉多级联动及编辑
多级联动实现,附源码.当前,部分代码是参与博客园其它网友. 新增,前台代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2 ...
- （转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）
http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...
- java静态变量、实例变量和局部变
实例变量又称成员变量: 1⃣️成员变量定义在类中,在整个类中都可以被访问 2⃣️成员变量随着对象的建立而建立,随对象的消失而消失,存在于对象所在的对内存中 3⃣️成员变量有默认初始值 局部变量: 1⃣ ...
- 删数据ORA-02292主键约束问题
通常在删除某个表A的时候,会出现这个错误.原因是另一个表B的某个字段引用了A表的某个字段作为约束(这个的另一个说法是外键). 假如引用的字段叫field,当B.field = A.field , 而你 ...
- 多目标跟踪笔记一：Finding the Best Set of K Paths Through a Trellis With Application to Multitarget Tracking
Abstract 本文提出一种寻找K最优路径的方法. k最优路径的定义:1.the sum of the metrics of all k paths in the set is minimized. ...
- Java报表统计导出Word-xdocin方式
官网:http://www.xdocin.com Controller层: //创建对象 XDocService xdocService = new XDocService(); //封装参数 Map ...
- JavaScript 复杂判断的优雅写法
JavaScript 复杂判断的优雅写法 <div> <input type="button" name="btn" value=" ...
- The C++ Programming Language - Bjarne Stroustrup
Preface Part 1: Introduction 1.1 The Structure of This Book 1.1.1 Introduction 1.1.2 Basic Facilitie ...