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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
jQuery手风琴的简单制作
May 12 jQuery
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
jquery实现手风琴案例
May 04 jQuery
jQuery实现图片切换效果
Oct 19 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
php项目打包方法
2008/02/18 PHP
php中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
PHP静态成员变量
2017/02/14 PHP
PDO::exec讲解
2019/01/28 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
Bootstrap.css与layDate日期选择样式起冲突的解决办法
2017/04/07 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
js HTML5 canvas绘制图片的方法
2017/09/08 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
layerUI下的绑定事件实例代码
2018/08/17 Javascript
Angular(5.2-&gt;6.1)升级小结
2018/12/27 Javascript
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
Opencv+Python 色彩通道拆分及合并的示例
2018/12/08 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
html5 的a标签 Href 拨电话的写法
2013/11/04 HTML / CSS
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
小米乌克兰网上商店:Xiaomi.UA
2019/10/29 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
优秀毕业生找工作自荐信
2014/06/23 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
2014年初三班主任工作总结
2014/12/05 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
离婚案件答辩状
2015/05/22 职场文书
爱国主义教育基地观后感
2015/06/18 职场文书
2015年秋学期教研工作总结
2015/10/14 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android