1

すべての JavaScript コードは次のとおりです。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="assets/templates/default/_scripts/jquery.innerfade.js"></script>
<script type="text/javascript">
    $(document).ready( function(){
        $('.rotation ul').addClass('image_rotation');
        $('.image_rotation').css("display","block");
        $('.image_rotation').innerfade({
            speed: 'slow',
            timeout: 10000,
            type: 'sequence'
        });
    });
</script>
<script type="text/javascript">
 var save_url = "background-font-size-save.html"
 $(document).ready(function () {
  /*  Images: rotate, frame, shadow  */
  $('.rotation ul li img').each(function() {
    if ($(this).is(":first-child")) {
      var m_left=0;
      var m_top=0;
    }
    else {
      var m_left=0;
      var m_top=0;
      m_left = parseInt($(this).prev().attr("width")) + parseInt($(this).prev().css('margin-left'));
      if (parseInt(m_left)+parseInt($(this).attr("width")) > 430) {
        m_left=0;
        m_top=250-parseInt($(this).attr("height"));
      }
    }
    var r_rand = Math.floor(Math.random() * 10) - 5;
    $(this).css({'border':'5px #ffffff solid','border-radius':'10px','transform':'rotate('+r_rand+'deg)','-moz-transform':'rotate('+r_rand+'deg)','-webkit-transform':'rotate('+r_rand+'deg)','-ms-transform':'rotate('+r_rand+'deg)','box-shadow':'4px 4px 10px -3px #000000','position':'absolute','margin':m_top+'px 0 0 '+m_left+'px'});
  });
  /*  images end  */
  background(5);
  $('html').css('font-size', 14);
  var originalFontSize = $('html').css('font-size');
 });
 function background(n) { $('.wrap').css("background","url(assets/templates/default/images/bg"+n+".jpg)"); $.ajax({ type: "POST", url: save_url, data: { background: n } }); return false; }
 function big_font() {
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*1.1;
  $('html').css('font-size', newFontSize);
  $.ajax({ type: "POST", url: save_url, data: { font_size: newFontSize } });
  return false;
 }
 function small_font() {
  var currentFontSize = $('html').css('font-size');
  var currentFontSizeNum = parseFloat(currentFontSize, 10);
  var newFontSize = currentFontSizeNum*0.9;
  $('html').css('font-size', newFontSize);
  $.ajax({ type: "POST", url: save_url, data: { font_size: newFontSize } });
  return false;
 }
</script>

回転したり、境界線を追加したり、影を付けたりしたい画像がほとんどありません。しかし、私は jquery プラグインを使用して li コンテンツをローテーションしています。Html は次のようになります。

<div class="rotation">
 <ul>
  <li><img src=".." width=".." height=".." /></li>
  <li><img src=".." width=".." height=".." /><img src=".." width=".." height=".." /></li>
  <li><img src=".." width=".." height=".." /><img src=".." width=".." height=".." /><img src=".." width=".." height=".." /></li>
 </ul>
</div>

私が抱えている問題は、このjqueryコードを使用して、各画像の影に追加、回転、境界線を作成すると、各liタグのコンテンツが消えず、常に表示されることです。影や境界線などを追加するコードを削除すると、同時に1つのコンテンツが表示されます。何故ですか？カルーセルを破損することなく、すべてのスタイルを各画像に追加するにはどうすればよいですか?

4

1 に答える 1

0

プラグインを編集して、要素のレンダリングを生成する方法と場所を探し、新しいスタイルを追加する必要がある場合があります。一部のプラグインには、カスタマイズのために渡すことができる属性があり、そうでないものもあります。

于 2013-03-08T17:30:50.140 に答える