jquery商城网站全屏多张图片滑动切换
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。
<div class="slides">
<div class="slideInner">
<a href="#" style="background: url(images/slide1.jpg) no-repeat;">
<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide1p1.png" /> </div>
<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="images/slide1p2.png" /> </div>
</a>
<a href="#" style="background: url(images/slide2.jpg) no-repeat">
<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide2p1.png" /> </div>
</a>
<a href="#" class="slide3" style="background: url(images/slide3.jpg) no-repeat;">
<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide3p1.png" /> </div>
<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="images/slide3p2.png" /> </div>
<div class="moveElem img3" rel="300,easeInOutExpo"> <img src="images/slide3p3.png" /> </div>
</a>
<a href="#" style="background: rgb(113, 209, 231);">
<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide1p1.png" /> </div>
<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="images/slide1p2.png" /> </div>
</a>
<a href="#" style="background: rgb(178, 44, 44);">
<div class="moveElem img1" rel="0,easeInOutExpo"> <img src="images/slide1p1.png" /> </div>
<div class="moveElem img2" rel="150,easeInOutExpo"> <img src="images/slide1p2.png" /> </div>
</a>
</div>
<div class="nav">
<a class="prev" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
</div>
4、书写css代码。
img{border:0;}
*{padding:0;margin:0;list-style:none;}
.slides{width:100%;height:700px;position:relative;overflow:hidden;}
.slideInner{height:700px;position:relative;left:0;margin-left:0;}
.slideInner a{display:block;height:700px;background-size:cover;background-position:center center;position:relative;text-align:center;z-index:1;}
.slideInner a div.img1{width:1070px;position:absolute;left:50%;margin-left:-535px;}
.slideInner a div.img2{width:1070px;position:absolute;top:557px;left:50%;margin-left:-535px;}
.slideInner .slide3 .img2{top:200px;}
.slideInner .slide3 .img3{width:181px;height:286px;position:absolute;left:50%;margin-left:330px;top:330px;}
.nav{width:1200px;position:relative;left:50%;margin-left:-600px;display:none;}
.nav a{display:block;width:41px;height:119px;opacity:.2;z-index:9;}
.nav a.prev{position:absolute;left:0;top:-350px;margin-top:-58px;background:url(../images/ban_pre.png) no-repeat;}
.nav a.next{position:absolute;right:0;top:-350px;margin-top:-58px;background:url(../images/ban_next.png) no-repeat;}
.navListBox{position:absolute;left:50%;top:675px;z-index:99;}
.navListBox li{width:12px;height:12px;float:left;margin-left:5px;border-radius:50%;overflow:hidden;}
.navListBox li:first-child{margin-left:0;}
.navListBox li a{display:block;width:100%;height:100%;border-radius:50%;background-color:#fff;box-shadow:0 0 5px #666 inset;}
.navListBox li a.active{background-color:#55ddff;}
5、书写并添加js代码。
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/slide.js"></script>
<script >
$(document).ready(function() {
$(".slideInner").slide({
slideContainer: $('.slideInner a'),
effect: 'easeOutCirc',
autoRunTime: 5000,
slideSpeed: 1000,
nav: true,
autoRun: true,
prevBtn: $('a.prev'),
nextBtn: $('a.next')
})
})
</script>
6、代码整体结构。
7、查看效果。
