利用jquery实现手机端图片切换效果



70 277 93



特效描述:利用jquery实现 手机端 图片切换,利用jquery实现手机端图片切换效果

代码结构

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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


热门标签: 滑动 滚动切换 滑动选项卡切换 flash焦点图 选项卡切换 滑动手风琴 切换按钮 表单 焦点图 幻灯片 图片轮播 带标题的焦点图 图片滑动 图片切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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