http://www.moon4chen.com/

jquery slider 实现手机网页上-仿淘宝首页 轮播焦点图 效果。

需要：

 

jquery.min.js

jquery 轮播插件：

slider.js

 

 

css部分：

.flexslider{position:relative;width:100%;height:150px;overflow:hidden;zoom:1;}
.flex-viewport{max-height:2000px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;transition:all 1s ease;}
.flexslider .slides{zoom:1;}
.flex-direction-nav a{width:60px;height:90px;line-height:99em;overflow:hidden;margin:-30px 0;display:block;background:url(./img/ad_ctr.png) no-repeat;position:absolute;top:50%;z-index:10;cursor:pointer;opacity:0;filter:alpha(opacity=0);-webkit-transition:all .3s ease;}
.flex-direction-nav .flex-next{background-position:0 -90px;right:0;}
.flex-direction-nav .flex-prev{left:0;}
.flexslider:hover .flex-next{opacity:0.8;filter:alpha(opacity=25);}
.flexslider:hover .flex-prev{opacity:0.8;filter:alpha(opacity=25);}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{opacity:1;filter:alpha(opacity=50);}
.flexslider .img {position:relative;width:100%;background:red;margin-left:-40px;}
.flexslider .img a {display:block;width:100%;}
.flexslider .img a img {display:block;}
.flex-control-nav{width:100%;height:12px;position:absolute;bottom:0px;text-align:center;}
.flex-control-nav li{margin:0px;display:inline-block;zoom:1;*display:inline;}
.flex-control-paging li a{background:url(./img/dot.png) no-repeat 0 -16px;display:block;height:16px;overflow:hidden;text-indent:-99em;width:16px;cursor:pointer;}
.flex-control-paging li a.flex-active{background-position:0 0;}　　　　
<script type="text/javascript">
$(function(){
        $('#slide').flexslider({
        animation: "slide",
        direction:"horizontal",
        easing:"swing",
         keyboardNav: true, 
         directionNav: true,  
         animationDuration: 0
    });
});
</script>

 

 

html部分：

<div id="slide" class="flexslider">
            <ul class="slides">
                <li><div class="img">
                    <a href = "#" > <img src="img/1.jpg" width="100%" height = "150px"  alt="" />
                    </a>
                </div></li>
                <li><div class="img">
                    <a href = "#" ><img src="img/2.jpg" width="100%" height = "150px" alt="" />
                    </a>
                </div></li>
                <li><div class="img">
                    <a href = "#" ><img src="img/3.jpg"  width="100%" height = "150px"  alt="" />
                    </a>
                </div></li>
            </ul>
        </div><!--flexslider end-->

 

 

完整html代码：

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

<style type="text/css">
.flexslider{position:relative;width:100%;height:150px;overflow:hidden;zoom:1;}
.flex-viewport{max-height:2000px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;transition:all 1s ease;}
.flexslider .slides{zoom:1;}
.flex-direction-nav a{width:60px;height:90px;line-height:99em;overflow:hidden;margin:-30px 0;display:block;background:url(./img/ad_ctr.png) no-repeat;position:absolute;top:50%;z-index:10;cursor:pointer;opacity:0;filter:alpha(opacity=0);-webkit-transition:all .3s ease;}
.flex-direction-nav .flex-next{background-position:0 -90px;right:0;}
.flex-direction-nav .flex-prev{left:0;}
.flexslider:hover .flex-next{opacity:0.8;filter:alpha(opacity=25);}
.flexslider:hover .flex-prev{opacity:0.8;filter:alpha(opacity=25);}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{opacity:1;filter:alpha(opacity=50);}
.flexslider .img {position:relative;width:100%;background:red;margin-left:-40px;}
.flexslider .img a {display:block;width:100%;}
.flexslider .img a img {display:block;}
.flex-control-nav{width:100%;height:12px;position:absolute;bottom:0px;text-align:center;}
.flex-control-nav li{margin:0px;display:inline-block;zoom:1;*display:inline;}
.flex-control-paging li a{background:url(./img/dot.png) no-repeat 0 -16px;display:block;height:16px;overflow:hidden;text-indent:-99em;width:16px;cursor:pointer;}
.flex-control-paging li a.flex-active{background-position:0 0;}
</style>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
        $('#slide').flexslider({
        animation: "slide",
        direction:"horizontal",
        easing:"swing",
         keyboardNav: true, 
         directionNav: true,  
         animationDuration: 0
    });
});
</script>
<script type="text/javascript" src="slider.js"></script> 
</head>

<body>

<div id="slide" class="flexslider">
            <ul class="slides">
                <li><div class="img">
                    <a href = "#" > <img src="img/1.jpg" width="100%" height = "150px"  alt="" />
                    </a>
                </div></li>
                <li><div class="img">
                    <a href = "#" ><img src="img/2.jpg" width="100%" height = "150px" alt="" />
                    </a>
                </div></li>
                <li><div class="img">
                    <a href = "#" ><img src="img/3.jpg"  width="100%" height = "150px"  alt="" />
                    </a>
                </div></li>
            </ul>
        </div><!--flexslider end-->



</body>
</html>

 

posted @ 2014-07-30 15:20  谌皓徽  阅读(597)  评论(0)  编辑  收藏  举报