クリック矢印画像切り替え_画像特殊効果を実装する簡単な JS コード

手順は以下の通りです。

(1) 画像（左右の矢印といくつかのサンプル画像）を準備します。

(2) JS (jquery) コードは次のとおりです。

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

(3) HTML 部分は次のとおりです:

コードをコピー

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

;

以下に

の js バージョンを添付します。

無題のドキュメント <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style type="text/css"> <!-- *{ margin:0; padding:0} #imgslide{ margin:100px auto; width:550px; position:relative;-moz-user-select:none } #imgslide img{ width:550px} #imgslide #pre{ position:absolute; display:block; height:100%; background:#003366;filter:Alpha(Opacity=0);opacity:0; left:0; top:0; z-index:2; width:50%; cursor:url(http://s.xnimg.cn/imgpro/arrow/pre.cur),auto; } #imgslide #next{ position:absolute;z-index:2; display:block; background:#00CC99;filter:Alpha(Opacity=0);opacity:0; height:100%;width:50%; top:0; right:0; cursor:url(http://s.xnimg.cn/imgpro/arrow/next.cur), auto;} #intro{ padding:5px 8px; line-height:1.6; font-size:12px; color:#333; background:#333333; color:#fff} --> </style> <div id="imgslide"> <span id="pre"> </span> <span id="next"> </span> <img id="showimg" src="http://img1.gtimg.com/0/68/6884/688412_550x550_0.jpg" alt="クリック矢印画像切り替え_画像特殊効果を実装する簡単な JS コード" > <div id="intro"></div> </div> [Ctrl A

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。