<!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. [Windows Server 2012] Apache+PHP安全设置

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com ★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频. ★ 本节我们将带领大家:Win20 ...

  2. (转）Struts2访问Servlet的API及......

    http://blog.csdn.net/yerenyuan_pku/article/details/67315598 Struts2访问Servlet的API 前面已经对Struts2的流程已经执行 ...

  3. SSL协议提供的服务

    SSL协议提供的服务主要有: 1)认证用户和服务器,确保数据发送到正确的客户机和服务器: 2)加密数据以防止数据中途被窃取: 3)维护数据的完整性,确保数据在传输过程中不被改变.

  4. DateTimePicker 控件置空

    dtOrderDateFrom.Format = DateTimePickerFormat.Custom; dtOrderDateFrom.CustomFormat = " "; ...

  5. 宏基因组扩增子图表解读2散点图：组间整体差异分析(Beta多样性)

    散点图 数据点在直角坐标系平面上的分布图.在宏基因组领域,散点图常用于展示样品组间的Beta多样性,常用的分析方法有主成分分析(PCA),主坐标轴分析(PCoA/MDS)和限制条件的主坐标轴分析(CP ...

  6. css3的基础知识

    transfrom的应用: 1.旋转:transform: rotate(30deg): 2.阴影效果:box-shadow: 10px 10px 5px #888888: 3.鼠标移入放大:tran ...

  7. 【VIP视频网站项目三】项目框架搭建、项目路由配置、数据库表结构设计

    一.项目路由的设计 目前项目代码已经全部开源:项目地址:https://github.com/xiugangzhang/vip.github.io 视频网站前台页面路由设计 路由 请求方法 模板 作用 ...

  8. [JS]window.location获取url各项参数详解

    window.location方法后还还可以带href,search等参数,下面我们来看看获取url各项参数的办法. URL即:统一资源定位符 (Uniform Resource Locator, U ...

  9. JAVA经典题--死锁案例

    死锁原理: 两个线程相互等待对方释放同步监视器 例子程序: public class TestDeadLock implements Runnable { public int flag = 1; s ...

  10. 手写DAO框架（二）-开发前的最后准备

    -------前篇:手写DAO框架(一)-从“1”开始 --------- 前言:前篇主要介绍了写此框架的动机,把主要功能点大致介绍了一下.此篇文章主要介绍开发前最后的一些准备.主要包括一些基础知识点 ...