おせわになります。
画面の左と右に現れる矢印を押すと矢印が消えてしまう。
左や右の矢印を何回押しても矢印が消えないように改善したく試しましたができません。
#ためしたこと
矢印の設定が以下CSSで実施されているところは理解できましたが設定方法がわかりませんでした。
CSS上またはHTML上でページ数によらず表示させるやり方がわかりません。
thisSlide.append('<a href="javascript:void(0);" class="sdPrev"></a><a href="javascript:void(0);"
// StageSlide stageSlide.each(function(){ var thisSlide = $(this), chdPanel = thisSlide.find('.slidePanel'), chdPanelLength = chdPanel.length; chdPanel.eq('0').addClass('activePanel').end().wrapAll('<div class="slideWrap"></div>'); thisSlide.append('<a href="javascript:void(0);" class="sdPrev"></a><a href="javascript:void(0);" class="sdNext"></a><div class="slideNav"></div>'); var thisWrap = thisSlide.find('.slideWrap'), thisPrev = thisSlide.find('.sdPrev'), thisNext = thisSlide.find('.sdNext'), thisPn = thisSlide.find('.slideNav');
.stageSlide .sdPrev { left: 80px; background: transparent url(../img/slide_prev.png) no-repeat left top; } .stageSlide .sdNext { right: 80px; background: transparent url(../img/slide_next.png) no-repeat left top; }
#表示させたい画像
左右のNEXT/BACKボタンはスクリプト側から生成するようにしているのでHTMLには記述してません。
フォルダ構成
index.html img css common.css
#css
@charset "utf-8"; /* ======================================= CommonElements ======================================= */ body { font-size: 100%; line-height: 160%; font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "MS Pゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif; color: #000; text-align: center; background: #fff; position: relative; overflow: hidden; visibility: hidden; } a:link { text-decoration:nderline; color: #0000ff;} a:visited { text-decoration:nderline; color: #0000ff;} a:active { text-decoration:nderline; color: #0000ff;} a:hover { text-decoration:none; color: #0000ff;} p { padding: 0 0 30px 0; } h1 { top: 0; left: 0; padding: 10px 0; width: 100%; background: #000; color: #fff; font-size: 12px; font-weight: bold; text-align: center; position: absolute; } h2 { bottom: 0; left: 0; padding: 30px 0; width: 100%; font-size: 12px; position: absolute; } /* #container --------------------------- */ #container { top: 0; left: 0; width: 100%; position: absolute; z-index: 1; } /* .stageBase --------------------------- */ .stageBase { width: 100%; position: relative; overflow: hidden; } .stageBase .fieldWrap { padding: 100px 0 0 0; text-align: center; } #stage1 {background:#fff;} #stage2 {background:#eee;} #stage3 {background:#ddd;} #stage4 {background:#ccc;} #stage5 {background:#bbb;} /* .stageSlide --------------------------- */ .stageSlide { position: relative; overflow: hidden; visibility: hidden; } .stageSlide .slideWrap { top: 0; left: 0; position: absolute; overflow: hidden; } .stageSlide .slideWrap:before, .stageSlide .slideWrap:after { content: " "; display: table; } .stageSlide .slideWrap:after {clear: both;} .stageSlide .slideWrap {*zoom: 1;} .stageSlide .slidePanel { float: left; overflow: hidden; } .stageSlide .sdPrev, .stageSlide .sdNext { margin-top: -25px; top: 50%; width: 50px; height: 50px; display: block; position: absolute; z-index: 99; } .stageSlide .sdPrev { left: 80px; background: transparent url(../img/slide_prev.png) no-repeat left top; } .stageSlide .sdNext { right: 80px; background: transparent url(../img/slide_next.png) no-repeat left top; } .stageSlide .slideNav { bottom: 70px; left: 0; width: 100%; height: 15px; text-align: center; position: absolute; z-index: 98; } .stageSlide .slideNav a { margin: 0 5px; width: 15px; height: 15px; background: transparent url(../img/nav.png) no-repeat center center; display: inline-block; overflow: hidden; } .stageSlide .slideNav a.pnActive { background: transparent url(../img/nav_acv.png) no-repeat center center; } /* #pageNav --------------------------- */ #pageNav { top: 0; right: 25px; width: 15px; text-align: center; position: fixed; z-index: 2; } #pageNav ul { width: 15px; display: block; } #pageNav ul li { padding-bottom: 5px; width: 15px; height: 15px; display: block; overflow: hidden; } #pageNav ul li a { width: 15px; height: 15px; background: transparent url(../img/nav.png) no-repeat center center; display: block; } #pageNav ul li.activeStage a { background: transparent url(../img/nav_acv.png) no-repeat center center; } /* #pageDown --------------------------- */ #pageDown { bottom: 0; left: 0; width: 100%; height: 40px; text-align: center; position: fixed; overflow: hidden; z-index: 3; } #pageDown a { margin: 0 auto; width: 30px; height: 30px; background: transparent url(../img/next_arw.png) no-repeat center center; display: block; }
宜しくお願いします。
あなたの回答
tips
プレビュー