作者:什锦平 | 来源:互联网 | 2023-09-25 15:40
效果如下
1.HTML部分
<div class="four_box">
<div class="cont1200">
<div class="picScroll-left">
<div class="hd">
<a class="next"><img src="__IMG__/index/white_right.png" alt="">a>
<a class="prev"><img src="__IMG__/index/white_left.png" alt="">a>
div>
<div class="bd">
<ul class="picList">
<li>
<div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img4.png" />a>div>
li>
<li>
<div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img5.png" />a>div>
li>
<li>
<div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img6.png" />a>div>
li>
<li>
<div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img4.png" />a>div>
li>
<li>
<div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img5.png" />a>div>
li>
<li>
<div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img6.png" />a>div>
li>
ul>
div>
div>
div>
div>
2.CSS部分
.four_box{
background:url(../../images/index/bg_3.png) no-repeat;
background-size: 100% auto;
}
.four_box .cont1200{
padding: 150px 0 10px;
height: 400px;
}
.picScroll-left{ width:100%;margin:0 auto;position:relative; }
.picScroll-left .hd .prev{position: absolute;top:35%;left: -56px;
cursor:pointer;}
.picScroll-left .hd .next{position: absolute;top:35%;right: -52px;}
.picScroll-left .hd .prevStop{ background-position:-60px 0; }
.picScroll-left .hd .nextStop{ background-position:-60px -50px; }
.picScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
.picScroll-left .hd ul li{ float:left; width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; }
.picScroll-left .hd ul li.on{ background-position:0 0; }
.picScroll-left .bd ul{ overflow:hidden; zoom:1;height: 360px; }
.picScroll-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; }
.picScroll-left .bd ul li .pic{ text-align:center; }
.picScroll-left .bd ul li .pic img{ display:block; width: 282px; height: 360px;}
.picScroll-left .bd ul li .title{ line-height:24px; }
3.JS部分