<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PC手机端通用的jQuery响应式幻灯片轮播特效</title>
<link rel="stylesheet" href="css/idangerous.swiper2.7.6.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="swiper-container">
<a class="arrow-left" href="#"></a>
<a class="arrow-right" href="#"></a>
<div class="swiper-wrapper">
<div class="swiper-slide slide1">
<a href="" class="inner">
<img src="images/s0.png" class="ani img s0" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
<img src="images/s1.png" class="ani img s1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s">
<img src="images/s2.png" class="ani img s2" swiper-animate-effect="flipInY" swiper-animate-duration="1s" swiper-animate-delay="0.8s">
<img src="images/s3.png" class="ani img s3" swiper-animate-effect="fadeInUp" swiper-animate-duration="2s" swiper-animate-delay=".2s">
<img src="images/s4.png" class="ani img s4" swiper-animate-effect="fadeInUp" swiper-animate-duration="2.5s" swiper-animate-delay="0s">
</a>
</div>
<div class="swiper-slide slide2">
<a href="" class="inner">
<img src="images/pigBanner_03.png" class="ani img zh-a-1" swiper-animate-effect="bounceInDown" swiper-animate-duration="2s" swiper-animate-delay="0.5s">
<img src="images/pigBnnaer_1_03.png" class="ani img zh-a-2" swiper-animate-effect="zoomIn" swiper-animate-duration="2s" swiper-animate-delay="0s">
</a>
</div>
<div class="swiper-slide slide3">
<div class="inner">
<img src="images/b-1.png" class="ani img b-1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
<img src="images/b-2.png" class="ani img b-2" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
<img src="images/b-3.png" class="ani img b-3" swiper-animate-effect="fadeInDown" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
<img src="images/b-s.png" class="ani img b-s-1" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0s">
<img src="images/b-s.png" class="ani img b-s-2" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0s">
<img src="images/b-s.png" class="ani img b-s-3" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0.6s">
<img src="images/b-s.png" class="ani img b-s-4" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="0.8s">
<img src="images/b-s.png" class="ani img b-s-5" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay="1.5s">
<img src="images/b-s.png" class="ani img b-s-6" swiper-animate-effect="zoomInDown" swiper-animate-duration="1.2s" swiper-animate-delay=".5s">
<img src="images/b-y-1.png" class="ani img b-y-1 loop" swiper-animate-effect="moveRight" swiper-animate-duration="15s" swiper-animate-delay="4s">
<img src="images/b-y-2.png" class="ani img b-y-2 loop" swiper-animate-effect="moveLeft" swiper-animate-duration="15s" swiper-animate-delay="0s">
<img src="images/b-y-3.png" class="ani img b-y-3 loop" swiper-animate-effect="moveRight" swiper-animate-duration="15s" swiper-animate-delay="0s">
<div class="targetBtn clearfix ani" swiper-animate-effect="zoomInUp" swiper-animate-duration="1s" swiper-animate-delay="0.5s">
<a class="a1" href="" target="_blank">了解更多</a>
<a class="a2" href="" style="" rel="media-gallery"><i></i>观看视频介绍</a>
</div>
</div>
</div>
</div>
<div class="pagination"></div>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script src="js/idangerous.swiper2.7.6.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
pagination: '.pagination',
paginationClickable :true,
autoplay : 10000,
speed:1,
//autoplayDisableOnInteraction : false,
onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
$('.arrow-left').on('click', function(e){
e.preventDefault()
mySwiper.swipePrev()
})
$('.arrow-right').on('click', function(e){
e.preventDefault()
mySwiper.swipeNext()
})
</script>
</body>
</html>
PC手机端通用的jQuery响应式幻灯片轮播特效.zip
版权申诉
198 浏览量
2023-09-25
13:46:16
上传
评论
收藏 267KB ZIP 举报
PC手机端通用的jQuery响应式幻灯片轮播特效.zip （22个子文件） 
js 
jquery-1.10.1.min.js 91KB idangerous.swiper2.7.6.min.js 45KB swiper.animate1.0.2.min.js 2KB css style.css 3KB idangerous.swiper2.7.6.css 3KB animate.min.css 60KB
index.html 5KB images 
s0.png 4KB s2.png 9KB pigBnnaer_1_03.png 57KB s4.png 47KB b-2.png 8KB s3.png 33KB b-s.png 2KB pigBanner_03.png 21KB b-1.png 10KB arrows.png 1KB b-y-1.png 1KB b-y-3.png 3KB b-3.png 6KB s1.png 9KB b-y-2.png 4KB资源评论
