1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="css/index.css">
  7.     <script src="js/jquery-1.11.3.js"></script>
  8.     <script src="js/baner.js"></script>
  9. </head>
  10. <body>
  11.     <div class="main">
  12.         <a href=""><img src="img/baner-1.jpg" alt=""></a>
  13.         <a href=""><img src="img/baner-2.jpg" alt=""></a>
  14.         <a href=""><img src="img/baner-3.jpg" alt=""></a>
  15.         <a href=""><img src="img/baner-4.jpg" alt=""></a>
  16.         <ul>
  17.             <li>1</li>
  18.             <li>2</li>
  19.             <li>3</li>
  20.             <li>4</li>
  21.         </ul>
  22.     </div>
  23. </body>
  24. </html>
  1. /*************初始化************/
  2. *{margin:;padding:;border: none;list-style: none}
  3. /*********轮播左右居中*************/
  4. .main{
  5.     width: 1024px;
  6.     height: 320px;
  7.     margin: 0 auto;
  8.     position: relative;
  9. }
  10. .main a{
  11.     position: absolute;
  12. }
  13. .main a img{
  14.     width: 100%;
  15.     height: 320px;
  16.  
  17. }
  18. /***********左边小图标************/
  19. .main ul li.selected{
  20.     background: #f97157;
  21. }
  22. .main ul{
  23.     position: absolute;
  24.     z-index:;
  25.     top: 120px;
  26.     left: 20px;
  27. }
  28. .main ul li{
  29.     width: 20px;
  30.     height: 20px;
  31.     border-radius: 50%;
  32.     background: #909090;
  33.     cursor: pointer;
  34.     text-align: center;
  35. }
  1. /**
  2.  * Created by Administrator on 16-3-12.
  3.  */
  4. /***********定义全局变量和定时器*************/
  5. var t=null;
  6.  
  7. var n=0;/**动态变化**/
  8. var count;
  9. /************************/
  10. $(function(){
  11.     count=$(".main a").length;/*给动态变化的n备用*/
  12.     /**让不是轮播中的第一个隐藏**/
  13.     $(".main a:not(:first-child)").hide();
  14.     /*点击当前li当前li对应的图片显示出来*/
  15.     $(".main ul li").click(function(){
  16.         var index=$(this).text()-1;
  17.         n=index;
  18.         console.log(n);
  19.         /*****让当前显示的图片0.5S内渐隐，并匹配下一个渐显示*****/
  20.         $(".main a").filter(":visible").fadeOut(500).parent().children().eq(index).fadeIn(1000);
  21.         /*******聚焦，给当前li追加类，改变背景色*******/
  22.         $(this).addClass("selected");
  23.         /****同时移除当前li的所有兄弟的类名为selected，还原背景色*****/
  24.         $(this).siblings().removeClass("selected");
  25.     });
  26.     /***定义定时器3秒执行一次****/
  27.     t=setInterval("autoMove()",3000);
  28.     /****当鼠标进入时候定时器停止，移除时候定时器开启****/
  29.     $(".main").hover(function(){clearInterval(t)}, function(){t = setInterval("autoMove()", 3000);});
  30. });
  31. /***定义自动轮播函数****/
  32. function autoMove(){
  33.     if(n>=(count-1)){
  34.         n=0;
  35.     }else{
  36.      ++n;
  37.     }
  38.     /*****给li执行匹配的事件*****/
  39.     $(".main ul li").eq(n).trigger("click");
  40. }

Jquery实现的简单轮播效果的更多相关文章

  1. jquery 20行代码实现简单轮播效果

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 用jquery制作的简单轮播图

    我也是进入H5前端的小菜鸟一枚,最近才进入jquery的学习,所以打算对自己的学习进行记录. 今天分享的是一个简单的轮播图,这个轮播图的特效很简单,能够进行图片的轮播以及点击相应图片,图片能够跳转到相 ...

  3. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  4. jQuery实现轮播效果(一) - 基础

    前戏: XXXX年XX月XX日,经理交给我一个站点新闻资讯网页开发的活儿.我一个java程序猿,怎么完毕得了网页设计这样高端的活儿呢! 之前尽管有学过一点HTML.CSS的知识.可是在实际的使用中,把 ...

  5. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  6. JQuery实现图片轮播效果源码

    ======================整体结构======================== <div class="banner"> <ul class ...

  7. 调用MyFocus库，简单实现二十几种轮播效果

    一.首先点击这里下载myFocus库文件,标准文件库就行了,很小仅仅1.4M. myFocus库有以下的好处: a . 文件小巧却高效强大,能够实现二十几种轮播的效果. b . 极其简单的使用,只需要 ...

  8. viewPager+Handler+Timer简单实现广告轮播效果

    基本思想是在Avtivity中放一个ViewPager,然后通过监听去实现联动效果,代码理由详细的解释,我就不说了. MainActivity.java package com.example.adm ...

  9. Jquery实现左右轮播效果

    首先展示下静态布局h5代码,代码非常简单. <div id="slide"> <ul class="pic-list"> <li& ...

随机推荐

  1. ExtJs4之TreePanel

    Tree介绍 树形结构,是程序开发,不可缺少的组件之一.ExtJs中的树,功能强大美观实用.功能齐全,拖拉,排序,异步加载等等. 在ExtJs4中Tree和Grid具有相同的父类,因此Grid具有的特 ...

  2. dev c++ Boost库的安装

    dev c++ 的boost库的安装步骤 然后点击“check for updates”按钮 最后点击“Download selected”按钮,下载完成后安装.... 给dev添加boost库文件, ...

  3. [ASP.NET] 如果将缓存“滑动过期时间”设置为1秒会怎样？

    今天编写了一个采用ASP.NET Caching的组件,在为它编写Unit Test的过程中发现了一个有趣的问题,接下来我通过一个简单的实例说明这个问题.我们在一个控制台应用中编写了如下一段程序,这个 ...

  4. call,apply,bind

    一.call&apply call, apply都属于Function.prototype的方法,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法 ...

  5. C语言之通过冒泡排序浅谈编程思想

    写这篇博文的目的是想起到抛砖引玉的作用,还请大牛们留下一些先进的思想,让小菜学习一下.下面入正题. 复习C语言怎么能少的了冒泡呢,记得刚学C语言那会,感觉冒泡排序真的太复杂了,理解不大了,嗯!还是当时 ...

  6. 12个不可不知的Sublime Text应用技巧和诀窍

    本文为您提供Sublime Text编辑器的12个技巧和诀窍,深入挖掘这个看似简洁的代码编辑器,背后所隐藏的实现各种高级功能的无限可能. 1) 选择 以下是一些Sublime Text选择文本的快捷键 ...

  7. react-native 学习之TextInput组件篇

    /** * Sample React Native App * https://github.com/facebook/react-native */ 'use strict'; import Rea ...

  8. linux驱动开发之块设备学习笔记

    我的博客主要用来存放我的学习笔记,如有侵权,请与我练习,我会立刻删除.学习参考:http://www.cnblogs.com/yuanfang/archive/2010/12/24/1916231.h ...

  9. 为 Web 设计师准备的 20 款 CSS3 工具

    1.CSS3 Generator 2. Border Radius 3. CSS3 Maker 4. CSS3 Transforms 5. CSS3 Drop shadow generator 6. ...

  10. .NET 扩展方法 （二）

    上一篇随笔 .NET 扩展方法 (一) 已经对 扩展方法有了大致的介绍,这篇算是一个补充,让我们来看一下扩展方法的几个细节: 一.扩展方法具有继承性 当使用扩展方法扩展一个类型的时候,其也扩展了派生类 ...