【源代码】

　　链接：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. <转>jmeter（十四）HTTP请求之content-type

    本博客转载自:http://www.cnblogs.com/dinghanhua/p/5646435.html 个人感觉不错,对jmeter最常用的取样器http请求需要用到的信息头管理器做了很好的解 ...

  2. 一、java三大特性--封装

    封装字面意思即包装.专业点来说就是数据隐藏,是指利用抽象数据将数据和基于数据的操作封装起来,使其构成一个不可分割的独立实体,数据被保护在抽象数据类型的内部,尽可能的隐藏细节,只保留一些对外的接口和外部 ...

  3. Mybatis自动生成实体类

    Maven自动生成实体类需要的jar包 一.pom.xml中 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns ...

  4. odoo中的ORM操作

    ORM方法简介 OpenERP的关键组件, ORM是一个完整的对象关系映射层,是开发人员不必编写基本的SQL管道. 业务对象被声明继承字models.Models的python类. 这让业务对象在OR ...

  5. Luogu2164 SHOI2007 交通网络 期望、BFS、拓扑排序

    传送门 题目还算不难吧 首先我们枚举点$i$,将其他所有点到这个点的最短路求出来 然后我们在这一次建出的最短路$DAG$的反图上进行拓扑排序.假设我们算到了点$j$,点$j$的人流量为$t_j$,点$ ...

  6. 基于HTML5 Canvas 实现地铁站监控

    伴随国内经济的高速发展,人们对安全的要求越来越高.为了防止下列情况的发生,您需要考虑安装安防系统: 提供证据与线索:很多工厂银行发生偷盗或者事故相关机关可以根据录像信息侦破案件,这个是非常重要的一个线 ...

  7. 浅谈移动端设备标识码：DeviceID、IMEI、IDFA、UDID和UUID

    ---恢复内容开始--- 转:https://www.jianshu.com/p/38f4d1a4763b [心路历程] 最近刚好在思考工作中统计数据所用的标识码产生的数据误差到底有多大,借此机会几番 ...

  8. libc.so.6: version 'GLIBC_2.14' not found报错提示的解决方案

    线上一台服务器在执行leveldb程序的时候,报错:"libc.so.6: version `GLIBC_2.14' not found". 排查原因及解决方法如下: 1)产生原因 ...

  9. Jumpserver双机高可用环境部署笔记

    之前在IDC部署了Jumpserver堡垒机环境,作为登陆线上服务器的统一入口.后面运行一段时间后,发现Jumpserver服务器的CPU负载使用率高达80%以上,主要是python程序对CPU的消耗 ...

  10. 【实践报告】Linux实践四

    Linux内核分析 实践四——ELF文件格式分析 一.概述 1.ELF全称Executable and Linkable Format,可执行连接格式,ELF格式的文件用于存储Linux程序.ELF文 ...