这里使用下jssor的轮播,github地址.优势是支持手动滑动,响应式和键盘左右监听.很人性.

一开始是这样的任务

改变光标,一开始为可移动的手势,改为默认的鼠标
```
 $("#case_big_slider div").css("cursor","default");
```

宽度100%,调整左右两图显示的大小

 //设置屏幕宽度为document宽度
 jssor_slider1.$ScaleWidth(Math.min(parentWidth, $(document).width()));

接下来设置整个轮播图的宽高比,一开始的div设置

 <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 800px;
 height: 300px; overflow: hidden;">
     <!-- Slides Container -->
     <div u="slides" style="position: absolute; left: 0px; top: 0px; width: 800px; height: 300px;
     overflow: hidden;">
         <div><img u="image" src="../Assets/Images/Case_Slider_01.png" /></div>
         <div><img u="image" src="../Assets/Images/Case_Slider_01.png" /></div>
         <div><img u="image" src="../Assets/Images/Case_Slider_01.png" /></div>
         <div><img u="image" src="../Assets/Images/Case_Slider_01.png" /></div>
         <div><img u="image" src="../Assets/Images/Case_Slider_01.png" /></div>
         <div><img u="image" src="../Assets/Images/Case_Slider_01.png" /></div>

     </div>

应该很少在div设置固定宽高的,研究发现,其实起的是设置宽高比作用.多少px是无所谓的.

这里由于我要的效果是在1440时,高度为381,所以width设置为1440,height设置为381.就完成了设置宽高比.

该框架默认,左右两边的图只显示100px,但我需要显示为屏幕的百分27%

 $ParkingPosition: $(document).width() * 0.27,

更改左右两个图片位置和显示

原来

 <span u="arrowleft" class="jssora13l glyphicon glyphicon-menu-left" style="top: 123px; left: 30px;">

我要改为屏幕边向左右20%,和改变显示图标

 <span u="arrowright" class="jssora13r glyphicon-right" style="top: 123px; right: 20%;">
         <img  src="../Assets/Images/Slider_Line.png"/>
 </span>

最终效果

附录原代码

原来的配置文件.

 jQuery(document).ready(function ($) {
    var options = {
        $AutoPlay: true,

        $PauseOnHover: 1,                               //[Optional] Whether to pause when mouse over if a slideshow is auto playing, default value is false

        $ArrowKeyNavigation: true,                          //Allows arrow key to navigate or not, default value is true
        $SlideWidth: 600,                                   //[Optional] Width of every slide in pixels, the default is width of 'slides' container
        //$SlideHeight: 300,                                  //[Optional] Height of every slide in pixels, the default is width of 'slides' container
        $SlideSpacing: 0,                                   //Space between each slide in pixels
        $DisplayPieces: 2,                                  //Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
        $ParkingPosition: 100,                                //The offset position to park slide (this options applys only when slideshow disabled).

        $ArrowNavigatorOptions: {                       //[Optional] Options to specify and enable arrow navigator or not
            $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
            $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
            $AutoCenter: 2,                                 //[Optional] Auto center arrows in parent container, 0 No, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
            $Steps: 1                                       //[Optional] Steps to go for each navigation request, default value is 1
        }
    };

    var jssor_slider1 = new $JssorSlider$("slider1_container", options);

    //responsive code begin
    //you can remove responsive code if you don't want the slider scales while window resizes
    function ScaleSlider() {
        var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
        if (parentWidth)
            jssor_slider1.$ScaleWidth(Math.min(parentWidth, 800));
        else
            window.setTimeout(ScaleSlider, 30);
    }
    ScaleSlider();

    $(window).bind("load", ScaleSlider);
    $(window).bind("resize", ScaleSlider);
    $(window).bind("orientationchange", ScaleSlider);

K

Jssor轮播图的使用和修改

附录原代码

Comments