ホームページ > ウェブフロントエンド > jsチュートリアル > js画像スクロールエフェクトのサンプルコードを右に1つずつ_javascriptスキル

js画像スクロールエフェクトのサンプルコードを右に1つずつ_javascriptスキル

WBOY
リリース: 2016-05-16 17:12:48
オリジナル
982 人が閲覧しました

先来张效果图

js画像スクロールエフェクトのサンプルコードを右に1つずつ_javascriptスキル

样式

复制代码代码如下:

#div_left{float:left;width :60px;height:86px;}
#starScroll{width:843px;height:188px;margin-left:15px;margin-right:15px;padding-top:9px;overflow:hidden;border:1px 単色赤; float:left;}
#starScroll #contentScroll{width:500%}
#starScroll #ScrollOne{float:left;}
#starScroll #ScrollOne a{float:left;width:204px;height: 188px;margin-right:9px;float:left;display:inline;}
#starScroll #ScrollOne img{width:204px;height:188px;border:0px;}
#starScroll #ScrollTwo{float:left ;}
#starScroll #ScrollTwo a{float:left;width:204px;height:188px;margin-right:9px;float:left;display:inline;}
#starScroll #ScrollTwo img{width:204px ;height:188px;border:0px;}
#div_right{float:left;width:60px;height:86px;}
.arrow{background:url(images/arrow.png) no-repeat;cursor :pointer;height:86px;width:60px;cursor:pointer;display:block;margin-top:50px;}
.prev{background-position:left top;}
.prev:hover{background- Position:左下;}
.next{background-position:右上;}
.next:hover{background-position:右下;}

html代码

复制代码 代码如下:








< ;img src="images/1.jpg" />


< a href="#" title="4">












JS コード

コードをコピー コードは次のとおりです。


関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート