jquery手机端响应式banner图片滚动切换特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

60 236 79



特效描述:图片滚动切换。jquery手机端响应式banner图片滚动切换特效代码下载

代码结构

1. 引入CSS

<link rel="stylesheet" href="image/style.css" type="text/css" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>

3. HTML代码

<div class="block_home_slider">
                        	<div id="home_slider" class="flexslider">
                            	<ul class="slides">
                                	<li>
                                    	<div class="slide">
                                            <img src="image/pic_home_slider_1.jpg" alt="" />
                                            <div class="caption">
                                                <p class="title">国内金准营销服务中心</p>
                                                <p>90天让您的网站升级100倍。国内金准营销服务中心.国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                    	<div class="slide">
                                            <img src="image/pic_home_slider_2.jpg" alt="" />
                                            <div class="caption">
                                                <p class="title">国内金准营销服务中心</p>
                                                <p>90天让您的网站升级100倍。国内金准营销服务中心.国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                    	<div class="slide">
                                            <img src="image/pic_home_slider_3.jpg" alt="" />
                                            <div class="caption">
                                                <p class="title">国内金准营销服务中心</p>
                                                <p>90天让您的网站升级100倍。国内金准营销服务中心.国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心</p>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                    	<div class="slide">
                                            <img src="image/pic_home_slider_4.jpg" alt="" />
                                            <div class="caption">
                                                <p class="title">国内金准营销服务中心</p>
                                                <p>90天让您的网站升级100倍。国内金准营销服务中心.国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心</p>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <script type="text/javascript">
								$(function () {
									$('#home_slider').flexslider({
										animation : 'slide',
										controlNav : true,
										directionNav : true,
										animationLoop : true,
										slideshow : false,
										useCSS : false
									});
								});
							</script>
                        </div>



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



×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

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

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