<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="css/index.css">

    <script src="js/jquery-1.11.3.js"></script>

    <script src="js/baner.js"></script>

</head>

<body>

    <div class="main">

        <a href=""><img src="img/baner-1.jpg" alt=""></a>

        <a href=""><img src="img/baner-2.jpg" alt=""></a>

        <a href=""><img src="img/baner-3.jpg" alt=""></a>

        <a href=""><img src="img/baner-4.jpg" alt=""></a>

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

        </ul>

    </div>

</body>

</html>
/*************初始化************/

*{margin:;padding:;border: none;list-style: none}

/*********轮播左右居中*************/

.main{

    width: 1024px;

    height: 320px;

    margin: 0 auto;

    position: relative;

}

.main a{

    position: absolute;

}

.main a img{

    width: 100%;

    height: 320px;

}

/***********左边小图标************/

.main ul li.selected{

    background: #f97157;

}

.main ul{

    position: absolute;

    z-index:;

    top: 120px;

    left: 20px;

}

.main ul li{

    width: 20px;

    height: 20px;

    border-radius: 50%;

    background: #909090;

    cursor: pointer;

    text-align: center;

}
/**

 * Created by Administrator on 16-3-12.

 */

/***********定义全局变量和定时器*************/

var t=null;

var n=0;/**动态变化**/

var count;

/************************/

$(function(){

    count=$(".main a").length;/*给动态变化的n备用*/

    /**让不是轮播中的第一个隐藏**/

    $(".main a:not(:first-child)").hide();

    /*点击当前li当前li对应的图片显示出来*/

    $(".main ul li").click(function(){

        var index=$(this).text()-1;

        n=index;

        console.log(n);

        /*****让当前显示的图片0.5S内渐隐，并匹配下一个渐显示*****/

        $(".main a").filter(":visible").fadeOut(500).parent().children().eq(index).fadeIn(1000);

        /*******聚焦，给当前li追加类，改变背景色*******/

        $(this).addClass("selected");

        /****同时移除当前li的所有兄弟的类名为selected，还原背景色*****/

        $(this).siblings().removeClass("selected");

    });

    /***定义定时器3秒执行一次****/

    t=setInterval("autoMove()",3000);

    /****当鼠标进入时候定时器停止，移除时候定时器开启****/

    $(".main").hover(function(){clearInterval(t)}, function(){t = setInterval("autoMove()", 3000);});

});

/***定义自动轮播函数****/

function autoMove(){

    if(n>=(count-1)){

        n=0;

    }else{

     ++n;

    }

    /*****给li执行匹配的事件*****/

    $(".main ul li").eq(n).trigger("click");

}

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. Sql Server系列：数据类型转换函数

    T-SQL提供了两个显示转换的函数:CAST函数和CONVERT函数. 1. CAST函数 语法: CAST ( expression AS data_type [ ( length ) ] ) 示例 ...

  2. Python标准库13 循环器 (itertools)

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在循环对象和函数对象中,我们了解了循环器(iterator)的功能.循环器是对象的 ...

  3. Android微信分享图片大于32k进行压缩

    微信分享视频的时候,需要传一个图片数组,大小不能大于32k. 解决方案:使用Bitmap自带的compress方法解决了这个问题. 源码如下: <span style="font-si ...

  4. 关于SubSonic3.0插件使用实体进行更新操作时（执行T.Update()或T.Save()），某些列无法进行修改操作的问题处理

    SubSonic3.0插件在创建实体后,对实体进行赋值操作时,为了去除一些不必要更新的字段,减少更新的内容,会将更新内容与默认值进行比较,如果默认值与当前更新的内容相等时,则不提交更新本列,这主要是为 ...

  5. MySQL学习笔记之MySQL安装详解

    前言 虽然现在NoSQL发展迅速,但MySQL还是非常受欢迎的,成千上万的公司依旧采用LAMP OR LNMP的搭配来进行开发,因此MYSQL的学习还是有一定的必要. 安装环境:Windows 7,需 ...

  6. Google Chrome 应用商店上传扩展程序

    1. 进入 Google 开发者中心 网址: https://chrome.google.com/webstore/developer/dashboard?hl=zh-cn 2. 添加新项 上传后,出 ...

  7. MVC, MVP, MVVM比较以及区别(上)

    MVC, MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式.以前只是对它们有部分的了解,没有深入的研究过,对于一些里面的概念和区别也是一知半解.现在一边查资料,并结合自己的理解,来谈一下 ...

  8. 玩转Jquery，告别前端知道思路忘记知识点的痛苦

    本节内容: 本章主要讲解一下jquery,主要是工作中用的前端框架是datetables框架,然后datetables框架又是基于jqeury研发的,所以要想学一个东西,就必须要了解其底层,不然走路都 ...

  9. DatePickerDialog、AutoCompleteTextView

    DatePickerDialog选择日期,调用showDialog(int id)方法,会执行onCreateDialog方法: @Override protected Dialog onCreate ...

  10. [AngularJS] AngularJS系列(7) 进阶篇之promise

    目录 使用promise 补充说明 $q.all $q.when 在上节中,我们在http中使用了then 和 在ngResource中返回了一个'延迟对象'. 本节介绍一下angular中的prom ...