1

我在脚本中使用了 Anythingslider，它适用于所有浏览器（FF、IE），但不适用于 Chrome 并停留在第一张幻灯片中。

我只是更改代码以添加可爱的栏，这是我的代码：

小部件视图：

        <link rel="stylesheet" href="<?php echo Yii::app()->request->baseUrl; ?>/css/anythingslider.css">    
        <script src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery.anythingslider.js"></script>


    <!-- Define slider dimensions here -->
    <style>


    /*** Set Slider dimensions here! Version 1.7+ ***/
/* added #slider li to make panels the same size in case "resizeContents" is false */
#slider {
    width: 715px;
    height: 230px;
    list-style: none;
    float: right;
    margin-right: -60px;
  direction: ltr;


}
.anythingSlider {
display: block;
overflow: visible !important;
position: relative;
}
#nav-slider {
    text-align: center;
    float: right;
    margin-top: -20px;

}
#nav-slider ul, #nav-slider span {
    display: inline-block;
    padding-right: 0.3px;
}
#nav-slider li {
    display: inline-block;
    padding: 1px;
}

#nav-slider a {
    display: inline-block;
    width: auto;
    height: 10px;

    padding: 8px;
    text-align: center;
    text-decoration: none;
    color: #999;
    font-size:20px;
}
#nav-slider a:hover { }
#nav-slider a.cur { }
#nav-slider a.start-stop { }
#nav-slider a.start-stop.playing {}



    </style>

        <!-- AnythingSlider initialization -->
    <script>
        // DOM Ready
        $(function(){       

$('#slider').anythingSlider({

    startText           : "<img src='<?php echo Yii::app()->baseUrl ; ?>/images/play.png'>",   // Start button text 
    stopText            : "<img src='<?php echo Yii::app()->baseUrl ; ?>/images/puss.png'>",    // Stop button text 
   forwardText         : "<img src='<?php echo Yii::app()->baseUrl ; ?>/images/prv.png'>", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image) 
   backText            :"<img src='<?php echo Yii::app()->baseUrl ; ?>/images/next.png'>" , // Link text used to move the slider back (hidden by CSS, replace with arrow image) 
    // A HTML element (jQuery Object, selector or HTMLNode) to which the controls will be appended if not null
    appendBackTo: $('#nav-slider span:eq(0)'),
    appendControlsTo: $('#nav-slider span:eq(1)'),
    appendForwardTo: $('#nav-slider span:eq(2)'),


    // Details at the top of the file on this use (advanced use)
    navigationFormatter: function(index, panel) {
        // This is the default format (show just the panel index number)
        return "" + index;
    }
});



});
    </script>






    <!-- END AnythingSlider -->


      <div class="my_footer_block_trainer" >
         <h1 style="text-align: right;">أخبار المدرب</h1>


                <div id="slider">

                <?php 

                $i=3;
                foreach($newse as $value):?>

              <?php if($i % 3==0):?>
              <div>
              <?php  endif;   ?>    
        <table  width="200px"  style=" display:inline;

margin:0;
padding:.9em;
zoom: 1;


 ">
    <tr >
        <td width="200px" style="text-align:center ;">

       <?php echo CHtml::image(Yii::app()->baseUrl."/news_images/".$value->t_img,$value->title,array('width'=>'182px','heghit'=>'182px','style'=>'display: inline-block;'));  ?></td>
    </tr>
    <tr>
        <td width="200px" style="text-align:right ;">

<div class="title" style="display: inline-block;"> <?php echo  CHtml::link($value->title.$i,array('site/news','id'=>$value->news_id));?></div>
</td>
    </tr>
    <tr>
        <td width="200px" style="text-align:center ;">
        <div class="date" style="display: inline-block;">
                <div class="date" style="display: inline-block;"><?php echo $value->p_date ; ?></div>
        <p>&nbsp;</td>
    </tr>
</table>



            <?php $i++;?>  
              <?php if($i % 3 ==0):?>
              </div> 

              <?php   endif;   ?>


            <?php endforeach ;?>
                    </div>     
          <br />
           <?php  echo CHtml::link("مركز الاخبار",array('site/newslist'),array('class'=>'reg-now')); ?>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <div id="nav-slider">
    <span></span>
    <span></span>
    <span></span>

</div>
<br /><br />

            </div>

这个测试链接： http ://t.illaf.net/new/trainers/117

4

1 回答 1

1

滑块卡在第一张幻灯片上的原因是因为它被设置为使用 LTR 页面。

因此，要使其与 RTL 页面正常工作，您需要将playRtl选项设置为true( docs )。这个选项做了几件事。

  1. 将rtl类名添加到外部的 AnythingSlider 包装器，然后应用以下 css（第一部分将修复滑块；其余部分是可选的，可以从anythingslider.css 文件中删除）

    /* slider autoplay right-to-left */
.anythingSlider.rtl .anythingWindow {
    direction: ltr;
    unicode-bidi: bidi-override;
}
/* move nav link group to left */
.anythingSlider.rtl .anythingControls ul { float: left; }
/* reverse order of nav links */
.anythingSlider.rtl .anythingControls ul a { float: right; }
/* move start/stop button - in case you want to switch sides */
.anythingSlider.rtl .start-stop { /* float: right; */ }

  2. 在旧版本的 AnythingSlider 中，滑块箭头也会反转图像滑动的方向，包括幻灯片；但这最近发生了变化（参见问题 #526）。

这个选项仍然需要一些工作（再次，参见上面链接的问题），所以如果你想做的只是让滑块工作而不改变箭头方向或幻灯片，那么使用这个代码只应用类名（演示）

$('#slider').anythingSlider({
    playRtl: false,
    onInitialized: function(e, slider) {
        slider.$wrapper.addClass('rtl');
    }
});
于 2013-05-13T13:49:12.963 回答