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解析获取JSON数据
Apr 08 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
jQuery操作元素追加内容示例
Jan 10 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
JS+JQuery实现无缝连接轮播图
Dec 30 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
jQuery实现影院选座订座效果
Apr 13 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
德生PL990,目前市面上唯一一款便携式插卡蓝牙全波段高性能收音机
2021/03/02 无线电
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
Win7 64位系统下PHP连接Oracle数据库
2014/08/20 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
新浪中用来显示flash的函数
2007/04/02 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
2015/02/13 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
VSCode中如何利用d.ts文件进行js智能提示
2018/04/13 Javascript
vue+php实现的微博留言功能示例
2019/03/16 Javascript
Node.js一行代码实现静态文件服务器的方法步骤
2019/05/07 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Django框架中方法的访问和查找
2015/07/15 Python
Python语言的面相对象编程方式初步学习
2016/03/12 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
Python中按键来获取指定的值
2019/03/02 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
仓库管理制度
2014/01/21 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
师范生见习报告
2014/10/31 职场文书
重阳节慰问信
2015/02/15 职场文书
525心理健康活动总结
2015/05/08 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
鸦片战争观后感
2015/06/09 职场文书
2016学雷锋优秀志愿者事迹材料
2016/02/25 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python