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)首先是页面的结构部分对于我这种左右切换 ...
随机推荐
- struts2.1.6存在中文乱码的bug
如题,后续版本中已解决:可以通过添加filter的方式解决.
- drupal 8 ——自定义权限
在项目开发里面,我遇到了这么一个需求,就是对于node的title字段,编辑内容的角色不允许对title进行编辑.title字段是创建内容类型时自动生成的字段,不能在drupal8后台直接配置权限,所 ...
- Android视频截图
本文介绍如何获取视频中某个时间点的数据 调用以下方法即可,特别注意,在获取图片时的参数单位为微秒,不是毫秒 如果错用了毫秒会一直获取第一帧的画面 /** * 获取某个时间点的帧图片 * * @para ...
- Raspberry Pi开发之旅-光照强度检测（BH1750）
一.前期准备 1.环境要求 GY30模块(BH1750FVI传感器),树莓派系统,python-smbus,iic开启 2.取消对IIC驱动的黑名单 nano /etc/modprobe.d/rasp ...
- Rsync 传输不需要输入密码
1.背景 1) 一个作为服务器端:VM3(IP: 3.9.8.151) 2) 一个作为客户端:VM2(IP: 3.9.8.157) 3) 服务器端和客户端网络 ...
- CSS——行业动态demo
1.padding的运用:子div继承父div的宽,子div的padding-left值是不会撑大的. 2.背景图片的运用:不平铺.定位 3.ul本身就是一个盒子,它的高度是li中的字体的默认高度撑起 ...
- unable to get system library for the project
当向eclipse导入项目实例后,项目上出现红叉的错误提示,在项目属性里的Java Build Path里发现了错误提示复选选项: unable to get system library for t ...
- CDR服装设计-用CorelDRAW排钻如何把圈摆均匀
服装设计一直都是一个很火热的行业,也是一个比较高端的行业,随着时代的步伐,以前的人都是用手绘的方式来设计服装,现在不一样了,电脑可以说普及到了每一个家庭,让软件以更快的速度,更准确的数据来设计服装中的 ...
- ES6 作用域的问题
- CAD向控件注册一个命令（com接口VB语言）
主要用到函数说明: MxDrawXCustomFunction::Mx_RegistUserCustomCommand 向控件注册一个命令,用户在命令行输入命令名这个字符串,就会触发执行命令事件 命令 ...