jQuery仿小猪cms官网图片幻灯片轮播代码



123 491 164



特效描述:jQuery 图片幻灯片轮播,jQuery响应式的图片幻灯片、仿小猪cms官网图片动画切换、适用于手机端的图片轮播代码。

代码结构

1. 引入CSS

<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">

2. 引入JS

<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>

3. HTML代码

<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="http://www.17sucai.com/" 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="http://www.17sucai.com/" 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="http://www.17sucai.com/" target="_blank">了解更多</a>
					<a class="a2" href="http://www.17sucai.com/" style="" rel="media-gallery"><i></i>观看视频介绍</a>
				</div>
			</div>    
		</div>
	</div>
	<div class="pagination"></div>
</div>
<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> 



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 flash焦点图 flash幻灯片 flashbanner flash图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 焦点图 幻灯片 轮播图 bar焦点图 带简介的焦点图 图片切换 图片选项卡 图标选项卡 纯图片轮播 图片轮播 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到