<!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. android黑科技系列——自动注入代码工具icodetools

    一.前言 在前面已经介绍完了 自动给apk中注入日志代码工具icodetools原理了,在那里我们曾经说过其实离真正的可使用价值有点距离,本篇就对这个工具进行一些优化,让其真正意义上开始能工作量产.当 ...

  2. 图解TCP/IP笔记（1）——TCP/IP协议群

    转载请注明:https://www.cnblogs.com/igoslly/p/9167916.html TCP/IP制定  制定:IETF 记录:RFC - Request for comment ...

  3. 详谈java集合框架

    1.为什么使用集合框架 当我们并不知道程序运行时会需要多少对象,或者需要更复杂方式存储对象——可以使用Java集合框架 2.Java集合框架包含的内容 接口:(父类)Collection接口下包含Li ...

  4. 【技术累积】【点】【java】【26】@Value默认值

    @Value 该注解可以把配置文件中的值赋给属性 @Value("${shit.config}") private String shit; 要在xml文件中设置扫描包+place ...

  5. （转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）

    http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...

  6. Django工程

    一.Django工程创建 1.Django安装: pip3 install django 安装成功后,会在python的安装目录下“Scripts"中生成”django-admin.exe& ...

  7. 彻底搞定Android开发中软键盘的常见问题

    软键盘显示的原理 软件盘的本质是什么?软键盘其实是一个Dialog.        InputMethodService为我们的输入法创建了一个Dialog,并且将该Dialog的Window的某些参 ...

  8. Python 4 循环语句while

    while  [条件]:        条件这里满足布尔运算True则无限循环while里面代码. 固定条件的 基本的while循环, 如果if匹配那么 则执行打印登录成功,和break跳出整个循环, ...

  9. Entity Framework Connection String不保留密码的方法

    添加Entity Data Model的时候,到最后一步,有两个radio box: 如果选择include sensitive data,虽然很方便,但是在web.config或者app.confi ...

  10. sencha touch 2制作滑动DataView（无缝list）

    Ext.define('App.view.Sections', { extend: 'Ext.dataview.DataView', xtype: 'sectionslist', id: 'mainl ...