練習がてら作ってみました。今まで作ったことが無いし作れるかどうかも分かんないのでとりあえず作ろうと思い作れるレベルで作りました。作ったのはコチラです。使いたい人が居たらコードは好きに使ってくださって結構です。INDEXHTMLを書くファイルを読み込む初期値を設定する調整用のスタイルシートを書くjQueryの中に入れたデータを取り出して変数に突っ込む初期値を元に、データを表示させる各種カウンタを設定スライダの画像をnextした時のボタンクリック時の動作ボタンをホバーで表示させる作ってみて思うことHTMLを書くこんな感じでHTMLを書きます。</body></html>ファイルを読み込むheadの中にファイルを読み込みます。rel="stylesheet">初期値を設定するjQueryとslide.jsの間に初期値を設定するjsを書きます。awesomefontって奴を使ってるので、使いたくない人は、<>のトコを画像にするなりなんなりしてください。rel="stylesheet">調整用のスタイルシートを書く矢印の場所とか調整していきます。</style>jQueryの中に入れたデータを取り出して変数に突っ込む任意に設定された初期値を変数に突っ込んでいきます。});初期値を元に、データを表示させる設定された初期値をブラウザに表示させる。最初からCSS設定した方が良いのかも知れません。});});各種カウンタを設定jQueryのローカルにカウンタ設定。プロい人ならもっとなんか良いやり方あると思います。0;スライダの画像をnextした時のボタンクリック時の動作この中で使う変数をそれぞれ定義して、counterの値を1つ上げます。slideの値が最終値になったら0をcounterに0を代入するようにしています。counterの値が0か、最後か、それ以外かで条件判定してます。それぞれに、どの画像を入れるのかを設定しています。後はクリック連打防止用にif文が入れてあります。クリックカウントが2になることはないので必要ないかも知れませんが、アニメーションがおかしくなりすぎないように、キューに溜めて順番になるようにしてあります。後、jQueryでbackground動かす場合に何故か半透明になるので、liタグの中にimg作って、作成したimgを前に出して、imgを動かしてliタグの中にbackgroundをopacity1で表示するようにしています。});prevの動作もほぼおんなじです。counterが-になり、画像が左に動くか右に動くかが違うだけです。セレクタをorで取ってclickされたIDなりで判別して、ifの中で少しコード変える方が良いと思いますが、僕にその精神的余裕がなかったので別々に書きました。});ボタンをホバーで表示させるliタグの中にマウスカーソルを当てるとfadeInしながらボタンを表示するようにしています。これliタグで取ると、ボタンの場所にカーソルが行った時にホバーのイベントが終了ということになるので、セレクタorでボタンのIDも一緒にとってやりましょう。});作ってみて思うことアニメーションはやっぱりデザインセンスが必要だなと思いました。jQuery使っても大した物が出来なかったので、継続して学習が必要だと思いました。スポンサーリンクFacebookTwitterはてブPocketFeedlyこの記事を書いた人mikaduki名古屋でエンジニアしています。好きな言語はPHPとJavaScriptです。理由は始めやすいからです。LinuxOSはCentOS、DBはMySQLが好きです。理由は無料だからです。ホスティングはロリポが好きです。クラウドはAWSを使います。理由は資格を持ってるからです。メシのタネ管理人おすすめの記事Webサーバーuploadディレクトリのパーミッションを777にしなくても良い方法があるんだぜ。あるに決まってんだろって話ですけど、今までサーバー違う人がやってたので、何とかしてもらってたんですが、今回自分でやる機会があったのでちょっと...WordPress【WordPress】カスタムフィールドの表示方法WordPressの投稿にはカスタムフィールドを追加できます。これは投稿画面でキーと値をセットにしてデータを保存しておく方法で、ある関数に当...PHPDOMをPHPで操作できたらいいよねそうだよね。JavaScriptでやると、画面がガタついたりするもんね。4.15】カテゴリーIDの確認方法カテゴリーIDの簡単な確認方法は下記画像の通りです。新年あけましておめでとうございます。ブログのアクセス数は平日が多くて休日が少なくなる傾向があります。今年も年末年始極端に少なかった事を見ると...javascriptJavaScriptでプログラマーをはじめようJavaScriptはプロから初心者まで、技術レベル問わず親しみ易い言語です。ユーザの動作によって、処理が動かせるので、ユーザーと対話...コラムホームページ作成における3つの選択肢ポン太ホームページ欲しいな~。常時情報の配信ができるって魅力的だよな~。コーチホームページ作るの慣れていないと結構大変だぞ。いうのは...ニュースBufferのAPIが登録できなくなった件についてSNS連携にBufferを利用しようと企みましたが、APIの新規登録が終わっていました。「めしのたね」になり得るプログラミング技術の紹介や自分が過去に行った検証や技術界隈のニュースなど、IT全般を取り扱っていくブログになっています。管理人のキャリアはWeb制作で2年HTML/CSS/コンテンツ作成を行い、従業員5人のソフトウェアハウスでエンジニアとして4年間Webサービス制作案件に従事し、Sierで4年近くPG、SE、PMと色んな立場でプレーしてきました。この観点から、業界についての話題も取り上げて行きたいと思ってます。Reserved.アーカイブ2020年1月2019年12月2019年11月2019年10月2019年2月2018年9月2018年2月2017年10月2017年3月2016年11月2016年8月2016年6月2016年3月2016年1月2015年12月2015年9月2015年8月2015年7月2015年6月2015年5月2015年4月2015年3月2015年2月2015年1月2014年12月2014年11月2014年10月2014年9月2014年8月2014年7月2014年6月2014年5月2014年4月2014年3月2013年11月2013年10月2013年7月2013年6月2013年5月2013年4月2013年3月2012年12月2012年11月2012年9月2012年8月2012年7月2011年7月2011年6。