<span style="font-size:24px; background-color:rgb(255,255,255)">一，前言</span>
<p> <span style="font-size:18px">最近参加XX培训公司去培训前端开发，到目前为止已经将近两个月，学了html，css，js，jquery，其中的UI部分被我先行跳过了。学完js给后了一个广告轮播的小项目来练手实现。再到学完jquery后又选择用原来的广告轮播小项目用jquery再实现一次。然后，我就发现了一个非常严重的问题。<span class="token lf"></span> </span></p>
<p><span style="font-size:18px"> 因为用原生js实现广告轮播时，是老师带着我们，讲思路，讲代码，几乎是老师手把手教着写的，而在做完这个项目之后，我一直没有进行总结复习，到后来要自己用jquery再实现一遍的时候就两眼一黑，脑中只有残章断片，只记得其中几个小细节的实现，而没法串联起来，甚至连刚开始该如何起步的思路都没了。这也就萌发了我去写博客记录下来的想法，不只是对原来所写的总结和复习，更为以后的回忆和重新拾起做一些保障。</span></p>
<p><span style="font-size:18px"> 首先，先将实现广告轮播的思路整理一下。</span></p>
<p><span style="font-size:24px; color:#000000; background-color:rgb(255,255,255)">二，广告轮播思路整理</span></p>
<span style="font-size:18px; background-color:rgb(255,255,255)"></span>
<p> 1， 原理</p>
<p> 广告的轮播，其实是一个横着存放着数个图片的div左右位移的效果，如下图（略微草率）</p>
<p> 而通过把div设置成绝对定位，改变其left即可。</p>
<p> 在实现过程中，其实是通过在JS中先将多个图片存放在一个数组中，然后通过操纵数组，再将</p>
<p> 数组刷新到页面的方式来改变页面，而所看到的轮播效果，是通过进行div左右位移的动画实现的。</p>
<p> 动画效果的实现，JS是通过设置定时器的方式，jQuery是用的万能动画函数</p>
<p> 另外，左移和右移时，对图片数组的操作是不同的。</p>
<p> 左移时，先进行动画效果展示，然后在数组中将左移出来的图片补到数组的最后，同时重置div的left为0；</p>
<p> 最后将图片数组刷到页面上</p>
<p> 右移时，先在数组中找到要显示图片，将其与其后的图片（共n个）先补到数组最前面，</p>
<p> 然后设置div的left为-n*（单个图片的宽），后再进行动画效果展示，最后将图片数组刷到页面。</p>
<p> <img alt="" height="211" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-edb35e47aa675c211848a3630a98c238" width="395"></p>
<p> </p>
<p> 2， <span style="background-color:rgb(255,255,255)">广告轮播中的图片放在"#imgs"的ul中，</span></p>
<p><span style="color:#ffffff; background-color:rgb(255,255,255)"> </span><span style="color:#ffffcc; background-color:rgb(255,255,255)"> </span><span style="background-color:rgb(255,255,255)">图片在JS中先用一个数组存储起来，然后用方法将图片刷到ul中去。 </span> </p>
<p> 例如：</p>
<p> var imgs=[<br> {"i":0,"img":"images/index/banner_01.jpg"},<br> {"i":1,"img":"images/index/banner_02.jpg"},<br> {"i":2,"img":"images/index/banner_03.jpg"},<br> {"i":3,"img":"images/index/banner_04.jpg"},<br> {"i":4,"img":"images/index/banner_05.jpg"}</p>
<p> ];</p>
<p> <br> </p>
<p> <span style="background-color:rgb(255,255,255)"><span style="font-size:18px">HTML代码以及css代码部分（因为重点是在于js的实现，所以只将相关的html和css代码交代出来）</span></span></p>
<p> </p>
<div align="left">
<pre class="blockcode"><code class="language-html"><span style="font-size:14px;"><!DOCTYPE HTML>
<html>
<head>
<title>广告轮播</title>
</head>
<style> <!--样式部分，只引入，js效果中需要用到的-->
#slider #imgs {<!-- --></span><span style="font-size:14px;">
position:absolute;</span></code></pre>
<pre class="blockcode"><code class="language-html"><span style="font-size:14px;"> top: 0; left: 0;
height:240px;
}
#slider #imgs li{
float:left;
z-index:0;
}
#slider #indexs li:hover,#slider #indexs li.hover {
background:#b61b1f;
}
< |
|
转播
