• 締切済み

javascriptの修正

現在 NEXT ボタンと BACK ボタンつきのループする画像を作ろうとしておりますが、 previous:function( manual , item){ this.currentNo += (this.currentNo < this.slides.length-1) ? 1 : (1 - this.slides.length); this.onProcessing( item, manual, 0, this.maxSize ) .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this ) .finishFx( manual ); }, next:function( manual, item ){ this.currentNo += this.currentNo > 0 ? -1 : this.slides.length - 1; this.onProcessing( item, manual ) .fxStart( this.currentNo, this.getObjectDirection(this.maxSize ), this ) .finishFx( manual ); }, previous:functionとnext:functionに判断条件と fxStart:function( index, obj, currentObj ){ if( this.settings.direction == 'opacity' ) { $(this.slides).stop().animate({opacity:0}, {duration: this.settings.duration, easing:this.settings.easing} ); $(this.slides).eq(index).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} ); }else { this.wrapper.stop().animate( obj, {duration: this.settings.duration, easing:this.settings.easing} ); } return this; }, jumping:function( no, manual ){ this.stop(); if( this.currentNo == no ) return; var obj = eval("({'"+this.directionMode[0]+"':-"+(this.maxSize*no)+"})"); this.onProcessing( null, manual, 0, this.maxSize ) .fxStart( no, obj, this ) .finishFx( manual ); this.currentNo = no; }, のanimateを修正すると言うことまでは分かりましたが、それ以上どのようにして修正するのか分かっておりません。ちなみにjavascriptはもちろんプログラミング自体はド素人です。 どなたかお力をお貸し下さいよろしくお願い致します。 ループさせたい部分のHTMLを添付致します。 <!-- サムネイル --> <div class="lof-main-outer"> <ul class="lof-main-wapper"> <li><img src="1.png" alt="" /></li> <li><img src="2.png" alt="" /></li> <li><img src="3.png" alt="" /></li> <li><img src="4.png" alt="" /></li> <li><img src="5.png" alt="" /></li> <li><img src="6.png" alt="" /></li> </ul> </div> <!-- サムネイルの影 --> <div class="lof-navigator-wapper"> <div onclick="return false" href="" class="lof-next">Next</div> <div class="lof-navigator-outer"> <ul class="lof-navigator"> <li class="shadow1"><img src="1s.png" alt="" /></li> <li class="shadow2"><img src="2s.png" alt="" /></li> <li class="shadow3"><img src="3s.png" alt="" /></li> <li class="shadow4"><img src="4s.png" alt="" /></li> <li class="shadow5"><img src="5s.png" alt="" /></li> <li class="shadow6"><img src="6s.png" alt="" /></li> </ul> </div> <div onclick="return false" href="" class="lof-previous">Previous</div> </div>

みんなの回答

回答No.1

ネクスト、バックの機能だけなら、 jqueryのプラグインありますよ。 http://www.0yen-coding.com/d/2011/06/jquery-imgnumber-js/

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • liの数によってulの横幅を動的に設定したい

    以下のようなhtmlがあったとして、ul.imageの幅をliの数によって動的に設定したいのですが、 jQueryで指定する場合どう書けばいいのかご教授下さい。 liはfloatしているものとします。 ====================================================== <div class="block"> <ul class="image"> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> </ul> </div> <div class="block"> <ul class="image"> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> <li><img src="hoge.jpg" alt="" /></li> </ul> </div> <div class="block"> <ul class="image"> <li><img src="hoge.jpg" alt="" /></li> </ul> </div> ...以下、いくつも.blockが続きます

  • img画像表示を短くしたい

    lemmon-slider-0.2  win8.1 pro 下記 img 45個 記述しています。表示が長いので、短くしたい。500個の場合もあります。 ひまわり美術館 http://esd827.web.fc2.com/himawari/index.html 詳細 IE11 F12開発者ツール 参照 <div id="nav"> <div class="wrap"> <div id="container"> <div class="wrap"> <div id="slider3" class="slider"> <ul> <li><img src="images/01.jpg" alt=""></li> <li><img src="images/02.jpg" alt=""></li> <li><img src="images/03.jpg" alt=""></li> ----- cut -------- <li><img src="images/43.jpg" alt=""></li> <li><img src="images/44.jpg" alt=""></li> <li><img src="images/45.jpg" alt=""></li> </ul> </div>

  • $(this)を変数に入れないと動作しない理由

    「WebデザイナーのためのjQuery入門」という書籍でjQueryの勉強をしています。 リンク先 http://gihyo.jp/book/2012/978-4-7741-4856-4 この書籍の中のロールオーバーボタンのスクリプトで質問があります。 以下のスクリプトは書籍に載っているスクリプトですが、これにより画像ボタンにポインタがのる・のらないでボタン画像が切り替わります。 --------------- $(function(){ $('.rollover').each(function(){ var a = $(this); var img = a.find('img'); var src_off = img.attr('src'); var src_on = src_off.replace('_off','_on'); $('<img />').attr('src','src_on'); a.hover(function(){ img.attr('src',src_on); },function(){ img.attr('src',src_off); }); }); }); --------------- htmlは以下になります。※<body>内のみ抜粋 --------------- <body> <div class="header"> <ul class="menu"> <li><a href="index.html" class="rollover"><img src="menu01_off.png" alt="Home"></a></li> <li><a href="index.html" class="rollover"><img src="menu02_off.png" alt="Products"></a></li> <li><a href="index.html" class="rollover"><img src="menu03_off.png" alt="Company"></a></li> </ul> </div> </body> --------------- 質問したいのは、スクリプトの上から3行目の「var a = $(this);」です。 var a = $(this); var img = a.find('img'); 上記を、 var img = $(this).find('img'); とした場合、なぜか画像が切り替わりません。 どちらも同じような気がするのですが、不具合の原因が分かりません。 お分かりの方がいっらしゃいましたら、お手数ですがご回答よろしくお願いいたします。

  • IE7で表示すると画像に隙間があきます。

    WEBサイトを作っているのですがIE7で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか? HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }

    • ベストアンサー
    • HTML
  • wordpressで

    wordpressを使ってブログを作っています。しかしcssを読み込んでくれません。 index.phpの内容は <!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="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?><?php wp_title(': '); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats please --> <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?>(RSS 2.0)" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="<?php bloginfo('name'); ?>(Atom)" href="<?php bloginfo('atom_url'); ?>" /> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" /> </head> <body> <div id="rap"> <div id="header"> <div id="headerimg"> <h1><a href="<?php echo get_settings('home'); ?>/"><img src="img/title.gif" alt="芦澤治療院はやさしいマッサージで施術いたします。" /></a></h1> </div> <div id="headernavi"> <div id="navi"> <ul> <li><a href="#"><img src="img/link.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/sitemap.gif" alt="" border="0" /></a></li> <li><a href="#"><img src="img/inquary.gif" alt="" border="0" /></a></li> </ul></div> <div id="size"> <img src="img/sizeword.gif" alt="" /> <a href="#"><img src="img/sizesmall.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizemiddle.gif" alt="" border="0" /></a> <a href="#"><img src="img/sizebig.gif" alt="" border="0" /></a></div> </div> </div> <div id="navcontainer"> <ul> <li class="news"><a href="#">ニュース</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="work"><a href="#">施術の案内</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="stuff"><a href="#">スタッフ</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="qa"><a href="#">よくある質問</a></li> <li class="cut"><img src="img/linecut.gif" alt="" /></li> <li class="inq"><a href="#">お問い合わせ</a></li> </ul> </div> <!-- end header --> <div id="content"> <div id="main"> <?php if(have_posts()):while(have_posts()):the_post();?> <div class="post"> <h2><?php the_title();?></h2> <?php the_content();?> <p class="postmetadate"> <?php the_time('Y年m月d日 H:i')?>|<?php comments_popup_link ('コメント(1)','コメント(2)','コメント(%)');?> </p> </div> <?php comments_template();?> <?php endwhile;endif;?> </div> </div> </div> </body> </html> です。 ディレクトリ構造はindex.htmlとstyle.cssは同じフォルダにあります。

    • 締切済み
    • PHP
  • jQueryでappleっぽい画像ギャラリー設置したいです

    http://www.skuare.net/test/jAppleGal.htmlで紹介されていた画像ギャラリーを私のホームページにも組み込みたいと思っているのですが、CSS・JAVAを最近本を買ったりして勉強しはじめた初心者なだけに、紹介されている設置方法だけでは理解できなく質問させていただきました。 (1)とりあえずjQueryからjquery.jsをダウンロードはしましたが、こjquery.jsはどこにどうすればいいのでしょうか? (2) <div id="main"> <div id="gallery"> <div id="slides"> <div class="slide"><img src="画像パス1" width="920" height="400" /></div> <div class="slide"><img src="画像パス2" width="920" height="400" /></div> <div class="slide"><img src="画像パス3" width="920" height="400" /></div> <!-- 画像にはwidthとheightを指定します --> </div> <div id="menu"> <ul> <li class="fbar"> </li> //区切り線用 <li class="menuItem"><a href=""><img src="サムネイル画像パス1" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス2" /></a></li> <li class="menuItem"><a href=""><img src="サムネイル画像パス3" /></a></li> </ul> </div> </div> </div> このコードはhtmlのheadに組み込むのでしょうか?それともbodyでしょうか? (3) 次にCSSを記述します。 特に難しい部分はないので、cssを見ていただくとして・・・ とありますが、リンク先のcssはいじらなくてもそのまま使用すればいいのでしょうか? 最後に、jQueryを記述すれば完成です。 $(document).ready(function(){ var totWidth=0; var positions = new Array(); $('#slides .slide').each(function(i){ positions[i]= totWidth; totWidth += $(this).width(); if(!$(this).width()) { alert("Please, fill in width & height for all your images!"); return false; } }); $('#slides').width(totWidth); $('#menu ul li a').click(function(e){ $('li.menuItem').removeClass('act').addClass('inact'); $(this).parent().addClass('act'); var pos = $(this).parent().prevAll('.menuItem').length; $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450); e.preventDefault(); }); $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact'); }); とありますが、これはどこに組み込めばいいのでしょうか?また何も触らなくてもいいのでしょうか? 他にも分からないところだらけなので、立て続けに質問させていただくと思いますが、お手数おかけしますが力を貸してください。 よろしく御願いいたします。

  • 同じjqueryを2つ並べて動かしたいけど動かない

    いつもお世話になっています。 http://39kn.com/2011/06/05/5528/ のものを横に並べて動かしたいのですが下のソースの書き方をすると手前だけ動いて、2つめは動きません。 どうすれば動きますか?? 理想は■が1つのスライダーデモの部分だとすると、■■と横に並ぶ形で使いたいです。 <body> <div class="1"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン&レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div><!-- /scroller --> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div><!-- /Vertical --> </div> <div class="2"> <div id="scroller"> <div class="scroller-title"> <span class="left">ドメイン&レンタルサーバー</span> <span class="right"> <div id="controller"> <div id="stop_scroll_cont"><a id="stop_scroll"><img src="images/stop.png" align="absmiddle" /></a> Stop Scroll</div> <div id="play_scroll_cont"><a id="play_scroll"><img src="images/play.png" align="absmiddle"/></a> Play Scroll</div> </span> </div> </div><!-- /scroller --> <div id="Vertical"> <ul id="TickerVertical"> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> <li><img src="photo" width="450" height="150" /></li> </ul> </div><!-- /Vertical --> </div> </body> </html>

  • cssスプライト positionが効かない

    現在サイトを制作中で、グローバルナビのcssスプライトでつまずいてしまいました。 background-positionがなぜか効きません、、、、。 htmlとcssのチェックをしていただけないでしょうか?? どなたか親切なかた宜しくお願い致します!! <div id="gnav"> <ul> <li class="gnav_1"><a href="#"><img src="images/gnav_home.png" width="164" height="60" alt="ホーム" /></a></li> <li class="gnav_2"><a href="#"><img src="images/gnav_intro.png" width="164" height="60" alt="初めての方へ" /></a></li> <li class="gnav_3"><a href="#"><img src="images/gnav_staff.png" width="164" height="60" alt="スタッフ紹介" /></a></li> <li class="gnav_4"><a href="#"><img src="images/gnav_price.png" width="164" height="60" alt="料金" /></a></li> <li class="gnav_5"><a href="#"><img src="images/gnav_access.png" width="164" height="60" alt="アクセス" /></a></li> <li class="gnav_6"><a href="#"><img src="images/gnav_q&a.png" width="164" height="60" alt="よくあるご質問" /></a></li> </ul> </div><!--gnav--> --------------------------------css------------------------------ #gnav { overflow: hidden; } #gnav ul { margin: 24px 0 0 7px ; } #gnav ul li { float: left; width: 164px; height:60px; background: url(images/gnav_on.png) 0 0 no-repeat; } #gnav ul li a { display:block; } .gnav_2 { background-position: -164px 0; } .gnav_3 { background-position: -328px 0; } .gnav_4 { background-position: -492px 0; } .gnav_5 { background-position: -656px 0; } .gnav_6 { background-position: -820px 0 ; } #gnav ul li a:hover img{ visibility:hidden; }

    • ベストアンサー
    • CSS
  • jCarouselLiteループ時の属性値取得

    jCarouselLiteプラグインにてカルーセルパネルをカスタマイズしています。 IE9/Safari5/FireFox12でテストしています。 jquery-1.7.2.min.js jcarousellite_1.0.1.js 独自スクリプトでクリックされたときの<a>のhref属性値を取得できるかアラート表示させて確認してみると <ul></ul>に囲まれた分5つの1ループ目はそれぞれ取得できるのですが、2ループ目以降の<a>のhref属性が取得できません。 現在、無限ループするように設定し、それはできています。 =======独自スクリプト========== $(function() { $("#carousel .anyClass a").click(function(){   alert($(this).attr("href"));//←2周目のhref属性が取得できない }); }); ============================ =======htmlソース=========== <div id="carousel"> <div class="anyClass"> <ul> <li><a href="img/photo1.jpg"><img src="img/photo1_thum.jpg" alt="" class="01" /></a></li> <li><a href="img/photo2.jpg"><img src="img/photo2_thum.jpg" alt="" class="02" /></a></li> <li><a href="img/photo3.jpg"><img src="img/photo3_thum.jpg" alt="" class="03"/></a></li> <li><a href="img/photo4.jpg"><img src="img/photo4_thum.jpg" alt="" class="04"/></a></li> <li><a href="img/photo5.jpg"><img src="img/photo5_thum.jpg" alt="" class="05"/></a></li> </ul> </div> </div> ============================ お手数ですがご教授ください。お願いします。

  • imgタグとレスポンシブについて

    imgタグとレスポンシブについて imgタグなどのようなインライン要素は、 ブロック要素で囲まないといけないと聞いたのですが、下記のような形でナイトいけないのですよね 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? <div class="copyright"> <img src="img/base/copyright.png" alt="のコピーライト" width="382" height="24" /> </div> 下記のように直前にブロック要素で囲まれていないといけないのでしょうか? それとも直接ブロック要素で囲まれていなくてもずっと先にブロック要素があってそこから入れ子になっていればいいのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td> ~ 下記はだめですよね。 <H2>画像</H2> <IMG src="img/img0.jpg" width="120" height="90" alt="写真" border="0" align="top"> 文字が上揃えになります<BR> <BR> <IMG src="img/img1.jpg" width="120" height="90" alt="写真" border="2"> 枠の太さを2にしています<BR> <BR> <IMG src="img/img2.jpg" w また、もうひとつになってしまうのですが、下記のimg をフルイドイメージにしたい場合は画像のたて、横はば割る直前のブロック要素のtdのwidthと縦幅(クロームのf12で出てくるpx)で出した%を ul.futtnavi+img { width: 67.3%; height: 18%; } のように入れれば良いのですよね。 tdのサイズは567px,133px imgは382、24です。 うまくぴったりのサイズになりません。 スマホでは消えます。 またtdの中の内容が増えた場合毎回計算しなおさないといけないのでしょうか? ~ <td class="copyright"> <address> 〒***-*** **県**市**町 1-5-10 <span>TEL.0977-84-****</span> </address> <ul class="futtnavi"> <ul class="futtnavi"> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> <li><a href="http://index.html"><img src="img/base/sitemap.png" alt="サイトマップ" width="101" height="18" /></a></li> </ul> <img src="img/base/copyright.png" alt="会のコピーライト" width="382" height="24" /> </td>

    • ベストアンサー
    • CSS