<!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. P1418 选点问题

    题目描述 给出n个点,m条边,每个点能控制与其相连的所有的边,要求选出一些点,使得这些点能控制所有的边,并且点数最少.同时,任意一条边不能被两个点控制 输入输出格式 输入格式: 第一行给出两个正整数n ...

  2. PHP第二阶段学习 一、php的基本语法

    php的基本语法 输出语句:a.  echo输出:可以输出多个字符串,逗号隔开 b.  print输出:只能输出一个字符串,返回true或false c.  print_r():可以把字符串和数字简单 ...

  3. JS——冒泡排序

    核心思想: 1.外层for循环控制比较的轮数 2.内层for循环控制每轮比较的次数 3.外层每进行一轮比较,内层就少一次比较,因为外层每进行一轮比较都会产生一个最大值 <script> v ...

  4. Coding iOS客户端应用源码

    Coding是国内的一家提供Git托管服务的产品,它们的客户端提供了项目和任务管理.消息和用户中心,以及一个类似论坛的功能,已经在App Store上线: https://itunes.apple.c ...

  5. linux启动时开启screen

    编辑/etc/rc.local 添加 su - ubuntu -c 'screen -dmS ss zserver -p /etc/config'

  6. HDU_2203_KMP入门

    亲和串 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  7. POJ-1655 Balancing Act（树的重心）

    Consider a tree T with N (1 <= N <= 20,000) nodes numbered 1...N. Deleting any node from the t ...

  8. 网际协议IP简述

    最近花了些时间重新回顾了谢希仁教授主编的<计算机网络>关于网络层的章节,这是一本高校教材,里面关于计算机网络的内容比较基础,并且讲的很细致,笔者针对网际协议IP地址部分觉得有必要进行阅读后 ...

  9. C++ API实现创建桌面快捷方式

    #include<windows.h> #include <string> #include <shellapi.h> #include <shlobj.h& ...

  10. Spring 注解注入的几种方式（转）

    平常的java开发中,程序员在某个类中需要依赖其它类的方法,则通常是new一个依赖类再调用类实例的方法,这种开发存在的问题是new的类实例不好统一管理,spring提出了依赖注入的思想,即依赖类不由程 ...