我在两个月以前没有接触过html,css,jquery,javascript。今天我却在这里分享一篇技术贴，可能在技术大牛面前我的文章漏洞百出，也请斧正。

可以看出来，无论是div+css布局还是jquery其实真的很简单，只要不停的练习就会有很大进步。每天150行代码，会帮助我们走的更远。对于编程对于脚本语言，我们这样的学生娃没有和比人一样初中，高中就开始研究，要想走在时代的前沿需要怎样的努力和毅力，是我们一类人需要思考的方向。

下面解释下焦点图，焦点图使用范围非常广，banner和animation很容易抓住用户的眼球，所以做好这个也就是一个网页一个app的关键之一。

焦点图实现的方式很多种，可以是css的jjq的甚至其他框架的，jq最近很火这里以此举例。

下面进一段html代码：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>横向滑动的悬停焦点图全代码</title>

<link href="css/slidepic8.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="jq/jquery-3.1.1.min.js"></script>

</head>

<body>

<div class="slideBox">

    <ul>

    <li><img src="data:image/Lslide3.jpg" alt="" width="300" height="480"/></li>

    <li><img src="data:image/Lslide4.jpg" alt="" width="300" height="480"/></li>

    <li><img src="data:image/Lslide5.jpg" alt="" width="300" height="480"/></li>

    <li><img src="data:image/Lslide6.jpg" alt="" width="300" height="480"/></li>

    <li><img src="data:image/Lslide2.jpg" alt="" width="300" height="480"/></li>

    <li><img src="data:image/Lslide1.jpg" alt="" width="300" height="480"/></li>

    </ul>

    <div class="spanBox">

    <span class="active">q</span>

    <span>a</span>

    <span>z</span>

    <span>w</span>

    <span>s</span>

    <span>x</span>

    </div>

    <div class="prev"><img src="data:image/left_arrow.jpg" width="15" height="50" alt=""/></div>

    <div class="next"><img src="data:image/right_arrow.jpg" width="15" height="50" alt=""/></div>

</div>

</body>

</html>

上面是html代码，代码的结构比较简单，这里解释一下，ul标签是要左右移动的，所以怎么设置position属性？，然后span标签是提供索引和下标控制符，绑定动画的。prev和next类名的div标签是提供左右按钮，电机可以实现左右滑动。

下面附上css代码：

@charset "utf-8";

/* CSS Document */

*{

    padding:0px;

    border:0px;

    margin:0px;

}

ul {

    list-style:none;

}

.slideBox {

    margin:50px auto;

    width:300px;

    height:480px;

    box-shadow:2px 2px 10px #C38DD4;

    border-radius:20px;

    position:relative;

    overflow:hidden;

}

.slideBox ul {

    position:relative;

    width:2000px;}

.slideBox ul li {

    float:left;

    width:300px;

    height:480px;

    position:relative;

}

.spanBox {

    position:absolute;

    width:300px;

    height:20px;

    bottom:10px;

    left:80px;

}

.spanBox span {

    width:18px;

    height:18px;

    margin-left:5px;

    background-color:rgba(201,178,207,1.00);

    float:left;

    line-height:16px;

    text-align:center;

    text-shadow:2px 2px 2px #C5EBF0;

    font-family:cabin-sketch;

    font-size:15px;

}

.slideBox .spanBox .active {

    background-color:rgba(155,83,244,0.79);

    border:solid 1px #BEEBEC;

    border-radius:4px;

}

.prev {

    position:absolute;

    left:0px;

    top:320px;

    float:left;

    border-left:solid 1px rgba(251,245,246,1.00);

    opacity:0.5;

}

.next {

    width:15px;

    height:50px;

    position:absolute;

    right:0px;

    top:320px;

    float:right;

    border-right:solid 1px rgba(245,237,237,1.00);

    opacity:0.5

}

我是链接的外部css文件，然后请注意一下各种属性和值。电脑端的话，html是相当于文本结构常说的dom，解码的时候配合css属性进行渲染，具体的属性请大家自己测试，在四种常用的浏览器测试一下css属性，我这里就偷懒了没有加上-webkit-，-moz-等等，大家如果需要用可以hack。

下面附上jquery代码:

<script type="text/javascript">

$(document).ready(function(){

     var slideBox = $(".slideBox");

     var ul = slideBox.find("ul");

     var oneWidth = slideBox.find("ul li").eq(0).width();

     var number = slideBox.find(".spanBox span");            //注意分号 和逗号的用法

     var timer = null;

     var sw = 0;

     //每个span绑定click事件，完成切换颜色和动画，以及读取参数值

     number.on("click",function (){

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

     sw=$(this).index();

     ul.animate({

            "right":oneWidth*sw,    //ul标签的动画为向左移动；

               });

     });

     //左右按钮的控制效果

     $(".next").stop(true,true).click(function (){

         sw++;

         if(sw==number.length){sw=0};

         number.eq(sw).trigger("click");

         });

    $(".prev").stop(true,true).click(function (){

        sw--;

        if(sw==number.length){sw=0};

        number.eq(sw).trigger("click");

        });

    //定时器的使用，自动开始

    timer = setInterval(function (){

        sw++;

        if(sw==number.length){sw=0};

        number.eq(sw).trigger("click");

        },2000);

    //hover事件完成悬停和，左右图标的动画效果

    slideBox.hover(function(){

        $(".next,.prev").animate({

            "opacity":1,

            },200);

        clearInterval(timer);

        },function(){

            $(".next,.prev").animate({

                "opacity":0.5,

                },500);

        timer = setInterval(function (){

        sw++;

        if(sw==number.length){sw=0};

        number.eq(sw).trigger("click");

        },2000);

            })

})

</script>

在代码中也分为几个部分，让大家清晰明了。其实很简单就是几个参数，几个函数，整个过程就click事件，hover时间，animate方法，setInterval（）就可以轻松搞定。在网上看到很多朋友也有分享，后面我会附上很多的html5的新功能，还有w3c标准以及css3的各种新鲜玩意。大家一起交流学习，共同进步。

我是自学er,也没有啥子技术，只是爱好，兴趣使然，可以一步一步的走进去，发现web前端的更深层的东西，每天都在瞻仰大山，攀爬中，早晚有一天会登上高山，然后创造高山。

jquery轮播图详解，40行代码即可简单解决。的更多相关文章

  1. vue项目一个页面使用多个轮播图详解

    1.html代码: <div v-for="(item,index) in arrDataList.Floor"> // 根据后台数据循环渲染多个轮播图组件 <d ...

  2. 《第31天：JQuery - 轮播图》

    源码下载地址:链接:https://pan.baidu.com/s/16K9I... 提取码:0ua2 写这篇文章,当做是对自已这一天的一个总结.写轮播图要准备的东西:三张尺寸大小一样的图片.分为三个 ...

  3. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  4. jQuery轮播图--不使用插件

    说明:引入jquery.min.js    将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...

  5. jQuery轮播图（手动点击轮播）

    下面来看看最终做的手动点击轮播效果: 一.原理说明 (1)首先是轮播图的架构,我采用了一个最外边的大div包住两个小div,一个小div里面放四张图片,另一个小div里面放四个数字按钮 (2)对最外边 ...

  6. jQuery轮播图（二）利用构造函数和原型创建对象以实现继承

    本文是在我开始学习JavaScript继承时,对原型继承的一些理解和运用.文中所述的继承方式均是使用js特有的原型链方式,实际上有了ES6的类之后,实现继承的就变得十分简单了,所以这种写法现在也不在推 ...

  7. jQuery轮播图（一）轮播实现并封装

    利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...

  8. jquery 轮播图实例

    实现效果:1.图片每2秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击右下角的小球时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应的变化. 4.当图片发生轮播切换时 ...

  9. jquery 轮播图

    slider.js (function(){ /** parent //父容器 changeTime //每次间隔几秒切换下一条 leaveTime //鼠标从小图上离开过后几秒继续切换 index ...

随机推荐

  1. [整理]AngularJS移动端开发遇到的问题

    最近在开发一个移动WebAPP的小项目,因为之前一直使用AngularJS, 对于这个项目,废话不多说,拿过来就用上了. 开发过程是一路通畅和舒服的,但是,却忽略了一个非常重要的问题,移动2G环境下的 ...

  2. 我们是怎么管理QQ群的

    文章背景:腾讯平台上的qq群数以千万百万计,但99%的在吹水扯蛋,从早上的问好开始,到晚上的晚安,无一不浪费青春之时间,看之痛心,无力改变,只好自己建了一个,希望能以此来改变群内交流的氛围或环境. 以 ...

  3. 使用xib封装一个view的步骤

    1.新建一个xib文件描述一个view的内部结构(假设叫做SSTgCell.xib) 2.新建一个自定义的类 (自定义类需要继承自系统自带的view, 继承自哪个类,  取决于xib根对象的Class ...

  4. BLAST套件

    Blastn是将给定的核酸序列与核酸数据库中的序列进行比较: Blastp是使用蛋白质序列与蛋白质数据库中的序列进行比较,可以寻找较远的关系: Blastx将给定的核酸序列按照六种阅读框架将其翻译成蛋 ...

  5. D3.js学习（三）

    上一节中,我们已经画出了图表,并且给图表添加了坐标轴的标签和标题,在这一节中,我们将要学习几个绘制线条不同特性的几个函数,以及给图表添加格栅.ok,进入话题! 如何给线条设置绘制的样式? 这个其实非常 ...

  6. 【转】PHP网站（nginx、php-fpm、mysql） 用户权限解析

    这篇文章我们就特别来讲解下,nginx.php-fpm 以及 mysql 运行在各个用户下的配置. 先来做个说明:nginx本身不能处理PHP,它只是个web服务器.当接收到客户端请求后,如果是php ...

  7. secureCRT The remote system refused the connection.

    转 http://blog.csdn.net/lifengxun20121019/article/details/13627757 我在实践远程登录工具SecureCRT的时候遇到了这个问题 Ubun ...

  8. 获取pe文件的文件类型

    工程文件petype.cpp通过调用pefile类中的函数获取文件类型. 文件类型的判断通过5个监测点完成. 监测点1:dos头的e_magic 监测点2:nt头的Signature 监测点3:文件头 ...

  9. 在Parallel中使用DbSet.Add()发现的一系列多线程问题和解决过程

    发现问题 需求很简单,大致就是要批量往数据库写数据,于是打算用Parallel并行的方式写入,希望能利用计算机多核特性加快程序执行速度.想的很美好,于是快速撸了类似下面的一串代码: using (va ...

  10. python模块引用问题（比较杂乱，懒得整理）

    1 在stackoverflows摘抄 If the import module in the same dir, use e.g: from . import core If the import ...