Javascript 动态图像滑块解决方案滑块 .sliderContainer{ 宽度：320px；保证金：0自动； } 第一广告第一广告 {{$count=count（$slides）} 第二广告 @foreach（$key=>$val） @endforeach $（文档）.ready（函数（）{ $（'.bxslider'）.bxslider({ //有关更多选项，请参阅文档 “自动”：真 }); }); 公共职能指数（） { $slides=DB:：table（'sliders'）->get（）；返回视图（'home'）->带有（'slides'，$slides）； }_Javascript_Php_Css_Mysql

Javascript 动态图像滑块解决方案滑块 .sliderContainer{ 宽度：320px；保证金：0自动； } 第一广告第一广告 {{$count=count（$slides）} 第二广告 @foreach（$key=>$val） @endforeach $（文档）.ready（函数（）{ $（'.bxslider'）.bxslider({ //有关更多选项，请参阅文档 “自动”：真 }); }); 公共职能指数（） { $slides=DB:：table（'sliders'）->get（）；返回视图（'home'）->带有（'slides'，$slides）； }

javascript php css mysql

Javascript 动态图像滑块解决方案滑块 .sliderContainer{ 宽度：320px；保证金：0自动； } 第一广告第一广告 {{$count=count（$slides）} 第二广告 @foreach（$key=>$val） @endforeach $（文档）.ready（函数（）{ $（'.bxslider'）.bxslider({ //有关更多选项，请参阅文档 “自动”：真 }); }); 公共职能指数（） { $slides=DB:：table（'sliders'）->get（）；返回视图（'home'）->带有（'slides'，$slides）； },javascript,php,css,mysql,Javascript,Php,Css,Mysql,我的数据库中保存了四个图像。这是在滑块中显示图像，但我想使其动态。我会告诉你，图像1将显示4次，图像2将是2次，都是随机的，不是连续的。我该怎么做呢？假设您的HTML如下所示： <!DOCTYPE html> <html> <head> <title>Slider</title>  <link rel="stylesheet" type="text/cs

我的数据库中保存了四个图像。这是在滑块中显示图像，但我想使其动态。我会告诉你，图像1将显示4次，图像2将是2次，都是随机的，不是连续的。我该怎么做呢？

假设您的HTML如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>Slider</title>
    <!-- required css -->
    <link rel="stylesheet" type="text/css" href="http://localhost/blog/public/css/jquery.bxslider.css">
    <style type="text/css">
        .sliderContainer {
            width: 320px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

<div style="float:right;">
    <table style="border:3px solid #00008B;background-color:#90EE90;">
        <h2>1st Advertisement</h2>
        <tr>
            <td>
                <a id="adv" href="http://www.w3.org"><img name="noslide" id="noslide" alt="my images" height="240"
                                                          width="320"
                                                          src="http://2.bp.blogspot.com/-M5lNkr0H3Bk/VJfppu-wPxI/AAAAAAAARhs/FSZY0iVdCF4/s1600/Hand%2BPainting%2Bhd%2Bimagess%2B(3).jpg"/></a>
            </td>
        </tr>
        <tr>
            <td align="center" style="font:small-caps bold 15px georgia; color:blue;">
                <div id="fixeddiv">1st Advertisement</div>
            </td>
        </tr>

    </table>
    {{$count=count($slides)}}

    <table style="border:3px solid #00008B;background-color:#90EE90;">
        <h2>2nd Advertisement</h2>
        <div class="sliderContainer">
            <ul class="bxslider">
                @foreach($slides as $key=>$val)
                        <li><a>{{$val->id}}</a><a href="{{$val->link}}"><img src="http://localhost/blog/public/images/{{$val->image_name}}"/></a></li>

                @endforeach
            </ul>
        </div>
    </table>
</div>


<!-- required js -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('.bxslider').bxSlider({
            // see documentation for more options
            'auto': true
        });
    });
</script>
</body>
</html>

public function index()
    {
        $slides = DB::table('sliders')->get();
        return view('home')->with('slides',$slides);
    }

<ul id="container">
    <li class="slide">Slide 1</li>
    <li class="slide">Slide 2</li>
    <li class="slide">Slide 3</li>
</ul>

  $('.bxslider').bxSlider({
        'auto': true,
        onSlideBefore: function($slideElement, oldIndex, newIndex) {
          // updated newIndex here with your logic

        }
  });