<!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. 淘宝ip地址库接口会导致TTFB时间变长，网站打开速度变慢

    前一段时间闲来无事发现别人的网站上有显示当前用户城市的功能,就自己也整了一个 这是淘宝ip地址库调用方法 然后问题就出现了,网站打开速度慢的要死 用F12发现是TTFB太慢,然后百度了,发现了问题的原 ...

  2. 编写高质量的js之恰当选用if和switch

    switch结构中存在很多限制,存在这些限制的主要目的是提高多重分支结构的执行效率.因此,如果能够使用switch结构,就不要选择if结构. 无论是使用if结构,还是使用switch结构,应该确保下面 ...

  3. Angular——流程控制指令

    基本介绍 (1)ng-repeat,类似于for循环,对数组进行遍历 (2)ng-switch on,ng-switch-when,类似于switch,case 基本使用 ng-repeat < ...

  4. java实现搜索附近地点或人的功能

    前言 当前大多数app都有查找附近的功能, 简单的有查找周围的运动场馆, 复杂的有滴滴, 摩拜查找周围的车辆. 本文主要阐述查找附近地点的一般实现. 方案比较 方案1 (性能还不错) 数据库直接存经纬 ...

  5. 安卓设置AttributeSet

    XmlPullParser parser = getResources().getXml(R.layout.textview);    AttributeSet attributes = Xml.as ...

  6. php第十五节课

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

  7. Getmemory问题

    题目一: [cpp] view plaincopy void GetMemory( char *p ) { p = ( ); } void Test( void ) { char *str = NUL ...

  8. SDOI2018退役记

    在NOIp2017中,我意识到自己啥也不会.如今SDOI2018快来了,自己还是啥也不会.高一两次考试注定以打两次酱油告终.还是记录一下,到NOIp之后如果还没有退役的话,那这个博客可能还会继续更新吧 ...

  9. flask之配置文件的加载和动态url的使用

    七行代码实现一个flask app from flask import Flask app = Flask(__name__) @app.route('/') def helloworld(): re ...

  10. golang实现高阶函数之map

    package main import "fmt" func iMap(num []int, f func(a int) int) []int{ var r []int for _ ...