jquery轮播图详解

来源：互联网发布：java调用rest api实例编辑：程序博客网时间：2024/06/07 23:36

我在两个月以前没有接触过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="image/Lslide3.jpg" alt="" width="300" height="480"/></li>    <li><img src="image/Lslide4.jpg" alt="" width="300" height="480"/></li>    <li><img src="image/Lslide5.jpg" alt="" width="300" height="480"/></li>    <li><img src="image/Lslide6.jpg" alt="" width="300" height="480"/></li>    <li><img src="image/Lslide2.jpg" alt="" width="300" height="480"/></li>    <li><img src="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="image/left_arrow.jpg" width="15" height="50" alt=""/></div>    <div class="next"><img src="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（）就可以轻松搞定。
我是自学er,也没有啥子技术，只是爱好，兴趣使然，可以一步一步的走进去，发现web前端的更深层的东西，每天都在瞻仰大山，攀爬中，早晚有一天会登上高山，然后创造高山。

阅读全文

0 0