jQuery自动或手动图片切换效果


Posted in jQuery onOctober 11, 2017

学习JS的时候本来积攒了很多有趣的小例子,但是苦于没有找到一些好的平台来展示这些JS效果。今天发现了RunJS这个分享代码的平台,迫不及待得想跟大家分享。

    在浏览各大商城网站的时候,或者某些网站的首页,都会展示与本网站相关的一些实时切换的图片, 本文就给大家分享一个用jQuery实现图片自动切换的例子。    

主页核心代码(Default.aspx):

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title>jQuery实现图片切换</title>  
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
    <script type="text/javascript" src="js/tupianqiehuan.js"></script> 
    <link rel="stylesheet" type="text/css" href="css/tupianqiehuan.css"> 
</head> 
<body> 
    <div class="wrapper"> 
        <h1>jquer实现图片切换</h1> 
        <div id="focus"> 
            <ul> 
                <li><a href="#" target="_blank"><img src="images/01.jpg" alt="" /></a></li> 
                <li><a href="#" target="_blank"><img src="images/02.jpg" alt="" /></a></li> 
                <li><a href="#" target="_blank"><img src="images/03.jpg" alt="" /></a></li> 
                <li><a href="#" target="_blank"><img src="images/04.jpg" alt="" /></a></li><span style="white-space:pre">                 </ul> 
        </div> 
    </div> 
</body> 
</html>

CSS代码(tupianqiehuan.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;} 
h1{height:50px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;margin-bottom:20px;} 
/* 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(http://sandbox.runjs.cn/uploads/rs/475/xaqlrnnr/sprite.png) no-repeat 0 0;cursor:pointer;} 
#focus .pre{left:0;} 
#focus .next{right:0;background-position:right top;}

JS代码(tupianqiehuan.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).mouseover(function() { 
    index = $("#focus .btn span").index(this); 
    showPics(index); 
  }).eq(0).trigger("mouseover"); 
 
  //上一页、下一页按钮透明度处理 
  $("#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").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300);//为当前的按钮切换到选中的效果  
  } 
});

具体效果可以参看 效果演示         

这里先给大家一个开胃菜,后面会抽时间简单说一下如何在 RunJS上发布自己的小程序以及使用RunJS的一些小技巧。

jQuery 相关文章推荐
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
jQuery.form.js的使用详解
Jun 14 jQuery
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
jQuery获取复选框选中的当前行的某个字段的值
Sep 15 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 #jQuery
jQuery中过滤器的基本用法示例
Oct 11 #jQuery
jQuery中extend函数简单用法示例
Oct 11 #jQuery
jQuery实现的事件绑定功能基本示例
Oct 11 #jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 #jQuery
jQuery实现的form转json经典示例
Oct 10 #jQuery
认识jQuery的Promise的具体使用方法
Oct 10 #jQuery
You might like
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
随机显示经典句子或诗歌的javascript脚本
2007/08/04 Javascript
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
javaScript同意等待代码实现心得
2011/01/01 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
浅谈js中的闭包
2015/03/16 Javascript
js中this用法实例详解
2015/05/05 Javascript
javascript类型系统 Array对象学习笔记
2016/01/09 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
vue.js数据绑定操作详解
2018/04/23 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Django URL传递参数的方法总结
2016/08/28 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Python tkinter label 更新方法
2018/10/11 Python
Python 写入训练日志文件并控制台输出解析
2019/08/13 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
python datetime处理时间小结
2020/04/16 Python
Django视图、传参和forms验证操作
2020/07/15 Python
Python类型转换的魔术方法详解
2020/12/23 Python
彪马土耳其官网:PUMA土耳其
2019/07/14 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
教师简历自我评价
2014/02/03 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
2014年学校财务工作总结
2014/12/06 职场文书
研究生个人学年总结
2015/02/14 职场文书
总结会主持词
2015/07/02 职场文书