<!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

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. [hihocoder][Offer收割]编程练习赛64

    公平划分 若条件满足,则所有数异或和为零,这时候随便分都可以,答案为2^n-2,否则答案为0 #pragma comment(linker, "/STACK:102400000,102400 ...

  2. linux 安装 mongo

    整个安装过程:下载安装包--> 解压,添加系统路径(是滴,不用安装解压即可) --> 创建数据目录 --> 启动mongod服务 --> 运行mongo 1.下载安装包 Mon ...

  3. .mm c++ oc 混编

    When you create a static library you don't link in the dependent libraries. As a result, when you re ...

  4. linux调试环境时常用的命令 及 常识

    1.查找文件或文件夹 所在的目录 sudo find / -name your_filename 示例: wangju@wangju-HP--G4:~$ sudo find / -name .jenk ...

  5. Unity如何播放带有alpha 通道的视频

    问题: 当使用Video Player播放带有alpha 通道的视频时带有黑色背景 解决方式: 使用文件格式为WEBM的视频,对视频文件进行的修改 在RawImage中,将New Render Tex ...

  6. H5及微信中唤起app的解决方案

    今天我们就来说说这个callapp-lib 我的接到的需求大概是这样的 如果检测到不是在app里面用webview打开的页面就会显示上面的立即打开按钮, 点击的话会判断是否在微信中, 如果在微信中打开 ...

  7. mysql在windows上安装

    一.在window上安装mysql MySQL是一个小巧玲珑但功能强大的数据库,目前十分流行.但是官网给出的安装包有两种格式,一个是msi格式,一个是zip格式的.很多人下了zip格式的解压发现没有s ...

  8. Linux - VMware和Centos安装

    目录 Linux - VMware和Centos安装 选择性 下载centos系统ISO镜像 安装虚拟机VMware虚拟机 1. 准备vmware软件 2. 解压软件包, 当前选择vm12 3. vm ...

  9. 【模板】非旋转Treap

    Treap,也叫做树堆,是指有一个随机附加域满足堆的性质的二叉搜索树. 如果一棵二叉搜索树插入节点的顺序是随机的,那我们得到的二叉搜索树在大多数情况下是平衡的,期望高度是log(n). 但有些情况下我 ...

  10. BZOJ 1601 USACO 2008 Oct. 灌水

    [Description] Farmer John已经决定把水灌到他的n(1<=n<=300)块农田,农田被数字1到n标记.把一块土地进行灌水有两种方法,从其他农田饮水,或者这块土地建造水 ...