【源代码】

　　链接：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. node-inspector调试工具

    1.  npm或者cnpm 安装node-inspector 命令:  cnpm install -g node-inspector     (说明: 全局安装) 2.  使用node-inspect ...

  2. Python不能用于大型项目？人们对Python的十大误解

    Python 类型系统的特点是拥有强大.灵活的类型操作. 维基百科上对此作出的阐述. 而存在一个不争而有趣的事实是, Python 是比Java更加强类型的. Java 对于原生类型和对象区分了类型系 ...

  3. LOJ2538 PKUWC2018 Slay the Spire DP

    传送门 不想放题面了,咕咕咕咕咕 这个期望明明是用来吓人的,其实要算的就是所有方案的最多伤害的和. 首先可以知道的是,能出强化牌就出强化牌(当然最后要留一张攻击牌出出去),且数字尽量大 所以说在强化牌 ...

  4. Linux下查找进程id并强制停止进程的脚本

    Linux下的tomcat的停止脚本shutdown.sh经常失败,造成tomcat进程没关闭.所以只能手动查找进程id,然后用kill命令来强制停止.每次都要这样查一下,然后再杀进程.感觉有点麻烦, ...

  5. odoo订餐系统之订单相关知识点理解

    1.对重载函数name_get的理解 第一,此函数位于Model基类中,返回值是一个list列表,列表中的每个值是如(key,value)形式的键值对,此处为(id,name). 第二,在自己的Mod ...

  6. 【Ｃ＋＋】std：：是什么？

    引例: #include<iostream> int main() { std::cout<<"我喜欢C++";//输出一句话 std::cout<& ...

  7. json模块 & pickle模块

    之前学习过用eval内置方法可以将一个字符串转成python对象,不过,eval方法是有局限性的,对于普通的数据类型,json.loads和eval都能用,但遇到特殊类型的时候,eval就不管用了,所 ...

  8. Python-复习-习题-13

    复习 dict: dic = {'name':'alex'}增:dic['age'] = 21 存在就覆盖dic.setdefault() 存在什么也不做,没有就增加 删除:pop()按照key删除, ...

  9. B. Views Matter

    链接 [http://codeforces.com/contest/1061/problem/B] 题意 问你最多去掉多少块使得从上和右看,投影图不变 分析 注意细节,尤其第一列 代码 #includ ...

  10. linux内核分析ELF文件分析实践报告