zoukankan      html  css  js  c++  java
  • 用html+css+jQuery实现的一个简单的图片切换特效

    这篇文章主要介绍了用html+css+js(jQuery)实现的一个简单的图片切换特效,需要的朋友可以参考下.

    记得要引入一个jQuery库文件,可以是网上在线的,也可以是本地的,注意路径。

    如图所示。 


    该图片切换特效实现很简单,而且兼容性很好。 

    html页面如下 

    复制代码代码如下:
    <div class="wrapper"> 
    <div id="focus"> 
    <ul> 
    <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" alt="QQ商城焦点图效果下载" /></a></li> 
    <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/02.jpg" alt="QQ商城焦点图效果教程" /></a></li> 
    <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/03.jpg" alt="jquery商城焦点图效果" /></a></li> 
    <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/04.jpg" alt="jquery商城焦点图代码" /></a></li> 
    <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/05.jpg" alt="jquery商城焦点图源码" /></a></li> 
    </ul> 
    </div> 
    
    </div><!-- wrapper end --> 
    </body> 

    css样式 

    复制代码代码如下:

    <style type="text/css"> 
    * {margin:0; padding:0;} 
    body {font-size:12px; color:#222; font-family:Verdana,Arial,Helvetica,sans-serif; background:#f0f0f0;} 
    .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} 
    .clearfix {zoom:1;} 
    ul,li {list-style:none;} 
    img {border:0;} 
    
    .wrapper {width:800px; margin:0 auto; padding-bottom:50px;} 
    
    /* qqshop focus */ 
    #focus {width:800px; height:280px; overflow:hidden; position:relative;} 
    #focus ul {height:380px; position:absolute;} 
    #focus ul li {float:left; width:800px; height:280px; overflow:hidden; position:relative; background:#000;} 
    #focus ul li div {position:absolute; overflow:hidden;} 
    #focus .btnBg {position:absolute; width:800px; height:20px; left:0; bottom:0; background:#000;} 
    #focus .btn {position:absolute; width:780px; height:10px; padding:5px 10px; right:0; bottom:0; text-align:right;} 
    #focus .btn span {display:inline-block; _display:inline; _zoom:1; width:25px; height:10px; _font-size:0; margin-left:5px; cursor:pointer; background:#fff;} 
    #focus .btn span.on {background:#fff;} 
    #focus .preNext {width:45px; height:100px; position:absolute; top:90px; background:url(img/sprite.png) no-repeat 0 0; cursor:pointer;} 
    #focus .pre {left:0;} 
    #focus .next {right:0; background-position:right top;} 
    </style> 


    js脚本 

    复制代码代码如下:

    $(function() { 
    var sWidth = $("#focus").width(); //获取焦点图的宽度(显示面积) 
    var len = $("#focus ul li").length; //获取焦点图个数 
    var index = 0; 
    var picTimer; 
    
    //以下代码添加数字按钮和按钮后的半透明条,还有上一页、下一页两个按钮 
    var btn = "<div class='btnBg'></div><div class='btn'>"; 
    for(var i=0; i < len; i++) { 
    btn += "<span></span>"; 
    } 
    btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>"; 
    $("#focus").append(btn); 
    $("#focus .btnBg").css("opacity",0.5); 
    
    //为小按钮添加鼠标滑入事件,以显示相应的内容 
    $("#focus .btn span").css("opacity",0.4).mouseenter(function() { 
    index = $("#focus .btn span").index(this); 
    showPics(index); 
    }).eq(0).trigger("mouseenter"); 
    
    //上一页、下一页按钮透明度处理 
    $("#focus .preNext").css("opacity",0.2).hover(function() { 
    $(this).stop(true,false).animate({"opacity":"0.5"},300); 
    },function() { 
    $(this).stop(true,false).animate({"opacity":"0.2"},300); 
    }); 
    
    //上一页按钮 
    $("#focus .pre").click(function() { 
    index -= 1; 
    if(index == -1) {index = len - 1;} 
    showPics(index); 
    }); 
    
    //下一页按钮 
    $("#focus .next").click(function() { 
    index += 1; 
    if(index == len) {index = 0;} 
    showPics(index); 
    }); 
    
    //本例为左右滚动,即所有li元素都是在同一排向左浮动,所以这里需要计算出外围ul元素的宽度 
    $("#focus ul").css("width",sWidth * (len)); 
    
    //鼠标滑上焦点图时停止自动播放,滑出时开始自动播放 
    $("#focus").hover(function() { 
    clearInterval(picTimer); 
    },function() { 
    picTimer = setInterval(function() { 
    showPics(index); 
    index++; 
    if(index == len) {index = 0;} 
    },4000); //此4000代表自动播放的间隔,单位:毫秒 
    }).trigger("mouseleave"); 
    
    //显示图片函数,根据接收的index值显示相应的内容 
    function showPics(index) { //普通切换 
    var nowLeft = -index*sWidth; //根据index值计算ul元素的left值 
    $("#focus ul").stop(true,false).animate({"left":nowLeft},300); //通过animate()调整ul元素滚动到计算出的position 
    //$("#focus .btn span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果 
    $("#focus .btn span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); //为当前的按钮切换到选中的效果 
    } 
    }); 


    用到的左右切换图片

  • 相关阅读:
    gain 基尼系数
    luogu P5826 【模板】子序列自动机 主席树 vector 二分
    牛客挑战赛39 树与异或 离线 树上莫队 树状数组 约数
    4.22 省选模拟赛 三元组 manacher 回文自动机
    4.22 省选模拟赛 最优价值 网络流 最大权闭合子图
    4.18 省选模拟赛 消息传递 树剖 倍增 线段树维护等比数列
    luogu P4008 [NOI2003]文本编辑器 splay 块状链表
    牛客挑战赛39 密码系统 后缀数组
    luogu P1526 [NOI2003]智破连环阵 搜索+最大匹配+剪枝
    luogu P4095 [HEOI2013]Eden 的新背包问题 多重背包 背包的合并
  • 原文地址:https://www.cnblogs.com/hl-520/p/4241151.html
Copyright © 2011-2022 走看看