1. 轮播图
    　　　　/*轮播图基本功能：
  2.              * 1图片切换
  3.              *         1.1图片在中间显示
  4.              *         1.2图片淡入淡出
  5.              * 2左右各有一个按钮
  6.              *         2.1点击左按钮，图片切换上一张
  7.              *         2.2点击右按钮，图片切换下一张
  8.              *         2.3鼠标滑过按钮，按钮颜色加深
  9.              * 3底部的导航点
  10.              *         3.1图片为第几张时，点在那第几张
  11.              *         3.2鼠标滑到第几个点，图片切换到第几张
  12.              * 4图片自动轮播
  13.              *         4.1默认自动下一张
  14.              *         4.2鼠标在图片范围时，停止切换
  15.              *         4.3鼠标离开图片范围，恢复自动切换
  16.              * 5鼠标放在图片范围时，变为小手样式
  17.              */
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
  7.         <style type="text/css">
  8.             /*容器*/
  9.             #content{
  10.                 padding: 0px;
  11.                 margin: 0px auto;
  12.                 width: 966px;
  13.                 height: 644px;
  14.                 position: relative;
  15.             }
  16.             /*容器中图片样式*/
  17.             #content img{
  18.                 width: 966px;
  19.                 height: 644px;
  20.                 position: absolute;
  21.             }
  22.             /*在光标图片上时,为小手状态*/
  23.             #content:hover{
  24.                 cursor: pointer;
  25.             }
  26.             /*图片隐藏*/
  27.             .imgshow{
  28.                 display: block;
  29.             }
  30.             /*图片显示*/
  31.             .imghide{
  32.                 display: none;
  33.             }
  34.             #left,#right{
  35.                 position: absolute;
  36.                 width: 25px;
  37.                 height: 50px;
  38.                 background-color: gray;
  39.                 color: white;
  40.                 line-height: 50px;
  41.                 text-align: center;
  42.                 font-size: 22px;
  43.                 border-radius:5px ;
  44.             }
  45.             #left{
  46.                 top: 297px;
  47.                 left: 0px;
  48.             }
  49.             #right{
  50.                 top:297px;
  51.                 margin-left: 940px;
  52.             }
  53.             #left:hover,#right:hover{
  54.                 opacity: 0.5;
  55.             }
  56.             #nav:hover{
  57.                 cursor: default;
  58.             }
  59.             #nav div{
  60.                 width: 20px;
  61.                 height: 20px;
  62.                 border-radius: 10px;
  63.                 margin-left: 10px;
  64.                 margin-top: 5px;
  65.                 float: left;
  66.             }
  67.             .divshow{
  68.                 background-color: red;
  69.             }
  70.             .divhide{
  71.                 background-color: lawngreen;
  72.             }
  73.             #nav div:hover{
  74.                 opacity: 0.5;
  75.             }
  76.             #nav{
  77.                 position: absolute;
  78.                 width: 200px;
  79.                 height: 30px;
  80.                 margin-top:590px ;
  81.                 margin-left: 25px;
  82.             }
  83.  
  84.         </style>
  85.     </head>
  86.     <body>
  87.         <!--存放图片、按钮、导航点-->
  88.         <div id="content"class="conClass">
  89.             <!--图片-->
  90.             <img src="data:image/美女 (1).jpg"class="imgshow"/>
  91.             <img src="data:image/美女 (2).jpg"class="imghide"/>
  92.             <img src="data:image/美女 (3).jpg"class="imghide"/>
  93.             <img src="data:image/美女 (4).jpg"class="imghide"/>
  94.             <img src="data:image/美女 (5).jpg"class="imghide"/>
  95.             <img src="data:image/美女 (6).jpg"class="imghide"/>
  96.             <div id="left">&lt;</div>
  97.             <div id="right">&gt;</div>
  98.             <div id="nav">
  99.                     <div class="divshow"></div>
  100.                     <div class="divhide"></div>
  101.                     <div class="divhide"></div>
  102.                     <div class="divhide"></div>
  103.                     <div class="divhide"></div>
  104.                     <div class="divhide"></div>
  105.             </div>
  106.         </div>
  107.         <script type="text/javascript">
  108.             /*轮播图基本功能：
  109.              * 1图片切换
  110.              *         1.1图片在中间显示
  111.              *         1.2图片淡入淡出
  112.              * 2左右各有一个按钮
  113.              *         2.1点击左按钮，图片切换上一张
  114.              *         2.2点击右按钮，图片切换下一张
  115.              *         2.3鼠标滑过按钮，按钮颜色加深
  116.              * 3底部的导航点
  117.              *         3.1图片为第几张时，点在那第几张
  118.              *         3.2鼠标滑到第几个点，图片切换到第几张
  119.              * 4图片自动轮播
  120.              *         4.1默认自动下一张
  121.              *         4.2鼠标在图片范围时，停止切换
  122.              *         4.3鼠标离开图片范围，恢复自动切换
  123.              * 5鼠标放在图片范围时，变为小手样式
  124.              */
  125.             /*实现思路
  126.              * 所有图片在同一位置
  127.              * 一张图片展示，其余图片隐藏
  128.              */
  129.             //创建一个变量来存放当前图片的位置(索引位置)
  130.             var showindex=0;
  131.             //定时器调用的方法
  132.             function timershow(){
  133.                     /*样式切换图片
  134.                     var index=$("img").index($(".imgshow"));
  135.                     //隐藏当前图片
  136.                     $("img").eq(index).removeClass("imgshow").addClass("imghide");
  137.                     if(index==5){
  138.                         index=-1
  139.                     }
  140.                     $("img").eq(index+1).removeClass("imghide").addClass("imgshow");
  141.                     */
  142.                     var imageindex=showindex;
  143.                     //点击按钮，下标向后移动
  144.                     showindex++;
  145.                     //切换到第一张图片，showindex改为0
  146.                     if(showindex==6){
  147.                         showindex=0
  148.                     }
  149.                     //返回当前图片的位置
  150.                     //console.log(imageindex);
  151.                     //上一张图片淡出
  152.                     $("img").eq(imageindex).fadeOut(1000);
  153.                     //当前图片淡出
  154.                     $("img").eq((imageindex+1)%6).fadeIn(1000);
  155.                     //上一个导航点样式修改为divhide
  156.                     $("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide");
  157.                     //当前导航点样式修改为divshow
  158.                     $("#nav div").eq((imageindex+1)%6).removeClass("divhide").addClass("divshow");
  159.             }
  160.  
  161.             $(function(){
  162.                 //自动调用方法
  163.                 var timer=setInterval(timershow,2000);
  164.                 //上一张图片
  165.                 $("#right").click(function(){
  166.                     /*样式切换图片
  167.                     var index=$("img").index($(".imgshow"));
  168.                     //隐藏当前图片
  169.                     $("img").eq(index).removeClass("imgshow").addClass("imghide");
  170.                     if(index==5){
  171.                         index=-1
  172.                     }
  173.                     $("img").eq(index+1).removeClass("imghide").addClass("imgshow");
  174.                     */
  175.                     var imageindex=showindex;
  176.                     //点击按钮，下标向后移动
  177.                     showindex++;
  178.                     //切换到第一张图片，showindex改为0
  179.                     if(showindex==6){
  180.                         showindex=0
  181.                     }
  182.                     //返回当前图片的位置
  183.                     console.log(imageindex);
  184.                     //上一张图片淡出
  185.                     $("img").eq(imageindex).fadeOut(1000);
  186.                     //当前图片淡出
  187.                     $("img").eq((imageindex+1)%6).fadeIn(1000);
  188.                     //上一个导航点样式修改为divhide
  189.                     $("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide");
  190.                     //当前导航点样式修改为divshow
  191.                     $("#nav div").eq((imageindex+1)%6).removeClass("divhide").addClass("divshow");
  192.                 });
  193.                 //下一张图片
  194.                 $("#left").click(function(){
  195.                     console.log("修改前："+showindex)
  196.                     var imageindex=showindex;
  197.                     //点击按钮，下标向后移动
  198.                     showindex--;
  199.                     //切换到最后一张图片，showindex变为5
  200.                     if(showindex==-1){
  201.                         showindex=5;
  202.                     }
  203.                     //上一张图片淡出
  204.                     $("img").eq(imageindex).fadeOut(1000);
  205.                     //当前图片淡出
  206.                     $("img").eq((imageindex-1)%6).fadeIn(1000);
  207.                     //上一个导航点样式修改为divhide
  208.                     $("#nav div").eq(imageindex).removeClass("divshow").addClass("divhide");
  209.                     //当前导航点样式修改为divshow
  210.                     $("#nav div").eq((imageindex-1)%6).removeClass("divhide").addClass("divshow");
  211.                 });
  212.                 //导航点
  213.                 $("#nav div").mouseover(function(){
  214.                     console.log("修改前"+showindex);//修改前的位置
  215.                     var divindex=$("#nav div").index($(this));//获取当前鼠标在哪一个点上
  216.                     //选定的为当前的自己则不产生动画效果
  217.                     if(divindex!=showindex)
  218.                     {
  219.                         //将以前的点的样式修改成divhide
  220.                         $("#nav div").eq(showindex).removeClass("divshow").addClass("divhide");
  221.                         //将现在的点的样式修改成div
  222.                         $("#nav div").eq(divindex).removeClass("divhide").addClass("divshow");
  223.                         //以前图片淡出
  224.                         $("img").eq(showindex).fadeOut(1000);
  225.                         //新图片淡入
  226.                         $("img").eq(divindex).fadeIn(1000);
  227.                         showindex=divindex;
  228.                         console.log("修改后"+divindex);//修改后的位置
  229.                     }
  230.                 });
  231.                 //鼠标在图片范围时停止切换(清除定时器)
  232.                 $("#content").mouseenter(function() {
  233.                     window.clearInterval(timer);
  234.                 }
  235.  
  236.                 );
  237.                 $("#content").mouseleave(function(){
  238.                     timer=window.setInterval(timershow,2000);
  239.                 });
  240.             });
  241.         </script>
  242.     </body>
  243. </html>

jquery 广告轮播图的更多相关文章

  1. iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  2. 用jQuery实现轮播图效果，js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  3. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  4. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  5. JQuery实现轮播图及其原理

    源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...

  6. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

  7. jquery优化轮播图2

    继续优化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  8. jquery改造轮播图1

    g改造轮播图1:https://www.cnblogs.com/huanghuali/p/8677338.html <!DOCTYPE html> <html lang=" ...

  9. JavaScripts广告轮播图以及定时弹出和定时隐藏广告

    轮播图: 函数绑定在body标签内 采用3张图,1.jpg   2.jpg  3.jpg  利用定时任务执行设置图片属性 src  利用for循环可以完成3秒一次 一替换. 定时弹出广告: 由于bod ...

随机推荐

  1. 让vim更加智能化

    从此,让我的vim更加的智能化,整整用了一个周日,基本是值得的: "新建.c\.cpp\.python\.sh等文件时,使用定义的函数SetTitle,自动插入文件头 func SetTit ...

  2. yum安装nginx添加upstream_check_module模块

    下载模块 upstream_check_module 查看yum安装nginx版本信息 # nginx -V nginx version: nginx/1.17.0 built by gcc 4.8. ...

  3. 微信小程序侧边栏滑动特效(左右滑动)

    侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一 先看效果: wxml: <!--page/one/i ...

  4. ASP.NET Routing Debugger

    How do you debug MVC 4 API routes? 解答1 RouteDebugger is good for figuring out which routes will/will ...

  5. LTDC/DMA2D——液晶显示

    1.显示器的基本参数 (1) 像素像素是组成图像的最基本单元要素,显示器的像素指它成像最小的点. (2) 分辨率一些嵌入式设备的显示器常常以“行像素值 x列像素值”表示屏幕的分辨率.如分辨率 800x ...

  6. [转][C#]dll 引用

    本文转自:https://zhidao.baidu.com/question/1176198151354174139.html 首先,对应关系: C++ C#===================== ...

  7. C# 读取文件内容

    读取文件内容有三种方式 全部读取到字符串变量中 一次读取一行 全部读取到字符串数组中,每个数组元素存储一行文本 全部读取到字符串变量 string text = System.IO.File.Read ...

  8. Android插件化（六）: OpenAtlasの改写aapt以防止资源ID冲突

    Android插件化(六): OpenAtlasの改写aapt以防止资源ID冲突 转 https://www.300168.com/yidong/show-2791.html   核心提示:引言And ...

  9. python代码-leetcode1 两数相加

    1.两个循环 class Solution: def twoSum(self, nums, target): n=len(nums) for i in range(n): for j in range ...

  10. java精确计算工具类

    java精确计算工具类 import java.math.BigDecimal; import java.math.RoundingMode; import java.math.BigDecimal; ...