通过jquery损坏的旋转木马添加css样式

Adding css style by jquery corrupt carousel

本文关键字：添加 css 样式 旋转木马 jquery 损坏 通过      更新时间：2023-09-26

以下是所有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标签的内容不会消失，它会一直显示。如果我删除添加阴影、边框等的代码，它会同时显示一个li内容。为什么？如何在不损坏旋转木马的情况下将我的所有风格添加到每个图像中？

您可能需要编辑插件，并查看它如何/在哪里生成元素的渲染，并附加您的新样式。有些插件有一些属性可以传递给您进行自定义，有些则没有。

相关文章：