详情页-产品图片轮播效果

### 在app/index/Article.php文件添加下面代码

------------
```php
  $pics=db('pics')->where('aid',$aid)->select();
  $this->assign(['pics'=>$pics]);
```

### JS引用必须

------------

`<script src="js/jquery.min.js"></script>`

### HTNL代码效果

------------

```html
<div id="outBox">
    <div class="leftBox">
        <div class="normalBox w">
            <div class="w" id="n"><img src="img/normal1.jpg"></div>
            <div class="w"><img src="img/normal2.jpg"></div>
            <div class="w"><img src="img/normal3.jpg"></div>
            <div class="w"><img src="img/normal4.jpg"></div>
            <div class="w"><img src="img/normal5.jpg"></div>
            <div class="moveBox"></div>
        </div>
        <div class="botBox">
            <ul>
                <li class="bord"><img src="img/small1.jpg"></li>
                <li><img src="img/small2.jpg"></li>
                <li><img src="img/small3.jpg"></li>
                <li><img src="img/small4.jpg"></li>
                <li><img src="img/small5.jpg"></li>
            </ul>
        </div>
    </div>
    <div class="magBox">
        <ul>
            <li class="m"><img src="img/normal1.jpg"></li>
            <li><img src="img/normal2.jpg"></li>
            <li><img src="img/normal3.jpg"></li>
            <li><img src="img/normal4.jpg"></li>
            <li><img src="img/normal5.jpg"></li>
        </ul>
    </div>
</div>
```
### css代码

------------
```css
#outBox{
	width: 1002px;
	height: 540px;
	margin: 2px auto;
}
.w{
	width: 450px;
	height: 450px;
}
.leftBox{
	width: 450px;
	height: 540px;
	float: left;
}
.normalBox{
	overflow: hidden;
	position: relative;
	border: 1px solid #f2f2f2;
}
.normalBox .w{
	display: none;
}
.botBox{
	width: 100%;
	height: 90px;
	background: white;
	overflow: hidden;
}
.botBox ul li{
	float: left;
	width: 54px;
	height: 54px;
	border: 2px solid #fff;
	border-radius: 5px;
	margin-left: 26.5px;
	opacity: 0.5;
}
.bord{
	border-color: #e4393c !important;
	opacity: 1 !important;
}
.moveBox{
	width: 200px;
	height: 200px;
	background: rgba(222,0,0,0.4);
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	cursor: move;
}
.magBox{
	width: 540px;
	height: 540px;
	border: 1px solid #f2f2f2;
	position: relative;
	float: left;
	overflow: hidden;
	display: none;
}

.magBox ul li{
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}
#n,.m{
	display: block !important;
}
.box{
	width: 110px;
	margin: auto;
}
```

### JS代码

------------

```javascript
<script>
    $(function () {
        var sdBoxW = $('.moveBox').css('width');
        sdBoxW = parseInt(sdBoxW);//移动层的宽度
        var magBoxW = $('.magBox').css('width');
        magBoxW = parseInt(magBoxW);//图片放大层的宽度
        var normalBoxW = $('.normalBox').css('width');
        normalBoxW = parseInt(normalBoxW);//事件绑定层的宽度
        var num = 0;//存放下标
        //找出放大图片的比例(核心)
        var scale = magBoxW/sdBoxW;
        //移入normalBox盒子
        $('.normalBox').hover(function () {
            $('.moveBox').css('display','block');
            $('.magBox').css('display','block');
        },function () {
            $('.moveBox').css('display','none');
            $('.magBox').css('display','none');
        });
        //3、移入leftBox层
        $('.leftBox').mouseover(function () {
            //给放大的图片和图片层设置宽度；
            $('.magBox ul li img').css('width',scale*normalBoxW+'px');
            $('.magBox ul li').css({'width':scale*normalBoxW+'px','height':scale*normalBoxW+'px'})
        });
        //4、设置放大倍数
        var n = 1;
        function sty() {
            $('.moveBox').css({'width':200/n+'px','height':200/n+'px'});
            $('.multiple').html(n);
            scale = magBoxW/(sdBoxW/n);
        }
        $('.btn1').click(function () {
            n ++;
           sty()
        });
        $('.btn2').click(function () {
            if (n==1){
                return;
            } else {
                n --;
                sty()
            }
        }) ;
        //1、移入缩小图关联
        $('.botBox ul li').attr('index',function (i,e) {
            return i;
        });
        $('.botBox ul li').mouseover(function () {
            if ($(this).attr('class')=='bord'){
                return;//跳过第一个
            }else{
                $(this).attr('class','bord').siblings().removeAttr('class');
                var index = $(this).attr('index');
                //联动normal和magBox中的图片
                $('.normalBox .w').eq(index).attr('id','n').siblings().removeAttr('id');
                $('.magBox ul li').eq(index).attr('class','m').siblings().removeAttr('class');
                num = index;
            }
        });
        //2、鼠标在移动层移动
        $('.normalBox').mousemove(function (e) {
             var offset = $(this).offset();
            var X = e.pageX-offset.left-$('.moveBox').width()/2;
            var Y = e.pageY-offset.top-$('.moveBox').height()/2;
            if (X<=0){
                X=0;
            }else if(X>$(this).width()-$('.moveBox').width()){
                X = $(this).width()-$('.moveBox').width();
            }
            if (Y<=0){
                Y=0;
            }else if(Y>$(this).height()-$('.moveBox').height()){
                Y = $(this).height()-$('.moveBox').height();
            }
            $('.moveBox').css('left',X+'px');
            $('.moveBox').css('top',Y+'px');
            $('.magBox ul li').eq(num).css('left',-X*scale+'px');
            $('.magBox ul li').eq(num).css('top',-Y*scale+'px');
        });
    })
</script>
```

### 我们后台使用只需修改`HTML` 代码

------------

```html
  <div id="outBox">
                    <div class="leftBox">
                        <div class="normalBox w">
                            {volist name="pics" id="vo" key="k" offset="0" length='5'}
                            <div class="w" {if condition="$k eq 1"}id="n"{/if}><img src="{$vo.pic}"></div>
                            {/volist}
                            <div class="moveBox"></div>
                        </div>
                        <div class="botBox">
                            <ul>
                                {volist name="pics" id="vo" key="k" offset="0" length='5'}
                                <li  {if condition="$k eq 1"} class="bord"{/if} ><img src="{$vo.pic}"></li>
                                {/volist}

</ul>
                        </div>
                    </div>
                    <div class="magBox">
                        <ul>
                            {volist name="pics" id="vo" key="k" offset="0" length='5'}
                            <li {if condition="$k eq 1"} class="m"{/if} ><img src="{$vo.pic}"></li>
                            {/volist}
                        </ul>
                    </div>
                </div>

```

速建时代TPCMS管理系统

详情页-产品图片轮播效果