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. shell直接退出后 后台进程关闭的原因和对处

    在linux上进行测试时发现启动后台进程后,如果使用exit退出登录shell,shell退出后后台进程还是能够正常运行,但如果直接关闭登陆的窗口(如直接关掉xshell),那后台进程就会一起终了.都 ...

  2. multi-mechanize安装实践

    关于multi-mechanize的详细介绍参见如下链接,是其官网 http://testutils.org/multi-mechanize/setup.html multi-mechanize是一款 ...

  3. 转：c语言学习笔记 二进制和十进制的互相转化

    http://www.cnblogs.com/xkfz007/articles/2590472.html

  4. 如果客户端禁用了cookie，如何实现session

    虽然客户端禁用了cookie,那么当访问某一个php文件时,php会先查找php.ini,如果session.use_trans_sid=1/session.use_only_cookie=0,php ...

  5. asp.net mvc3.0安装失败之终极解决方案

    安装失败截图 原因分析 因为vs10先安装了sp1补丁,然后安装的mvc3.0,某些文件被sp1补丁更改,导致“VS10-KB2483190-x86.exe”安装不了,造成安装失败. 解决方案 方法1 ...

  6. bit byte的关系

    字 word 字节 byte 位 bit 字长是指字的长度 1字=2字节(1 word = 2 byte) 1字节=8位(1 byte = 8bit)  一个字的字长为2个字节=2*8=16 一个字节 ...

  7. HTML5游戏开发 PDF扫描版​

    很多从事Web前端开发的人对HTML总有些不满,比如需要手动检查和设计很多格式代码,不仅容易出错,而且存在大量重复.好在HTML5让我们看到了曙光.作为下一代Web开发标准,HTML5成为主流的日子已 ...

  8. C#单例---饿汉式和懒汉式

    单例模式: 步骤: 1.定义静态私有对象 2.构造函数私有化 3.定义一个静态的,返回值为该类型的方法,一般以Getinstance/getInit为方法名称 单例模式有懒汉和饿汉,最好使用饿汉 1. ...

  9. 使用metasploit进行栈溢出攻击-3

    有了shellcode,就可以进行攻击了,但是要有漏洞才行,真实世界中的漏洞很复杂,并且很难发现,因此我专门做一个漏洞来进行攻击. 具体来说就是做一个简单的tcp server,里面包含明显的栈溢出漏 ...

  10. centoOS下安装python3 和 pip: command not found

    在更新python3的时候会自动安装pip3,但是安装完成后,pip -V发现出错:command not found,找了好久,发现在建立软连接的时候路径写错了. 总结一下安装python3和发现p ...