ホームページ > 記事 > ウェブフロントエンド > jquery はイメージ広告の回転特殊効果を実装します
jquery はイメージ広告の回転特殊効果を実装します
- php中世界最好的语言オリジナル
- 2018-04-24 10:38:203232ブラウズ
コードを記述する前に、まずレンダリングの構造を分析します。
1. 左右の方向ボタンを使用して、前の画像と次の画像を切り替えることができます。
2. どの画像にスクロールしたかを示すページングインジケーターが下にあります。もちろん、対応するボタンをクリックして、対応する画像にジャンプすることもできます。
3. 中央のメイン表示領域は、回転する必要がある画像を表示するために使用されます。
上記の説明によれば、まず HTML コードを書くことができます。
1. HTML コード
<body> <p id="youku"> <p class="anniu"> <span class="zuo"></span> <span class="you"></span> </p> <ul class="tuul"> <li class="no0"><a href="#"><img src="images/0.jpg" /></a></li> <li class="no1"><a href="#"><img src="images/1.jpg" /></a></li> <li class="no2"><a href="#"><img src="images/2.jpg" /></a></li> <li class="no3"><a href="#"><img src="images/3.jpg" /></a></li> <li class="no4"><a href="#"><img src="images/4.jpg" /></a></li> <li class="waiting"><a href="#"><img src="images/5.jpg" /></a></li> <li class="waiting"><a href="#"><img src="images/6.jpg" /></a></li> <li class="waiting"><a href="#"><img src="images/7.jpg" /></a></li> <li class="waiting"><a href="#"><img src="images/8.jpg" /></a></li> </ul> <p class="xiaoyuandian"> <ul> <li></li> <li></li> <li class="cur"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </p> </p> </body>
コードの内容は、上で説明したことと一致しているので、ここで説明する必要がある 2 つの点があります:
1. 画像を保存するクラス tuul。 li には 2 つの主要なクラスがあります。「no」と「waiting」の形式でパッケージ化されており、「no」シリーズは現在「アクティブ」状態にある可能性のあるピクチャを示し、「待機中」です。 「」は現在これらの画像が非表示になっていることを意味します。次のCSSコードに反映されます。
2. ページング インジケーターは、デフォルトで 3 番目の li のクラスを cur に設定します。Tuul で最初に設定されている「アクティブ」ピクチャの数は 5 であるため、デフォルトで 3 番目の章が中央に表示されます。しかし、初期状態ではインターフェイスに表示される写真の数は 3 つなので、2 番目の写真を中央の写真として選択するのはどうでしょうか。 というのは、左側のボタンをクリックしたときに、中央に2番目の写真を表示することを選択すると、1番目の写真は表示されますが、1番目の写真の前には写真がありません。左ボタンをクリックすると「露出」になります。全体的なデザインのアイデアは、インターフェイス上に 3 つの画像が表示され、インターフェイスを越えた部分の左右に 1 つの画像がありますが、それは見えません。以下の説明では、この実装プロセスについて詳しく説明します。
2. CSS コード
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#youku{
width: 1189px;
height: 360px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#youku ul{
list-style: none;
}
#youku .tuul li{
position: absolute;
background-color: black;
}
#youku li.waiting{
display: none;
}
#youku li img{
width: 100%;
height: 100%;
}
#youku .anniu .zuo{
position: absolute;
width: 45px;
height: 45px;
background:url(images/zuo.png) no-repeat;
top:100px;
left:10px;
z-index: 1000;
cursor: pointer;
}
#youku .anniu .you{
position: absolute;
width: 45px;
height: 45px;
background:url(images/you.png) no-repeat;
top:100px;
right:10px;
z-index: 1000;
cursor: pointer;
}
#youku li.no0{width: 174px;height:122px;left:-116px;top:100px;z-index: 777;}
#youku li.no1{width: 356px;height:223px;left:0px;top:26px;z-index: 888;}
#youku li.no2{width: 642px;height:273px;left:274px;top:0px;z-index: 999;}
#youku li.no3{width: 356px;height:223px;left:834px;top:26px;z-index: 888;}
#youku li.no4{width: 174px;height:122px;left:1097px;top:100px;z-index: 777;}
#youku li.no1 img , #youku li.no3 img{
opacity: 0.3;
}
#youku .xiaoyuandian{
width: 600px;
height: 20px;
position: absolute;
top: 312px;
left: 454px;
}
#youku .xiaoyuandian ul li{
float: left;
width: 16px;
height: 16px;
background-color: blue;
margin-right: 10px;
border-radius: 100px;
cursor: pointer;
}
#youku .xiaoyuandian ul li.cur{
background-color:green;
}
</style>
CSS については、ここでは一つ一つ説明しません。詳しく知りたい場合は、以前に書いた JS & JQuery のシリーズを参照してください。 2 点:
1. 「アクティブ」画像の CSS 設定、つまり #youku li.no0~no4 の設定では、no0 の左側の値が負の数であり、no1 の左側の値が0 は、上で表現した点を裏付けるもので、視覚範囲の静的な状態では 3 つの画像が表示され、残りの 2 つの画像はそれぞれ視覚範囲の左側と右側にあります。各ピクチャの z-index 値の設定に注意して、値が大きいほど 3 次元の階層感が得られるようにします。
2. 可視範囲の両側の画像を暗くするように不透明度を設定します。
上記の CSS コードを設定した後の分析図は次のようになります:
3. JQuery コード
<script type="text/javascript">
$(document).ready(
function() {
//定义一个初始速度
var sudu = 600;
var shangdi = false;
//定义json
var json0 = {"width":"174px","height":"122px","left":"-116px", "top":"100px"};
var json1 = {"width":"356px","height":"223px","left":"0px", "top":"26px"};
var json2 = {"width":"642px","height":"273px","left":"274px", "top":"0"};
var json3 = {"width":"356px","height":"223px","left":"834px", "top":"26px"};
var json4 = {"width":"174px","height":"122px","left":"1097px", "top":"100px"};
var nowimg = 2;
var timer = setInterval(youanniuyewu,2000);
$("#youku").mouseenter(
function() {
clearInterval(timer);
}
);
$("#youku").mouseleave(
function() {
clearInterval(timer);
timer = setInterval(youanniuyewu,2000);
}
);
$(".you").click(youanniuyewu);
function youanniuyewu(){
if(!$(".tuul li").is(":animated") || shangdi == true){
if(nowimg < 8){
nowimg ++;
}else{
nowimg = 0;
}
$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");
//先交换位置
$(".no1").animate(json0,sudu);
$(".no2").animate(json1,sudu);
$(".no3").animate(json2,sudu);
$(".no4").animate(json3,sudu);
$(".no0").css(json4);
//再交换身份
$(".no0").attr("class","waiting");
$(".no1").attr("class","no0");
$(".no2").attr("class","no1");
$(".no3").attr("class","no2");
$(".no4").attr("class","no3");
//上面的交换身份，把no0搞没了！所以，我们让no1前面那个人改名为no0
if($(".no3").next().length != 0){
//如果no3后面有人，那么改变这个人的姓名为no4
$(".no3").next().attr("class","no4");
}else{
//no3前面没人，那么改变此时队列最开头的那个人的名字为no0
$(".tuul li:first").attr("class","no4");
}
//发现写完上面的程序之后，no6的行内样式还是json0的位置，所以强制：
$(".no4").css(json4);
}
}
$(".zuo").click(
function(){
if(!$(".tuul li").is(":animated") || shangdi == true){
if(nowimg > 0){
nowimg --;
}else{
nowimg = 8;
}
$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");
//先交换位置:
$(".no0").animate(json1,sudu);
$(".no1").animate(json2,sudu);
$(".no2").animate(json3,sudu);
$(".no3").animate(json4,sudu);
$(".no4").css(json0);
//再交换身份
$(".no4").attr("class","waiting");
$(".no3").attr("class","no4");
$(".no2").attr("class","no3");
$(".no1").attr("class","no2");
$(".no0").attr("class","no1");
//上面的交换身份，把no0搞没了！所以，我们让no1前面那个人改名为no0
if($(".no1").prev().length != 0){
//如果no1前面有人，那么改变这个人的姓名为no0
$(".no1").prev().attr("class","no0");
}else{
//no1前面没人，那么改变此时队列最后的那个人的名字为no0
$(".tuul li:last").attr("class","no0");
}
$(".no0").css(json0);
}
}
);
$("#youku .xiaoyuandian li").click(
function(){
sudu = 100; //临时把这个速度变化一下
shangdi = true; //flag
var yonghuandexuhao = $(this).index();
if(yonghuandexuhao > nowimg ){
var cishu = yonghuandexuhao - nowimg;
console.log("主人，我已经通知上帝帮你按右按钮" + cishu + "次");
for(var i = 1 ; i<= cishu ; i++){
$(".you").trigger("click"); //让上帝帮你按一次又按钮
}
}else{
var cishu = nowimg - yonghuandexuhao;
console.log("主人，我已经通知上帝帮你按左按钮" + cishu + "次");
for(var i = 1 ; i<= cishu ; i++){
$(".zuo").trigger("click"); //让上帝帮你按一次又按钮
}
}
nowimg = yonghuandexuhao;
sudu = 600; //再把速度恢复
shangdi = false;
}
);
}
);
</script>
ここでは JQuery コード内のタイマー コントロールとページング ボタンのクリックについては説明しません。興味のある方は、JS & JQuery の内容を参照してください。
ここでは主に 2 つの点を説明します:
1. json0、json1、json2、json3、json4 データの定義、その初期値は CSS での上記の定義と一致します。その目的は、各画像の絶対位置を便利に切り替えることです。 . 以下で詳しく紹介していきます。
2.youanniuyewuメソッドである右ボタンクリックイベントを中心に説明します。
2-1) nowImg インデックスの簡単な処理:
if(nowimg < 8){
nowimg ++;
}else{
nowimg = 0;
}
最後のインデックスでない場合は、「右ボタン」をクリックすると、nowImg の値が 1 ずつ増加します。最後のインデックスの場合、nowImg は から始まります。 0.
2-2) ページングインジケーターの処理に関して、「右ボタン」をクリックします:
$(".xiaoyuandian li").eq(nowimg).addClass("cur").siblings().removeClass("cur");
現在表示されている画像に対応するインジケーターボタンを強調表示すると、兄弟ノードが通常どおり表示されます。
2-3) 画像の位置を交換する:
//先交换位置
$(".no1").animate(json0,sudu);
$(".no2").animate(json1,sudu);
$(".no3").animate(json2,sudu);
$(".no4").animate(json3,sudu);
$(".no0").css(json4);
最初の 4 つの文は、画像を移動する効果をアニメーション化します。静止状態では 3 つの画像が目の前に表示されますが、動作している場合は、上記の 4 つのコード文の実行中に最大 4 つの画像が目の前に表示されると想像できます。
つまり、アニメーションが実行されると、その過程で、画像「no1」が徐々に画面の可視範囲から外れ、同時に画像「no4」が徐々に画面の可視範囲内に表示されます。画面。
而在动画执行的过程中，"no0" 的这张图片早就定位到 "no4" 的位置(此时在可视范围之外，因为这里的animate动画是异步执行的，不会延迟$(.no0).css(json4)这句代码的执行。当这一组代码执行完毕后，剖析图如下：
此时，我们再将那些 处于 "waiting" 状态的图片考虑进来，则此时的剖析图如下：
2-4）以上流程执行完毕后，是完成了一次轮播效果，但是此时各个图片的牌号顺序已经被打乱，为了使得轮播继续下去，我们应该将牌号再 "恢复" 过来。所以我们可以添加以下代码：
//再交换身份
$(".no0").attr("class","waiting");
$(".no1").attr("class","no0");
$(".no2").attr("class","no1");
$(".no3").attr("class","no2");
$(".no4").attr("class","no3");
上面的代码执行后，意味着将 上图中 "no0" 这张图片拉入到 "waiting" 区域，而其他四个的编号则依次往前推算。执行完毕后，剖析图如下：
正如上图所示，"活跃"状态的5张图片，最后一张现在也变成了 "waiting" 状态，所以需要有人替补上去，才能继续动画的执行。很显然，应该拿 "waiting" 列表的第一张，也就是 "活跃" 状态的后面一张图片 "顶替" 上去；如果后面没有 "waiting" 状态的图片了， 说明这些 "waiting" 状态的图片全部 "跑到" class 为 tuul所有列表的前面去了，那就抓取这些列表的第一张作为 "顶替者"。代码如下：
if($(".no3").next().length != 0){
//如果no3后面有人，那么改变这个人的姓名为no4
$(".no3").next().attr("class","no4");
}else{
//no3前面没人，那么改变此时队列最开头的那个人的名字为no0
$(".tuul li:first").attr("class","no4");
}
//发现写完上面的程序之后，no6的行内样式还是json0的位置，所以强制：
$(".no4").css(json4);
这里需要注意的是：虽然已经经历了很多步奏的位置信息的改变及牌号的改变，但是刚刚被拉入等待区域的那张图片在li中的与兄弟节点的位置关系并没有发生改变，只是class属性变成了 "waiting". 即此时的tuul中li的代码结构如下：
<ul class="tuul"> <li class="waiting"><a href="#"><img src="images/0.jpg" /></a></li> <li class="no0"><a href="#"><img src="images/1.jpg" /></a></li> <li class="no1"><a href="#"><img src="images/2.jpg" /></a></li> <li class="no2"><a href="#"><img src="images/3.jpg" /></a></li> <li class="no3"><a href="#"><img src="images/4.jpg" /></a></li> <li class="no4"><a href="#"><img src="images/5.jpg" /></a></li> <li class="waiting"><a href="#"><img src="images/6.jpg" /></a></li> <li class="waiting"><a href="#"><img src="images/7.jpg" /></a></li> <li class="waiting"><a href="#"><img src="images/8.jpg" /></a></li> </ul>
执行完以上代码后，剖析图如下：
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上がjquery はイメージ広告の回転特殊効果を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。