【源代码】

　　链接：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. 新页面,简单的tree视图写法

    .xml文件 <?xml version="1.0"?><openerp> <data> <!--Tree view--> < ...

  2. 1.RapidIO协议概述

    转自https://www.cnblogs.com/liujinggang/p/9925859.html 一.RapidIO背景介绍 RapidIO是由Motorola和Mercury等公司率先倡导的 ...

  3. ant+Jacoco 统计tomcat远程部署后项目接口自动化测试或者功能测试代码覆盖率

    1.安装ant 环境,https://ant.apache.org/bindownload.cgi 2.下载jacoco包  https://www.eclemma.org/jacoco/ ,解压后, ...

  4. MongoDB日常运维操作命令小结

    总所周知,MongoDB是一个NoSQL非数据库系统,即一个数据库可以包含多个集合(Collection),每个集合对应于关系数据库中的表:而每个集合中可以存储一组由列标识的记录,列是可以自由定义的, ...

  5. D. Boxes Packing

    链接 [http://codeforces.com/contest/1066/problem/D] 题意 题目大意 n个物品m个篮子每个篮子容量为k 每个物品重量为a[i] 问能装多少物品 这个人是强 ...

  6. Linux实验四报告

    张文俊 + 原创作品转载请注明出处+ <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.学习内容 系统 ...

  7. 《Linux内核分析》期终总结

    作者:杨舒雯,原创作品转载请注明出处,<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 目录: 1.通过简 ...

  8. jQuery（六）

    $下常用方法 $().xxx:只能给jq对象用 $.xxx不仅可以给jq用也可以给原生js用,叫做工具方法 $.type() <script> $(function(){ var a= n ...

  9. XMLHttpRequest详解

    XMLHttpRequest详解: https://xhr.spec.whatwg.org/

  10. VC6到VC2010，项目迁移错误

    错误信息: error C2440: “static_cast”: cannot from “BOOL (__thiscall CSelectRect::* )(void)” to “BOOL (__ ...