1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title> 广告图片轮播切换</title>
  6.     <link rel="stylesheet" href="css/style.css">
  7.     <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
  8.     <script type="text/javascript">
  9.         $(function(){
  10.             /*创建一个集合保存图片*/
  11.             var imgs=new Array("adver01.jpg","adver02.jpg","adver03.jpg","adver04.jpg","adver05.jpg","adver06.jpg");
  12.             var  flag=0;  /*代表数组的下标*/
  13.             /*点击向左的按钮*/
  14.             $(".arrowLeft").click(function(){
  15.                 var i=0;
  16.                 if(flag==0){
  17.                     flag=imgs.length-1;
  18.                     i=flag+1;  /*图片的编号 li中的值*/
  19.                 }else{
  20.                     flag--;
  21.                     i=flag+1;  /*图片的编号*/
  22.                 }
  23.                 $(".adver").css("background","url(images/"+imgs[flag]+")");
  24.                 $("li:nth-of-type("+i+")").css("background","orange");
  25.                 $("li:nth-of-type("+i+")").siblings().css("background","#333333");
  26.             });
  27.             /*点击向右的按钮*/
  28.             $(".arrowRight").click(function(){
  29.                 var i=0;
  30.                 if(flag==imgs.length-1){
  31.                     flag=0;
  32.                     i=flag+1;  /*图片的编号*/
  33.                 }else{
  34.                     flag++;
  35.                     i=flag+1;  /*图片的编号*/
  36.                 }
  37.                 $(".adver").css("background","url(images/"+imgs[flag]+")");
  38.                 $("li:nth-of-type("+i+")").css("background","orange");
  39.                 $("li:nth-of-type("+i+")").siblings().css("background","#333333");
  40.             });
  41.  
  42.             /*显示→   ← 的按钮*/
  43.             $(".adver").hover((function(){
  44.                 $(".arrowRight").show();
  45.                 $(".arrowLeft").show();
  46.             }),function(){
  47.                 $(".arrowRight").hide();
  48.                 $(".arrowLeft").hide();
  49.             })
  50.         })
  51.     </script>
  52. </head>
  53. <body>
  54. <div class="adver">
  55.     <ul>
  56.         <li>1</li>
  57.         <li>2</li>
  58.         <li>3</li>
  59.         <li>4</li>
  60.         <li>5</li>
  61.         <li>6</li>
  62.     </ul>
  63.     <div class="arrowLeft"></div><div class="arrowRight"></div>
  64. </div>
  65. </body>
  66. </html>

html+js

style.css

jQuery - 广告图片轮播切换的更多相关文章

  1. 基于jquery带时间轴的图片轮播切换代码

    基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="decoroll2 ...

  2. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  3. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  4. jQuery.YesShow - 图片轮播插件（带图片放大功能）

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  5. （转）jquery实现图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  7. 基于jquery的图片轮播 （IE8以上）

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  8. jQuery实现图片轮播

    之前有碰到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号,效果如下: 先看一看html代码,以及对应的css代码: < ...

  9. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

随机推荐

  1. 【转】Java 集合系列12之 TreeMap详细介绍(源码解析)和使用示例

    概要 这一章,我们对TreeMap进行学习.我们先对TreeMap有个整体认识,然后再学习它的源码,最后再通过实例来学会使用TreeMap.内容包括:第1部分 TreeMap介绍第2部分 TreeMa ...

  2. hdu2639，第K优决策

    在dp问题中如果遇到问题,没有什么是加一维度不能解决的,如果不能,再加一维度. #include<iostream> #include<cstring> #include< ...

  3. 几种fullpage用法及demo

    jQuery全屏滚动插件fullPage.js https://github.com/alvarotrigo/fullPage.js http://www.dowebok.com/77.html 全屏 ...

  4. Nginx+nagios安装配置

    Nginx+nagios安装配置 [root@Nagios ~]# vi /etc/nginx/nginx.conf server { listen ; server_name localhost; ...

  5. day07-列表类型/元组类型/字典类型/集合类型内置方法

    目录 列表类型内置方法 元组类型内置方法 字典类型内置方法 集合类型内置方法 列表类型内置方法 用来存多个元素,[]内用逗号隔开任意数据类型的元素 1. list()强制类型转换 print(list ...

  6. Ajax无刷新显示

    前台页面 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1. ...

  7. CAD动态绘制多段线（com接口）

    主要用到函数说明: _DMxDrawX::DrawLine 绘制一个直线.详细说明如下: 参数 说明 DOUBLE dX1 直线的开始点x坐标 DOUBLE dY1 直线的开始点y坐标 DOUBLE ...

  8. todey

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 框架集fromset ...

  9. DP——最长上升子序列（LIS）

    DP——最长上升子序列(LIS) 基本定义: 一个序列中最长的单调递增的子序列,字符子序列指的是字符串中不一定连续但先后顺序一致的n个字符,即可以去掉字符串中的部分字符,但不可改变其前后顺序. LIS ...

  10. Dinic当前弧优化 模板及教程

    在阅读本文前,建议先自学最大流的Ek算法. 引入 Ek的核心是执行bfs,一旦找到增广路就停下来进行增广.换言之,执行一遍BFS执行一遍DFS,这使得效率大大降低.于是我们可以考虑优化. 核心思路 在 ...