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