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)首先是页面的结构部分对于我这种左右切换 ...
随机推荐
- cplusplus系列>utility>pair
http://www.cplusplus.com/reference/utility/pair/ 用于存储一对异构对象 // Compile: g++ -std=c++11 pair.cpp #inc ...
- git——merge和rebase的区别
参考http://www.jianshu.com/p/129e721adc6e 我在公司里看到其他同事都使用git pull --rebase拉取远程代码,而我总是用git pull,也有同事和我说过 ...
- PHP魔术法__set和__get
__set: 在给不可访问属性赋值时,__set() 会被调用.语法如下: public void __set ( string $name , mixed $value ) __get: 读取不可访 ...
- 《Java编程的逻辑》第二部分 面向对象
- Miller Rabin 大素数测试
PS:本人第一次写随笔,写的不好请见谅. 接触MillerRabin算法大概是一年前,看到这个算法首先得为它的神奇之处大为赞叹,竟然可以通过几次随机数据的猜测就能判断出这数是否是素数,虽然说是有误差率 ...
- JS高级——Function原型链
基本概念 1.函数可以通过Function new出来,那么Function可以被称作构造函数,被new出来的函数可以被称为一个对象 2.Function既然是构造函数,那么肯定也有原型,它的原型是一 ...
- SQL基本操作——表的创建
通过代码方式创建数据库 create database MyDatabaseNew on primary ( --名字 name='MyDatabaseNew_data', --路径 filename ...
- SSH整合框架+mysql简单的实现
SSH整合框架+mysql简单的实现 1. 框架整合原理: struts2整合Spring 两种: 一种struts2自己创建Action,自动装配Service : 一种 将Action交给Spri ...
- [Windows Server 2003] IIS自带FTP安装及配置方法
★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:IIS6.0自 ...
- vim之tags
好长时间没有上来更新了, 今天趁老板不再上来休闲一下. 本章要说的是和vim的tags相关的内容. 之所以在跳转之后就说明tags是因为这个功能相当的重要和实用. 好的东西自然是需要提前分享的. 首先 ...