ホームページ

JS特殊効果

jQueryの効果

jQueryは1688のホームページ広告画像切り替えを模倣

ダウンロード中プレビュー

<!DOCTYPE html>
<html lang="ja">
<頭>
<メタ文字セット="UTF-8">
<title>jQuery首页广告图片切换 </title>

<style type="text/css">
div,ul,li,a,span,img{マージン:0;パディング:0;}
li{リストスタイル:なし;}
#slider{幅:790px;高さ:340px;マージン:10% 自動;位置:相対;}
.slider_list li{位置:絶対;表示:なし;}
.slider_list li:first-child{display:block;}
.slider_icon{position:absolute;z-index:1;left:40%;bottom:20px;font-size:0;padding:4px 8px;border-radius:12px;background-color:hsla(0,0%, 100%,.3);}
.slider_icon i{display:inline-block;width:12px;height:12px;border-radius:50%;margin:0 5px;}
.btn{背景:#fff;}
.arrow{表示:なし;幅:30px;高さ:60px;背景色:rgba(0,0,0,.2);位置:絶対;上部:50%;マージン上部:-30px;}
.prve{左:0;}
.next{right:0;}
.arrow スパン{表示:ブロック;幅:10px;高さ:10px;border-bottom:2px 実線 #fff;border-left:2px 実線 #fff;}
.slider_left{マージン:25px 0 0 10px;transform:rotate(45deg);}
.slider_right{マージン:25px 0 0 5px;transform:rotate(-135deg);}
.arrow:hover{background:#444;}
#slider:hover .arrow{display:block;}
.btn_act{背景:#db192a;}
</style>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<スクリプトタイプ="text/javascript">
$(関数(){
変数カウント = 0;
var $li = $("#slider>ul>li");
$(".next").click(function(){
カウント ;
if(count == $li.length){
カウント =0;
}
$li.eq(count).fadeIn().siblings().fadeOut();
$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');
console.log(カウント);
});
$(".prve").click(function(){
カウント - ;＃＃＃ if(カウント == -1){
カウント = $li.length-1;
}
console.log(カウント);
$li.eq(count).fadeIn().siblings().fadeOut();
$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');
});
$(".slider_icon i").mouseenter(function(){
$(this).addClass('btn_act').siblings().removeClass("btn_act");
$li.eq($(this).index()).fadeIn().siblings().fadeOut();
count = $(this).index();
});
});
</スクリプト>

</head>
<本文>

<div id="スライダー">
<ul class="slider_list">
<li><a href="#"><img src="img/59e5df51Na34c52da.jpg"></a></li>
<li><a href="#"><img src="img/59e6f772Nde97ca5e.jpg"></a></li>
<li><a href="#"><img src="img/59e8ab7dN48b529e7.jpg"></a></li>
<li><a href="#"><img src="img/59e89be7N0031c258.jpg"></a></li>
<li><a href="#"><img src="img/59e980a2Nc4314079.jpg"></a></li>
<li><a href="#"><img src="img/59ed6dd8Ncaee86ed.jpg"></a></li>
<li><a href="#"><img src="img/59e99072N4baea8f3.jpg"></a></li>
<li><a href="#"><img src="img/598abe52Nb1c8cfe4.jpg"></a></li>
</ul>
<div class="slider_icon">
<i class="btn btn_act"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
<i class="btn"></i>
</div>
<a href="javascript:;" class="arrow prve">
<span class="slider_left"></span>
</a>
<a href="javascript:;" class="次の矢印">
<span class="slider_right"></span>
</a>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</本文>
</html>

これは、jQuery 1688 の最初のレポート画像の切り替えであり、必要な友人は直接ダウンロードして使用でき、より高速なコードは PHP ウェブサイトで公開されます。

免責事項

このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロードサイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn

jqueryはQQモールを模倣し、左右のボタンでフォーカス画像の切り替えスクロールを制御しますeffect_jquery

16 May 2016

jquery画像の特殊効果は、テンセントQQモールのホームページのバナーのフォーカス画像カルーセル切り替え効果を模倣するために生成され、インデックスボタンコントロールと左右のボタンで画像切り替えを制御します。興味のある方は以下のサンプルコードを参照してください。それに。

jQueryはAlipayを模倣した全画面フォーカス画像切り替え効果を実装 Alipay homepage_jquery

16 May 2016

この記事では主に、Alipay の Alipay ホームページを模倣した全画面フォーカス画像切り替えエフェクトの jQuery の実装について紹介します。これには、jQuery プラグイン jquery.kinMaxShow の関連使用スキルが含まれます。必要な方は参考にしてください。それ。

jqueryのハート型のいいね効果とフォロー効果の簡単な実装

07 Dec 2016

jqueryのハート型のいいね効果とフォロー効果の簡単な実装

jqueryアニメーションエフェクト学習メモ(8つのエフェクト)_jquery

16 May 2016

この記事では、jquery アニメーション効果の詳細な分析を提供する jquery アニメーション効果の学習ノートを共有し、フェードインおよびフェードアウト効果とスライディング効果の原理を説明します。jquery アニメーション効果をよく学びたい場合は、次のリンクを参照してください。この記事を辛抱強く読んでいただければ、予想外のことが見つかると思います。

HTML5の超リアルな雪景色エフェクト

18 Jan 2017

jqueryをベースにした超リアルな雪景色の特殊効果です。この特殊効果は、jquery コードを使用して html5 キャンバス要素を動的にプラグインし、キャンバス内に雪の特殊効果を作成します。

jQueryはAlipayホームページのフォーカス画像効果を模倣します

25 Apr 2018

今回は、jQueryのAlipayホームページのフォーカス画像効果をお届けします。jQueryのAlipayホームページのフォーカス画像効果の注意点は次のとおりです。見てみましょう。

jQueryは背景色のグラデーションアニメーション効果を操作します

19 Apr 2018

今回は jQuery 操作の背景色グラデーションアニメーション効果についてお届けします。 jQuery 操作の背景色グラデーションアニメーション効果の注意点は次のとおりです。

JQuery UI CSS Framework_jquery

16 May 2016

Jquery ui css フレームワークは、jquery ui のスタイルフレームワークです。jquery テーマローラーを使用して、必要な CSS スタイル効果を生成できます。 jquery ui のいくつかのフレームワークを使用して、jquery ui css フレームワーク効果に基づいたプラグインを開発できます。

jQueryのanimate関数で画像とテキストの切り替えアニメーションを実現effect_jquery

16 May 2016

animate() は、アニメーション効果を作成するために使用できる jquery のメソッドです。jquery の animate() メソッドは、そのページに優れた視覚効果を追加します。

See all articles