jquery_jquery によって実装されたナビゲーション スクロール効果の特定のコード

キャンパスビデオ Web サイトを構築していたとき、ホームページにスクロール効果を実現する必要があるナビゲーション ページがありました。サンプルはありましたが、コードを理解するのが難しく、Web デザインでは自分のコードしか理解できないようでした。なので、他人のエフェクトを真似して自分で作ってみましたが、見た目は比較的スムーズで、オリジナルと比べても遜色ありません。

ここでコードをコピーし、後で変更を 1 つずつ簡略化します:
スクロール効果を実現するには、スクリプト コードは次のとおりです:

コードをコピーします コードは次のとおりです:

var all=0;
var no=0;
$(document).ready( function(){
all=$('.slide').length;
s_width=$('.slide').eq(0).width() ;
$("#slides" ).css('width',all*s_width);
var contiar=$('.control_links'); ;i ){
contiar.append ("

");
}
$('.control_links li').bind('click Mouseenter',function() {
var index=$(this ).index();
no_= no%all;
$("#slides").animate( -1*no_*s_width) 'px' },200);
$(this).css('background-color','#fff');
$(this).siblings().css ('背景色','#333 ');
});
setInterval(){
var no_= no%all;
$("#slides").animate ({left:(-1*no_* s_width) 'px'},1000);
var curr= $('.control_links li').eq(no_);
curr.css('background- color','#fff')
curr.siblings().css('background-color','#333');
いいえ ;
});


css コードは次のとおりです:

コードをコピー

コードは次のとおりです: img{ border:none;

#daohangpic {

width:1000px;
padding:20px; >オーバーフロー:非表示;
#daohangpic img {
高さ:380px;
幅:980px;

#contiar {
位置:相対;
幅:980px;
高さ:380px;
オーバーフロー:非表示;
#slides {
位置:絶対; :none;
}
.slide {
float:left;
height:380px;
border:none; >}
.control_links{
position:absolute;
right:10px;
z-index:200; li {
リストスタイル:
}
.control_links li {
幅: 15 ピクセル;
高さ: 15 ピクセル; 5px;
テキスト整列: 中心;
背景: 1px ソリッド #666;
不透明度: 0.5; .caption {
位置:絶対;
高さ:100%;
下:0px; ;
パディングトップ:10px;
z-index:100;
背景:url(hdpng.png) 繰り返しなし
}
.caption h2 {
color: #FFF;
font-size: 17px;
line-height: 25px; p{
表示: ブロック;
カラー: #767676 ;
行の高さ:15px;


スクロールする対象は次のように定義されます:




コードをコピー


コードは次のとおりです:

レスミルズ受賞者のリストが発表されました

グラミー賞受賞者のリストが発表され、授賞式では著名人全員が歌いました

div> 569736869323031336368756E77616E2F312E6D6B76" title="国内外の人気セレブが集結、鳥おじさんリン・チーリンが乗馬ダンスを披露" target="_blank">

グラミー賞受賞者のリストが発表されました

グラミーの勝者のリストが発表され、すべてのビッグネームは授賞式で歌いました＆P＆gt;チョン、東方不白とレン・インインは涙を誘う" target="_blank">

グラミー賞受賞者のリストが発表されました

グラミー賞受賞者のリストが発表され、授賞式では著名人全員が歌いました p>
下注

グラミー賞受賞者のリストが発表され、授賞式では著名人全員が歌いました

< ;div class="caption" >

グラミー賞受賞者のリストが発表されました

グラミー賞受賞者のリストが発表され、すべての有名人がコンサートで歌いました授賞式

;