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)首先是页面的结构部分对于我这种左右切换 ...
随机推荐
- Sublime Text2安装emmet
一.安装Package Control 如果Preferences中没有Package Control,需要手动安装.安装方法如下: 访问Package Controls站点复制一段python命令安 ...
- Node.js的运行
nodejs的运行 首先要在你的电脑上下载node.js并安装,大家可以去官网下载 1.第一种方法:去官网下载git,安装好后,在桌面上单击鼠标右键,会有一个Git Bash Here,然后在新建一个 ...
- Android的HttpUrlConnection类的GET和POST请求
/** * get方法使用 */ private void httpGet() { new Thread() { @Override public void run() { //此处的LOGIN是请求 ...
- 如何防止SQL注入式攻击
一.什么是SQL注入式攻击? 所谓SQL注入式攻击,就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串,欺骗服务器执行恶意的SQL命令.在某些表单中,用户输入的内容直接用来构造(或 ...
- spring+spring MVC+mybatis 框架搭建
1.新建一个javaWeb工程Test,创建时记得勾选web.xml文件. 2.导入需要的jar包,Mybatis所有的jar,spring所有的jar,mysql驱动包. 这里mybatis和spr ...
- Spring学习_day02_AOP,AspectJ,JdbcTemplate
本文为博主辛苦总结,希望自己以后返回来看的时候理解更深刻,也希望可以起到帮助初学者的作用. 转载请注明 出自 : luogg的博客园 谢谢配合! Spring_day02 一.AOP面向切面编程 1. ...
- js的replace, 高亮
";console.log(str.replace(/\,/g, "")); //输出 123 ";console.log(str);//输出123 " ...
- Git学习总结四（删除）
一般情况下,你通常直接在文件管理器中把没用的文件删了,或者用rm命令删了: $ rm test.txt 这个时候,Git知道你删除了文件,因此,工作区和版本库就不一致了,git status命令会立刻 ...
- （2）搜索广告CTR预估
https://www.cnblogs.com/futurehau/p/6184585.html 1. CTR预估的流程 数据 -> 预处理 ->特征抽取 ->模型训练 ->后 ...
- Vue中.sync修饰符
Vue 中 sync的作用 <FatherComponent :a.sync = 'b'><FatherComponent /> 子组件中emit('update:a',... ...