【源代码】

　　链接：https://pan.baidu.com/s/1XpZ66D9fmSwWX3pCnGBqjA 密码：w104

【整体构思】

　　　这个轮播图使用的是jQuery,所以Js的整体代量比较少.

　　　轮播图,其实思路可以很多

　　　　第一种:

　　　　　　　　通过修改每一张图片的透明度，让其每隔一段时间将其中的某一张图片透明度设为 1，而其他的设为0，从而实现图频轮流播放的效果。首先让一组图片绝对定位，并使其重叠，通过函数切换控制图片的透明度和定时器来触发该函数，改变不同图片的透明度。

　　　　第二种:

　　　　　　　　通过修改每一张图片的display，让其每隔一段时间将其中的某一张图片为block，而其他的设为none，从而实现图频轮流播放的效果。首先让一组图片绝对定位，并使其重叠，通过函数切换控制图片的display和定时器来触发该函数，改变不同图片的display样式。

　　　　更多的思路,留给你们展示~

HTML代码

<!--

*

*

* @Author: wyy

* @Date:   2018-08-20 18:20:13

* @Email:  2752154874@qq.com

* @Last Modified by:   wyy

* @Last Modified time: 2018-08-21 20:06:51

*

*

-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>轮播图</title>

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

    <script src="js/jquery-1.7.2.min.js"></script>

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

</head>

<body>

    <div class="banner">

        <!-- 轮播图 -->

        <ul class="bg">

            <li class="current"><a href="#"><img src="./img/banner.jpg" alt="banner" width="1226" height="460"></a></li>

            <li><a href="#"><img src="./img/banner2.jpg" alt="banner" width="1226" height="460"></a></li>

            <li><a href="#"><img src="./img/banner3.jpg" alt="banner" width="1226" height="460"></a></li>

            <li><a href="#"><img src="./img/banner4.jpg" alt="banner" width="1226" height="460"></a></li>

            <li><a href="#"><img src="./img/banner5.jpg" alt="banner" width="1226" height="460"></a></li>

            <li><a href="#"><img src="./img/banner6.jpg" alt="banner" width="1226" height="460"></a></li>

        </ul>

        <!-- 左右箭头 -->

        <div class="left"></div>

        <div class="right"></div>

        <!-- 小圆点 -->

        <div class="list">

            <ul>

                <li id="bg_1" class="list-btn current"></li>

                <li id="bg_2" class="list-btn"></li>

                <li id="bg_3" class="list-btn"></li>

                <li id="bg_4" class="list-btn"></li>

                <li id="bg_5" class="list-btn"></li>

                <li id="bg_6" class="list-btn"></li>

            </ul>

        </div>

    </div>

</body>

</html>

　　

CSS代码

/*

* @Author: wyy

* @Date:   2018-08-20 18:26:46

* @Email:  2752154874@qq.com

* @Last Modified by:   wyy

* @Last Modified time: 2018-08-21 20:30:32

*/

*{

    margin:;

    padding:;

}

li {

    list-style: none;

}

a {

    text-decoration: none;

}

.banner {

    width: 1226px;

    height: 460px;

    margin: 0 auto;

    position: relative;

}

a {

    color: #fff;

}

a:hover {

    color: #FFAA07FF;

}

a:hover .second {

    display: block;

}

.bg li{

    list-style: none;

    float: left;

    display: none;

    position: absolute;

}

.bg li.current{

    display: block;

}

.left {

    width: 40px;

    height: 70px;

    background: url("../img/icon-slides.png") 83px 0px;

    position: absolute;

    top: 42%;

}

.left:hover {

    background-position: 0px 0px;

}

.right {

    width: 40px;

    height: 70px;

    background: url("../img/icon-slides.png") 40px 0px;

    position: absolute;

    right: 0px;

    top: 42%;

}

.right:hover {

    background-position: -43px 0px;

}

.list {

    width: 145px;

    height: 20px;

    position: absolute;

    right: 30px;

    bottom: 15px;

}

.list-btn {

    width: 12px;

    height: 12px;

    list-style: none;

    float: left;

    background: lightgrey;

    margin-left: 6px;

    border-radius:6px;

    cousor:pointer;

}

.list ul .current{

    background: #f88535;

}

JS代码

/*

 * @Author: wyy

 * @Date:   2018-08-20 18:40:26

 * @Email:  2752154874@qq.com

 * @Last Modified by:   wyy

 * @Last Modified time: 2018-08-21 20:48:06

 */

// 全局变量

var index = 0;

$(function() {

    // 定时器

    (function() {

        setInterval(function() {

            // 自动换图代码

            changePic();

            // 改变index值

            index++;

            if (index == 5) {

                index = 0;

            }

        }, 1000)

    })();

    // 找到所有的图片

    var pics = $(".bg li");

    // 找到所有的小圆点

    var lis = $(".list li");

    // 提取公共的换图方法

    function changePic() {

        // 控制li的class实现换图

        pics.eq(index).addClass("current").siblings().removeClass("current"); // 给当前的元素添加class并移除兄弟元素的class

        // 控制小圆点颜色变化

        lis.eq(index).addClass("current").siblings().removeClass("current");

    }

    // 点击小圆点换图

    lis.click(function() {

        // 改变index的值

        index = $(this).index(); //this代表当前每一个li元素

        // F12查看日志,查看索引是否正确

        // console.log(index);

        //调用函数

        changePic();

    })

    // 点击左右箭头换图

    $(".left").click(function() {

        // 点击左侧箭头

        index--;

        if (index == -1) {

            index = 5;

        }

        changePic();

    })

    $(".right").click(function() {

        // 点击右侧箭头

        index++;

        if (index == 6) {

            index = 0;

        }

        changePic();

    })

})

　　

jQuery之制作简单的轮播图效果的更多相关文章

  1. jquery.flexslider-min.js实现banner轮播图效果

    实现方法 引用jQuery和flexslider.js到你的页面 <script type="text/javascript" src="js/jquery-1.7 ...

  2. jquery特效（4）—轮播图②（定时自动轮播）

    周末出去逛完街,就回公司好好地研究代码了,也算是把定时自动轮播程序写出来了,特意说明一下,这次的轮播图是在昨天随笔中jquery特效(3)—轮播图①(手动点击轮播)的基础上写出来的,也就是本次随笔展示 ...

  3. 高仿阴阳师官网轮播图效果的jQuery插件

    代码地址如下:http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开 ...

  4. jquery特效（5）—轮播图③（鼠标悬浮停止轮播）

    今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...

  5. JS框架_(Bootstrap.js)实现简单的轮播图

    Bootstrap框架中 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式 轮播图效果: <!DOCTYPE html> <html> <head&g ...

  6. jQuey实现轮播图效果

    再平常的浏览器页面,轮播图都是必不可缺少的一个板块,在这总结了一下轮播图基本的一些样式 首先介绍一下,本文实现的轮播图的基本效果: 1. 3s自动切换图片,图片切换时提示点跟随切换 2. 鼠标划到图片 ...

  7. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  8. 小程序实践（二）：swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

  9. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

随机推荐

  1. MySQL（十一）视图及存储过程

    一.视图 视图是虚拟的表,它只包含使用时动态检索数据的查询. 1.使用视图的好处 ①重用SQL语句: ②简化复杂的SQL操作(可以方便的重用它而不必知道它的基本查询细节): ③使用表的组成部分而不是整 ...

  2. linux调度器源码分析 - 运行(四)

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 引言 之前的文章已经将调度器的数据结构.初始化.加入进程都进行了分析,这篇文章将主要说明调度器是如何在程序稳定运 ...

  3. c#中的多线程异常 （转载）

    1.对于Thread操作的异常处理 public static void Main() { try { Thread th = new Thread(DoWork); th.Start(); } ca ...

  4. EF 事务(非分布式事务)

    在EF 中怎么使用事务? 这个问题纠结了我好久,直到有人跟我一起讨论,我和同事一起讨论查资料. 查的好多资料都是使用 TransactionScope,用 TransactionScope 可处理分布 ...

  5. MVC4程序运行报错

    近期了解MVC4的时候弄了一个简单的小工程,使用Entity Framework作为Model,F5启动调试运行的时候没有问题,但是发布到IIS之后访问就报错 错误信息如下: The Entity F ...

  6. 校内模拟赛 SovietPower Play With Amstar

    SovietPower Play With Amstar 题意: 一棵二叉树,每次询问一条路径上的路径和,初始每个点有一个权值1,询问后权值变为0.$n \leq 10^7,m\leq10^6$ 分析 ...

  7. C#一些常用的图片操作方法：生成文字图片 合并图片等

    生成文字图片: /// <summary> /// 生成文字图片 /// </summary> /// <param name="text">& ...

  8. elaticsear no [query] registered for [filtered] 错误

    1.问题描述 执行语句: GET /megacorp/employee/_search { "query" : { "filtered" : { "f ...

  9. sudo 与输出重定向

    本文介绍如何使用 sudo 将输出重定向到当前用户没有权限的文件.注意:本文中 demo 的演示环境为 ubuntu 18.04. Permission denied 问题 如果当前用户没有某个文件的 ...

  10. bootmgr is conmpressed联想Z485

    昨天清理磁盘空间的时候,手贱把驱动器给压缩了.再开机的时候就遇到了bootmgr is conmpressed. 我把解决办法发布到百度经验上了 http://jingyan.baidu.com/ar ...