【源代码】

　　链接：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. C语言程序设计II—第六周教学

    第六周教学总结(1/4-7/4) 教学内容 本周的教学内容为:第八章 指针 8.1 密码开锁(知识点:指针和指针变量的概念),8.2 角色互换(知识点:指针作为函数的参数返回多个值) 重点.难点:指针 ...

  2. 网易云音乐 歌词制作软件 BesLyric （最新版本下载）

    导读 BesLyric , 一款专门制作 网易云音乐 LRC 滚动歌词的软件! 搜索.下载.制作 歌词更方便! 哈哈,喜欢网易云音乐,又愁于制作歌词的童鞋有福啦!Beslyric 为你排忧解难! 本文 ...

  3. linux中断源码分析 - 软中断(四)

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 在上一篇文章中,我们看到中断实际分为了两个部分,俗称就是一部分是硬中断,一部分是软中断.软中断是专门用于处理中断 ...

  4. 你想要的Python面试都在这里了【315+道题】

    写在前面 近日恰逢学生临近毕业,课程后期大家"期待+苦逼"的时刻莫过于每天早上内容回顾和面试题问答部分[临近毕业每天课前用40-60分钟对之前内容回顾.提问和补充,专挑班里不爱说话 ...

  5. java并发编程CountDownLatch

    /** * CountDownLatch用法 * CountDownLatch类位于java.util.concurrent包下,利用它可以实现类似计数器的功能.比如有一个任务A, * 它要等待其他4 ...

  6. CF954I Yet Another String Matching Problem 并查集、FFT

    传送门 题意:给出两个由小写$a$到$f$组成的字符串$S$和$T$($|S| \geq |T|$),给出变换$c1\,c2$表示将两个字符串中所有$c1$字符变为$c2$,求$S$的每一个长度为$T ...

  7. Luogu P2597 [ZJOI2012]灾难

    一道非常综合的好题然后就莫名其妙地知道了动态LCA的求法 果然是ZJOI的题目,只能说这思路服了 首先我们发现每次操作只会灭绝一种动物,然后我们想一下就知道如果有\(n(n>=2)\)个食物的动 ...

  8. zjoi2018 day1游记

    咕咕咕 upd:看见有人贴上zhihu的问题,那个我早就看到了... 谴责一番题主 @gzy_cjoier 阅读量马上700没想到吧 既然这么火我挂个广告吧 永别,OI 听说有人催更??

  9. OpenTracing:开放式分布式追踪规范

    前言 想实现一个简单的追踪系统似乎是容易的,需要必要的调用链id,时间戳等:想实现一款易用不侵入代码的追踪系统就很麻烦了,需要接触CLR和IL相关知识:即使你费劲心力做出了那些,如果性能不够好,也没有 ...

  10. GeForce Experience关闭自动更新

    GeForce Experience驱动更新很烦,而且有时更新后就打不开了,找到种方法关闭更新 1.安装并登陆 2.打开 C:\ProgramData\NVIDIA Corporation 3.进入D ...