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

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

需要:

 

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

 

 

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>

 

 

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



body>
html>

 

转载于:https://www.cnblogs.com/moonlight-fly/p/3878147.html

你可能感兴趣的:(jquery slider 实现手机网页上-仿淘宝首页 轮播焦点图 效果。)