CSS+jQuery实现轮播

CSS jQuery 前端 

实现功能：

  • 自动轮播；
  • 鼠标放在上面停止轮播；
  • 鼠标放在上面显示左右切换的按钮；
  • 鼠标放在小圆圈上显示对应的图片；
轮播效果图

style.css

.outer{

    width: 790px;

    height: 340px;

    margin: 80px auto;

    position: relative;

}

.img li{

    position: absolute;

    list-style: none;

    top:0;

    left: 0;

}

.num{

    position: absolute;

    bottom: 18px;

    left: 270px;

    list-style: none;

}

.num li{

    display: inline-block;

    width: 18px;

    height: 18px;

    background-color: white;

    border-radius: 50%;

    text-align: center;

    line-height: 18px;

    margin-left: 4px;

}

.btn{

    position: absolute;

    top:50%;

    width: 30px;

    height: 60px;

    background-color: lightgray;

    color: white;

    text-align: center;

    line-height: 60px;

    font-size: 30px;

    opacity: 0.7;

    margin-top: -30px;

    display: none;

}

.left{

    left:0;

}

.right{

    right: 0;

}

.outer:hover .btn{

    display: block;

}

.num .active{

    background-color: red;

}

html文件：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script src="jquery-3.1.1.js"></script>

</head>

<body>

    <div class="outer">

        <ul class="img">

            <li><a href=""><img src="img/1.jpg" alt=""></a></li>

            <li><a href=""><img src="img/2.jpg" alt=""></a></li>

            <li><a href=""><img src="img/3.jpg" alt=""></a></li>

            <li><a href=""><img src="img/4.jpg" alt=""></a></li>

            <li><a href=""><img src="img/5.jpg" alt=""></a></li>

            <li><a href=""><img src="img/6.jpg" alt=""></a></li>

        </ul>

        <ul class="num">

            <!--<li class="active"></li>-->

            <!--<li></li>-->

            <!--<li></li>-->

            <!--<li></li>-->

            <!--<li></li>-->

            <!--<li></li>-->

        </ul>

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

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

    </div>

    <script>

        // 通过jQuery自动创建按钮

        var img_num = $(".img li").length;

        for (var i=0;i<img_num;i++){

            $(".num").append("<li></li>")

        }

        $(".num li:first").addClass("active");

        // 手动轮播

        $(".num li").mouseover(function () {

            var index = $(this).index();

            $(this).addClass("active").siblings().removeClass("active");

            $(".img li").eq(index).stop().fadeIn(500).siblings().stop().fadeOut(500);

        });

        //自动轮播

        var c = setInterval(GO_R,1500);

        var i = 0;

        function GO_R() {

            if(i == img_num-1){

                i = -1

            }

            i ++;

            $(".num li").eq(i).addClass("active").siblings().removeClass("active");

            $(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);

        }

        function GO_L() {

            if(i == 0){

                i = img_num-1;

            }

            i --;

            $(".num li").eq(i).addClass("active").siblings().removeClass("active");

            $(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);

        }

        $(".outer").hover(function () {

            clearInterval(c);

        }, function () {

            c = setInterval(GO_R, 1500);

        });

        // button

        $(".right").click(GO_R);

        $(".left").click(GO_L);

    </script>

</body>

</html>

以上代码基本实现了所要功能，但存在一个问题，就是当鼠标放在下方小圆圈的时候会显示对应图片，而鼠标移开后不是从当前图片开始轮播，反而是从上次轮播后的地方开始。
解决方法很简单，将全局变量i放在代码的最前端，代码当中的index变量换成变量i，此时应注意用于循环的i应该变成j。
以下为完整版本：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script src="jquery-3.1.1.js"></script>

</head>

<body>

    <div class="outer">

        <ul class="img">

            <li><a href=""><img src="img/1.jpg" alt=""></a></li>

            <li><a href=""><img src="img/2.jpg" alt=""></a></li>

            <li><a href=""><img src="img/3.jpg" alt=""></a></li>

            <li><a href=""><img src="img/4.jpg" alt=""></a></li>

            <li><a href=""><img src="img/5.jpg" alt=""></a></li>

            <li><a href=""><img src="img/6.jpg" alt=""></a></li>

        </ul>

        <ul class="num">

            <!--<li class="active"></li>-->

            <!--<li></li>-->

            <!--<li></li>-->

            <!--<li></li>-->

            <!--<li></li>-->

            <!--<li></li>-->

        </ul>

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

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

    </div>

    <script>

        var i = 0;

        // 通过jQuery自动创建按钮

        var img_num = $(".img li").length;

        for (var j=0;j<img_num;j++){

            $(".num").append("<li></li>")

        }

        $(".num li:first").addClass("active");

        // 手动轮播

        $(".num li").mouseover(function () {

            i = $(this).index();

            $(this).addClass("active").siblings().removeClass("active");

            $(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);

        });

        //自动轮播

        var c = setInterval(GO_R,1500);

        function GO_R() {

            if(i == img_num-1){

                i = -1

            }

            i ++;

            $(".num li").eq(i).addClass("active").siblings().removeClass("active");

            $(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);

        }

        function GO_L() {

            if(i == 0){

                i = img_num-1;

            }

            i --;

            $(".num li").eq(i).addClass("active").siblings().removeClass("active");

            $(".img li").eq(i).stop().fadeIn(500).siblings().stop().fadeOut(500);

        }

        $(".outer").hover(function () {

            clearInterval(c);

        }, function () {

            c = setInterval(GO_R, 1500);

        });

        // button

        $(".right").click(GO_R);

        $(".left").click(GO_L);

    </script>

</body>

</html>

CSS+jQuery实现轮播的更多相关文章

  1. css jquery 实现轮播效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  3. 纯CSS 多图片轮播

    今天做东西的时候,遇到一个问题关于图片轮播的问题,以前也接触过(百度 人家的demo改改..),再次遇到这个问题的时候,根据以前的印象找到了demo正信心满满的准备改一下嵌进去,发现 jquery.m ...

  4. Jquery 图片轮播实现原理总结

    Jquery 图片轮播实现原理总结 以前要做图片轮播效果的时候,总是在网上找一段jquery的复制粘贴进去,只索取不奉献,今个就把我对这个的实现原理讲解一下. 首先说下,我在网上找的例子全是用的UL ...

  5. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  6. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  7. Nivo Slider - 世界上最棒的 jQuery 图片轮播插件

    Nivo Slider 号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本.目前下载量已经突破 1,800,000 次!jQuery 独立版本的插件主要有如 ...

  8. jquery图片轮播插件slideBox

    效果预览: 源代码下载: jQuery图片轮播(焦点图)插件jquery.slideBox 特点:兼容IE6+,Chrome,Firefox,Opera,safari,可左右,可上下,可快可慢,可指定 ...

  9. 第九十三节，html5+css3移动手机端流体布局，基础CSS,头部设计,轮播设计,底部设计

    html5+css3移动手机端流体布局,基础CSS,头部设计,轮播设计,底部设计 基础CSS 首先将通用css属性写好 @charset "utf-8"; /*通用样式*/ /*去 ...

随机推荐

  1. python爬虫--常见错误

    1)socket.error: [Errno 10054] ython socket.error: [Errno 10054] 远程主机强迫关闭了一个现有的连接.因为对一个网站大量的使用urlopen ...

  2. eclipse 中文版 变成 英文版 方法

    找到目录运行命令 “eclipse.exe -nl en”

  3. Codeforces 56D Changing a String (DP)

    题意:你可以对字符串s进行3种操作: 1,在pos位置插入字符ch. 2,删除pos位置的字符. 3,替换pos位置的字符为ch. 问最少需要多少次操作可以把字符s变成字符s1? 思路: 设dp[i] ...

  4. SimpleFactoryPattern（23种设计模式之一）

    设计模式六大原则(1):单一职责原则 设计模式六大原则(2):里氏替换原则 设计模式六大原则(3):依赖倒置原则 设计模式六大原则(4):接口隔离原则 设计模式六大原则(5):迪米特法则 设计模式六大 ...

  5. 20、Basic Shell_for_while_grep_find

    转载:https://github.com/swcarpentry/DEPRECATED-boot-camps/blob/master/shell/shell_cheatsheet.md 1.For ...

  6. etl 获取列数据类型

    QueryInfo info = new QueryInfo(); info.CustomSQL = @" select column_name, data_type, data_preci ...

  7. 更新anaconda及所有包

    ################################## # 更新Anaconda conda update conda # 更新所有包 conda update --all ###### ...

  8. Ping命令的设计与实现

    ping命令的设计与实现 发表于 C++ Socket TCP/IP 2016-05-15 19:07 字数: 10796 阅读量: 528 ping 命令使用的相关 TCP/IP 协议 ping 命 ...

  9. 利用using和try/finally语句来清理资源

    使用非托管资源的类型必须实现IDisposable接口的Dispose()方法来精确的释放系统资源..Net环境的这一规则使得释放资源代码的职责 是类型的使用者,而不是类型或系统.因此,任何时候你在使 ...

  10. Web开发秘方（WEB DEVELOPMENT RECIPES）[47.5MB] PDF扫描版

    不借助插件怎样在移动设备上实现动画效果?怎样快速搭建HTML电子邮箱?怎样制作跨PC和移动设备显示的应用界面?怎样利用最新的JavaScript框架提高应用的响应速度?怎样有效利用CoffeeScri ...