bxsliderが動かない
- Javascript初心者の方が自分のサイトでbxsliderを使用したいと思っていますが、うまく動作しません。
- HTMLファイルに正しくbxsliderを記述しているにも関わらず、画像が縦に並んで表示されるだけになってしまいます。
- 試したブラウザはFirefox、Chrome、IEの最新版であり、問題は解決されませんでした。
- ベストアンサー
bxsliderが動かない
Javascript初心者なのですが、自分のサイトにbxsliderを置きたいと思っています。 試しに白紙のHTMLファイルに以下のように記述してみました。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>test</title> <link href="css/jquery.bxslider.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.bxslider.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxslider({ auto: true, }); }); </script> </head> <body> <ul class="bxslider"> <li><img src="images/pic1.jpg"></li> <li><img src="images/pic2.jpg"></li> <li><img src="images/pic3.jpg"></li> <li><img src="images/pic4.jpg"></li> </ul> </body> </html> jsやcssの場所は正しいです。 しかし、表示してみると画像が4枚縦に並んで表示されるだけとなってしまいます。 Firefox, Chrome、IEの各最新版で試しましたが同様でした。 どの部分が間違っているのでしょうか？ご教授お願いします。
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＞↑に記したものが全文となります。jsやcssのリソース指定は正しいです。 同様にやってみましたが問題なく動きますよ。当方であなたの実際のものを 確認できませんので、これ以上はわかりません。
その他の回答 (2)
- warpspace
- ベストアンサー率56% (83/147)
＞カンマを外してみましたが改善しませんでした。 差し支えなければ、チェックしてみますのでそのページのURLを明記してください。
お礼
いえ、本文にも記したように白紙のHTMLに書いただけで、サーバーにはアップしていません。↑に記したものが全文となります。jsやcssのリソース指定は正しいです。
- warpspace
- ベストアンサー率56% (83/147)
パラメタの最後のカンマは不要です。 auto: true, → auto: true
お礼
ご回答ありがとうございます。カンマを外してみましたが改善しませんでした。
関連するQ&A
- bxsliderでスライドショーの間違い教えて
ホームページ制作素人の質問で申し訳ありません。 「bxslider」を用いてスライドショーを作成しようとしていますが、jQueryのホームページから必要ファイルをダウンロードし、ガイドに従いサンプルをコピペして一番基本的な(と思われる)ものを作成してみましたが、張付けた画像が4枚縦に並んで表示されるだけで、「スライドショー」的なものになりません。 プログラムの理解が基本的に不十分な素人の厚かましい質問で恐縮ですが、下記の記述のどこが間違っているか、どう修正すれば良いか、などどなたかご教示下さればありがたく思います。 <head> <!-- jQuery library (served from Google) --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <!-- bxSlider Javascript file --> <script src="jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> <link href="jquery.bxslider.css" rel="stylesheet" /> </head> <script type="text/javascript"> $(document).ready(function(){ $('.bxslider').bxSlider({auto: true,autoControls: true}); </script> <ul class="bxslider"> <li><img src="http://www.geocities.jp/画像ファイル1.jpg" /></li> <li><img src="http://www.geocities.jp/画像ファイル2.jpg" /></li> <li><img src="http://www.geocities.jp/画像ファイル3.jpg" /></li> <li><img src="http://www.geocities.jp/画像ファイル4.jpg" /></li> </ul> </html>
- ベストアンサー
- ホームページ作成ソフト
- スライドショーについて
ど～もど～も。よろしくです。http://okwave.jp/qa5423914.html 上のURLでの質問はjQueryじゃなくて「TinySlideshow」ってやつだったんだけど、jQueryだったらどうなるのかな？ 私も同じような設計で悩んでてピッタシと思うのがやっとあった！と思ってたら・・・jQueryじゃないみたい（泣） 私のしたいことはjQueryを使ったスライドショーで、時間によって色んな画像がころころと変わるようなものを作りたいです。 ソースを貼っておくのでよろしくお願いします。 ｈｔｍｌファイル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0051)http://www.frontstyle.com/shopcruise/tokyo_009.html --><HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD><TITLE>test</TITLE><META content="text/html; charset=utf-8" http-equiv=Content-Type><META content=IE=7 http-equiv=X-UA-Compatible><!--css--> <LINK rel=stylesheet type=text/css href="css/style.css"> <LINK rel=stylesheet type=text/css href="css/ie6.css"> <LINK rel=stylesheet type=text/css href="css/backnumber.css"> <LINK rel=stylesheet type=text/css href="css/lightview.css"> <LINK rel=stylesheet type=text/css href="css/shopcruise.css"> <!--js--> <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/jquery-1.3.2.js"></SCRIPT> <SCRIPT type=text/javascript> jQuery.noConflict(); </SCRIPT><SCRIPT type=text/javascript src="js/jquery.easing.1.3.js">/SCRIPT> <SCRIPT type=text/javascript src="js/jquery.galleryview-1.1.js"></SCRIPT><SCRIPT type=text/javascript src="js/jquery.timers-1.1.2.js"></SCRIPT><SCRIPT type=text/javascript> jQuery(document).ready(function(){jQuery('#slide').galleryView({ panel_width: 638,panel_height: 300,frame_width: 80,frame_height: 38,transition_interval: 3000,overlay_height: 0 });}); </SCRIPT> <!--[if lt IE 7]><script type="text/javascript" src="js/iepngfix.js"></script><![endif]--> <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/swapimage.js"></SCRIPT> <SCRIPT type=text/javascript src="js/prototype.js"></SCRIPT> <SCRIPT type=text/javascript src="js/scriptaculous.js"></SCRIPT> <SCRIPT type=text/javascript src="js/lightview.js"></SCRIPT> <!--//js--></HEAD><BODY><DIV id=slide class=galleryview> <!--スライドショーここからだよ--> <DIV id=gallery_box> <!--メイン画像ここからだよ--> <DIV class=panel><IMG alt="○○○ src="./images/1.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/2.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/3.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/4.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/5.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/6.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./imagess/7.jpg" width=640 height=300> </DIV> <!--メイン画像ここまでだよ--> <!--メイン画像ここまでだよ--><!--サムネイルここからだよ--> <UL class=filmstrip> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_7s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_2s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_3s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_4s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_5s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_6s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_1s.jpg"> </LI></UL><!--サムネイルここまでだよ--> </DIV><!--スライドショーここまでだよ--> </DIV></BODY></HTML> 長くなっちゃってごめんなさい。 困っているので、お願いします。
- 締切済み
- JavaScript
- 同HTML内で複数のjQueryを設置したいです
買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか？ 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>
- ベストアンサー
- その他（プログラミング・開発）
- jquery.bgSwitcherが設置できない
私は、いまbgSwitcherの設置ができなくて悩んでいます。 「fadeOut」を利用したいのですが、画像は表示されるのですが、そこから何も動きません。 だれか分かる方がいらっしゃれば是非教えていただきたいので、宜しくお願いします。 ▼私の現在の状況************************************************************ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <TITLE>○○○</TITLE> <META name="keywords" content="○○○"> <META name="description" content="○○○"> <meta name="robots" content="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/lightbox/js/prototype.js"></script> <script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgSwitcher.js"></script> <script> jQuery(document).ready(function($) { $('#fadeOut').bgSwitcher({ images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'], interval: 2000 }); }); </script> </head> <body> <div id="wrap"> <div id="container"> | 途中は省略 ↓ <div id="fadeOut" class="bg"><p><img src="images/top_main.png" width="670" height="450" /></p></div> | ↓ 以下省略。 ちなみに「class="bg"」は、 .bg { width: 640px; height: 415px; margin: 0; padding: 0; } こういった感じです。 *************************************************************************** これで、なぜ動かないのでしょうか？ このプラグインは、jquery.bgSwitcher.js 自体を何か編集する必要があるのでしょうか？ 開発された方のサイトを隅から隅まで見ても分かりませんでした。 ▼開発者様のサイト http://rewish.org/javascript/jquery_bg_switcher ちなみに、jQueryのバージョンは、jquery-1.7.1.minです。 どなたか、ご助力をお願い致します。
- 締切済み
- JavaScript
- ご教授ください。
無限ループとめる方法教えてください。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <title>jquery-galleryview-2.1.1</title> <link rel="stylesheet" href="css/jquery.galleryview-3.0.css" /> <script src="http://www.google.com/jsapi"></script> <script> google.load("jquery", "1.4"); </script> <script type="text/javascript" src="js/jquery.timers-1.2.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.galleryview-3.0.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $('#gallery').galleryView({ panel_width: 450, panel_height: 300, frame_width: 90, frame_height: 60 }); }); </script> </head> <body onLoad="location.reload(true)"> <ul id="gallery"> <li><img src="http://lorempixum.com/450/300/people/1" /></li> <li><img src="http://lorempixum.com/450/300/people/2" /></li> <li><img src="http://lorempixum.com/450/300/people/3" /></li> <li><img src="http://lorempixum.com/450/300/people/4" /></li> <li><img src="http://lorempixum.com/450/300/people/5" /></li> <li><img src="http://lorempixum.com/450/300/people/6" /></li> <li><img src="http://lorempixum.com/450/300/people/7" /></li> <li><img src="http://lorempixum.com/450/300/people/8" /></li> </ul> </body> </html> というページがございまして。 親ページで tickboxを開くぼたんを押すと このページがでる仕組みなんですが、 Firefoxのみ 表示されません 透明のこのページがでて、作動はしてるのですが。 画像まで読み込みしません。 それで、onLoad="location.reload(true)" を入れたのですが、無限ループ。 これを１回で終らせる方法、 および、別の方法ご存知の方 いらっしゃると信じて投稿です。 どうか、教えてください。 親ページでやる方法があれば それでもかまいません。 まだまだ経験不足で、 よろしくお願いいたします。
- 締切済み
- その他（プログラミング・開発）
- galleryviewのjavascriptについ
下記の画像の部分にどうしてもリンクを貼りたいのですが上手くいきません。ご教授願います。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>GalleryView - Default Demo</title> <!-- First, add jQuery (and jQuery UI if using custom easing or animation --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script> <!-- Second, add the Timer and Easing plugins --> <script type="text/javascript" src="../js/jquery.timers-1.2.js"></script> <script type="text/javascript" src="../js/jquery.easing.1.3.js"></script> <!-- Third, add the GalleryView Javascript and CSS files --> <script type="text/javascript" src="../js/jquery.galleryview-3.0-dev.js"></script> <link type="text/css" rel="stylesheet" href="../css/jquery.galleryview-3.0-dev.css" /> <!-- Lastly, call the galleryView() function on your unordered list(s) --> <script type="text/javascript"> $(function(){ $('#myGallery').galleryView(); }); </script> </head> <body> <ul id="myGallery"> <li><a href="http://ariacompany-since2010.com/shop/products/list.php?category_id=47"><img src="http://www.spaceforaname.com/galleryview/img/photos/bp1.jpg" alt="Lone Tree Yellowstone" /></a> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp2.jpg" alt="Is He Still There?!" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp4.jpg" alt="Noni Nectar For Green Gecko" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp7.jpg" alt="Flight of an Eagle Owl" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp14.jpg" alt="Winter Lollipops" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp26.jpg" alt="Day of Youth" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp27.jpg" alt="Sunbathing Underwater" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp28.jpg" alt="Untitled" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp41.jpg" alt="New Orleans Streetcar" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp49.jpg" alt="By The Wind of Chance" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp52.jpg" alt="Fishing on the Cloud" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp53.jpg" alt="Blue Lagoon" /> <li><img src="http://www.spaceforaname.com/galleryview/img/photos/bp54.jpg" alt="Time" /> </ul> <p>Please view the source of this page if you are having difficulties setting up GalleryView.</p> </body> </html>
- 締切済み
- JavaScript
- crossSlideがうまく機能しないです；
簡単な画像切り替えのプラグインとして、 crossSlideを見つけたので使用してみようとしたんですが、 全く何も表示されない状態で困っています。 下記のようにソースは記載しています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="ja" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <link href="css/index.css" rel="stylesheet" type="text/css"> <script type='text/javascript' src='js/jquery-1.9.1.min.js'></script> <script type='text/javascript' src='js/jquery.cross-slide.js'></script> <script type="text/javascript"> $(function(){ $('#mainvisual').crossSlide({ sleep: 1, fade: 1 },[ { src: 'images/01.jpg' }, { src: 'images/02.jpg' }, { src: 'images/03.jpg' } ]); }); </script> </head> <body> <p>タイトル</p> <div id="mainvisual"> <p>写真</p> </div> </body> </html> cssは何も指定していません。 jsフォルダに、jquery-1.9.1.min.jsファイル、jquery.cross-slide.jsファイルを入れています。 imagesフォルダには、01.jpg、02.jpg、03.jpgを入れてます。 ブラウザには <p>タイトル</p> は表示されるのですが、 div#mainvisualの中の <p>写真</p>の文字は表示されません。 何が原因なのでしょうか。 よければアドバイスの方よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像／文字をスクロールさせるスクリプト
表題の通り、JavaScriptで、文字や画像をスクロールさせる外部ライブラリを探しています。 今のところ、左へ向けてスクロールしていくものしか発見できませんでした。 現状、/jquery-1.3.2.min.js と、sc_text/jcarousellite_1.0.1.js を使って、次のようなスクロールまでは出来ています。 http://www.royal-e.com/javascript/test5.htm 【ソース】※相対リンクなので、そのままコピーしても動きません。悪しからずご了承ください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=shift_jis"> <TITLE>無題ドキュメント</TITLE> <SCRIPT type="text/javascript" src="sc_text/jquery-1.3.2.min.js"></SCRIPT> <SCRIPT type="text/javascript" src="sc_text/jcarousellite_1.0.1.js"></SCRIPT> <SCRIPT language="JavaScript"> <!-- $(function() { $(".carousel").jCarouselLite({ auto: 800, speed: 2000, visible: 5, btnNext: ".next", btnPrev: ".prev", }); }); //--> </SCRIPT> </HEAD> <BODY> <DIV class="carousel"> <UL> <LI><IMG src="images/best_1.jpg"></LI> <LI><IMG src="images/best_2.jpg"></LI> <LI><IMG src="images/best_3.jpg"></LI> <LI><IMG src="images/best_4.jpg"></LI> <LI><IMG src="images/best_5.jpg"></LI> <LI><IMG src="images/best_6.jpg"></LI> <LI><IMG src="images/best_7.jpg"></LI> <LI><IMG src="images/best_8.jpg"></LI> <LI><IMG src="images/best_9.jpg"></LI> <LI><IMG src="images/best_10.jpg"></LI> </UL> </DIV> <A href="#" class="prev">戻る</A> <A href="#" class="next">次</A> </BODY> </HTML> 希望としては １．左 右 などのボタンで、スクロールの方向を、簡単に切り替えられる。（もちろん、現在表示の位置から方向が変わる） ⇒例えば、上のサンプルで、５を見逃したら、ボタンを押す（あるいはマウスオン）で回転方向が逆になって、５が左から出てくる という感じです。 ２．早送り、巻き戻し など、スクロールの速度も変更できる。 ３や４が表示されているとき、ボタンやマウスオンで、動きが早くなって、９や10まで素早く移動できるという感じです。 そのような外部ライブラリをご存知でしたら、教えていただけないでしょうか？ jcarousellite の改造方法でもけっこうです。 スクロールする画像や文字を頻繁に入れ替えたいので、その部分についてはjcarousellite のように簡単に指定できると、たいへん助かります。
- 締切済み
- JavaScript
- jQueryのroundaboutで画像挿入の際IEでの不具合について。
jQueryのRoundaboutで画像を挿入した際にIE６で表示テストしたのですが IEでのみズレが生じてしまいます。ハックだったり試したのですが 解決に至りませんでした。どうぞよろしくお願いいたします。 これが問題のIE表示です。http://www.imagecheese.com/images/1zvz.jpg こちらがFireFox表示の正しいほうです。http://www.imagecheese.com/images/2udu.jpg <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><head><title>web page title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="ja"> <style type="text/css"> /*CSS*/ -------------------------------------------------------- .roundabout-holder { list-style: none; width: 80%; height: 20em; margin: 1em auto; } .roundabout-moveable-item { height: 15em; width: 44.375em; border: 1px dotted #999; background-color:pink; cursor: pointer; } .roundabout-moveable-item img {/*画像の大きさ*/ height: 15em; width: 44.375em; .roundabout-in-focus { cursor: auto; } <body>------------------------------------------------------------------ <ul id="myRoundabout"> <li><img src="pic/block1.jpg"></li> <li><img src="pic/block2.jpg"></li> <li><img src="pic/block3.jpg"></li> </ul> <script type="text/javascript" src="common1/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="common1/js/jquery.roundabout-1.0.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('ul#myRoundabout').roundabout({ minOpacity: 0.3, // 後ろのメニューの透明度 minScale: 0.5 // 後ろのメニューの縮小率 }); }); </script> </body> </html> -------------------------------------------------------------------------------------------- jquery roundabout http://www.fredhq.com/projects/roundabout/ 個人的にはCSSの問題かなぁと思っているのですが。。。 画像は900px×300pxです。 本当に困ってます、よろしくおねがいします
- 締切済み
- HTML
- jQueryのroundaboutで画像挿入の際IEでの不具合について。
jQueryのRoundaboutで画像を挿入した際にIE６で表示テストしたのですが IEでのみズレが生じてしまいます。ハックだったり試したのですが 解決に至りませんでした。どうぞよろしくお願いいたします。 これが問題のIE表示です。http://www.imagecheese.com/images/1zvz.jpg こちらがFireFox表示の正しいほうです。http://www.imagecheese.com/images/2udu.jpg <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML><head><title>web page title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="ja"> <style type="text/css"> /*CSS*/ -------------------------------------------------------- .roundabout-holder { list-style: none; width: 80%; height: 20em; margin: 1em auto; } .roundabout-moveable-item { height: 15em; width: 44.375em; border: 1px dotted #999; background-color:pink; cursor: pointer; } .roundabout-moveable-item img {/*画像の大きさ*/ height: 15em; width: 44.375em; .roundabout-in-focus { cursor: auto; } <body>------------------------------------------------------------------ <ul id="myRoundabout"> <li><img src="pic/block1.jpg"></li> <li><img src="pic/block2.jpg"></li> <li><img src="pic/block3.jpg"></li> </ul> <script type="text/javascript" src="common1/js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="common1/js/jquery.roundabout-1.0.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('ul#myRoundabout').roundabout({ minOpacity: 0.3, // 後ろのメニューの透明度 minScale: 0.5 // 後ろのメニューの縮小率 }); }); </script> </body> </html> -------------------------------------------------------------------------------------------- jquery roundabout http://www.fredhq.com/projects/roundabout/ 個人的にはCSSの問題かなぁと思っているのですがroundaboutの問題だったらと思ってこちらでも質問させていただきました。 画像は900px×300pxです。 本当に困ってます、よろしくおねがいします
- 締切済み
- JavaScript
お礼
ひとまず記述には問題が無いことが分かっただけでも収穫です。確認していただきありがとうございます。