原生Javascript和jQuery做轮播图简单例子


Posted in Javascript onOctober 11, 2016

接触jquery也有一段时间了,今天刚好利用轮播图来练练手。博文的前面会介绍一个简单用jquery做轮播图的例子,中间会插入一些关于轮播图更多的思考,在后面会用Javascript的方法来写一个轮播图,最后则是关于jquery和Javascript的比较。

jquery做轮播图的例子:

html部分代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>轮播图</title>
 <link rel="stylesheet" type="text/css" href="demo.css"/>
 <script src="../jquery/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="demo.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <div id="igs">
 <a class="ig" href="#"><img src="images/1.jpg"/></a>
 <a class="ig" href="#"><img src="images/2.jpg"/></a>
 <a class="ig" href="#"><img src="images/3.jpg"/></a>
 <a class="ig" href="#"><img src="images/4.jpg"/></a>
 <a class="ig" href="#"><img src="images/5.jpg"/></a>
 
 <div class="btn btn1"><</div>
 <div class="btn btn2">></div>
 
 <ul id="tabs">
 <li class="tab">1</li>
 <li class="tab">2</li>
 <li class="tab">3</li>
 <li class="tab">4</li>
 <li class="tab">5</li>
 </ul>
 </div>
 </body>
</html>

css部分代码:

* {
 margin: 0;
 padding: 0;
}

#igs {
 margin: 10px auto;
 width: 700px;
 height: 320px;
 position: relative;
}

.ig {
 position: absolute;
}

#tabs {
 position: absolute;
 list-style: none;
 background-color: rgba(255,255,255,.5);
 left: 300px;
 bottom: 10px;
 border-radius: 10px;
 padding: 5px 0 5px 5px;
}

.tab{
 float: left;
 text-align: center;
 line-height: 20px;
 width: 20px;
 height: 20px;
 cursor: pointer;
 overflow: hidden;
 margin-right: 4px;
 border-radius: 100%;
 background-color: rgb(200,100,150);
}

.btn{
 position: absolute;
 color: #fff;
 top: 110px;
 width: 40px;
 height: 100px;
 background-color: rgba(255,255,255,.3);
 font-size: 40px;
 font-weight: bold;
 text-align: center;
 line-height: 100px;
 border-radius: 5px;
 margin: 0 5px;
}

.btn2{
 position: absolute;
 right: 0px;
}

.btn:hover{
 background-color: rgba(0,0,0,.7);
}

js部分代码:

//定义全局变量和定时器
var i = 0 ;
var timer;

$(document).ready(function(){
 //用jquery方法设置第一张图片显示,其余隐藏
 $('.ig').eq(0).show().siblings('.ig').hide();
 
 //调用showTime()函数(轮播函数)
 showTime();
 
 //当鼠标经过下面的数字时,触发两个事件(鼠标悬停和鼠标离开)
 $('.tab').hover(function(){
 //获取当前i的值,并显示,同时还要清除定时器
 i = $(this).index();
 Show();
 clearInterval(timer);
 },function(){
 //
 showTime();
 });
 
 //鼠标点击左侧的箭头
 $('.btn1').click(function(){
 clearInterval(timer);
 if(i == 0){
 i = 5;//注意此时i的值
 }
 i--;
 Show();
 showTime();
 });
 
 //鼠标点击右侧的箭头
 $('.btn2').click(function(){
 clearInterval(timer);
 if(i == 4){
 i = -1;//注意此时i的值
 }
 i++;
 Show();
 showTime();
 });
 
});


//创建一个showTime函数
function showTime(){
 //定时器
 timer = setInterval(function(){
 //调用一个Show()函数
 Show();
 i++;
 //当图片是最后一张的后面时,设置图片为第一张
 if(i==5){
 i=0;
 }
 },2000);
}


//创建一个Show函数
function Show(){
 //在这里可以用其他jquery的动画
 $('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300);
 
 //给.tab创建一个新的Class为其添加一个新的样式,并且要在css代码中设置该样式
 $('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg');
 
 /*
 * css中添加的代码:
 * .bg{ background-color: #f00; }
 * */
}

完成效果图:

原生Javascript和jQuery做轮播图简单例子

关于jquery做轮播图更多的思考

思考一:在第七行代码中用jquery方法设置第一张图片显示,其余隐藏,我们还有没有其他方法可以实现?
思路:通过jquery的筛选器来实现

代码示例:

$("#igs a:not(:first-child)").hide(); 

扩展:这样来看的话,在a标签中的class我们都可以省略,于此同时我们对于jquery选择器的了解要更深入。

思考二:在第64行代码中,我们创建了一个Show函数,在这里我们只能看到简单的效果,我们能不能将我们的动画效果做的更炫?
思路:用jquery中的自定义动画,为其设置多个动画效果

代码示例:

//代码提示:可以用fadeIn()、fadeOut()、fadeTo()、animate()等,具体实现方法请查阅相关资料 

思考三:如果我们在原来的基础上在增加一张或多张图片,我们又要修改我们的代码了,我们可不可以将该段代码适用到更多的轮播图中?
思路:我们在前面设置一个计数器count,通过DOM的方法获取到图片的数量

代码示例:

var count;
$(document).ready(function(){
 count= $(".main a").length; /*给动态变化的i备用*/;
 //。。。代码省略
 
 //鼠标点击左侧的箭头
 $('.btn1').click(function(){
 clearInterval(timer);
 if(i == 0){
 i = count;//注意此时i的值
 }
 i--;
 Show();
 showTime();
 });
 
 //鼠标点击右侧的箭头
 $('.btn2').click(function(){
 clearInterval(timer);
 //console.log(count-1);
 if(i == count-1){
 i = -1;//注意此时i的值
 }
 i++;
 Show();
 showTime();
 });
 
});

用原生Javascript方法写一个简单的轮播图 

html部分代码:

<div id="container">
 <div id="list" style="left: -600px;">
 <img src="img/5.jpg" alt="1"/>
 <img src="img/1.jpg" alt="1"/>
 <img src="img/2.jpg" alt="2"/>
 <img src="img/3.jpg" alt="3"/>
 <img src="img/4.jpg" alt="4"/>
 <img src="img/5.jpg" alt="5"/>
 <img src="img/1.jpg" alt="5"/>
 </div>
 <div id="buttons">
 <span index="1" class="on"></span>
 <span index="2"></span>
 <span index="3"></span>
 <span index="4"></span>
 <span index="5"></span>
 </div>
 <a href="javascript:;" id="prev" class="arrow"><</a>
 <a href="javascript:;" id="next" class="arrow">></a>
</div>

js部分代码:

<script type="text/javascript">
 /* 知识点: */
 /* this用法 */
 /* DOM事件 */
 /* 定时器 */
 window.onload = function () {
 var container = document.getElementById('container');
 var list = document.getElementById('list');
 var buttons = document.getElementById('buttons').getElementsByTagName('span');
 var prev = document.getElementById('prev');
 var next = document.getElementById('next');
 var index = 1;
 var timer;
 function animate(offset) {
 //获取的是style.left,是相对左边获取距离,所以第一张图后style.left都为负值,
 //且style.left获取的是字符串,需要用parseInt()取整转化为数字。
 var newLeft = parseInt(list.style.left) + offset;
 list.style.left = newLeft + 'px';
 //无限滚动判断
 if (newLeft > -600) {
  list.style.left = -3000 + 'px';
 }
 if (newLeft < -3000) {
  list.style.left = -600 + 'px';
 }
 }
 function play() {
 //重复执行的定时器
 timer = setInterval(function () {
  next.onclick();
 }, 2000)
 }
 function stop() {
 clearInterval(timer);
 }
 function buttonsShow() {
 //将之前的小圆点的样式清除
 for (var i = 0; i < buttons.length; i++) {
  if (buttons[i].className == "on") {
  buttons[i].className = "";
  }
 }
 //数组从0开始,故index需要-1
 buttons[index - 1].className = "on";
 }
 prev.onclick = function () {
 index -= 1;
 if (index < 1) {
  index = 5
 }
 buttonsShow();
 animate(600);
 };
 next.onclick = function () {
 //由于上边定时器的作用,index会一直递增下去,我们只有5个小圆点,所以需要做出判断
 index += 1;
 if (index > 5) {
  index = 1
 }
 animate(-600);
 buttonsShow();
 };
 for (var i = 0; i < buttons.length; i++) {
 (function (i) {
  buttons[i].onclick = function () {
  /* 这里获得鼠标移动到小圆点的位置,用this把index绑定到对象buttons[i]上,去谷歌this的用法 */
  /* 由于这里的index是自定义属性,需要用到getAttribute()这个DOM2级方法,去获取自定义index的属性*/
  var clickIndex = parseInt(this.getAttribute('index'));
  var offset = 600 * (index - clickIndex); //这个index是当前图片停留时的index
  animate(offset);
  index = clickIndex; //存放鼠标点击后的位置,用于小圆点的正常显示
  buttonsShow();
  }
 })(i)
 }
 container.onmouseover = stop;
 container.onmouseout = play;
 play();
 }
 </script>

更多关于Javascript动画的知识请参考:

jquery和Javascript方法的比较

 经过比较,我们不难看出,jquery方法比我们的Javascript方法写的代码要少得多。事实上,直接用Javascript省略了好多问题,比如说兼容性的问题(该示例没有做测试,只是用来做比较);还有,如果当class的值有两个,中间用空格隔开,那么我们用DOM该如何操作(思路:用正则表达式和数组的相关方法),这样我们的代码量会更多;如果我们想要更改动画效果,我们需要修改的地方也很多,而从前面的介绍,我们知道,想要修改动画效果直接修改调用的动画函数就行了……

后面的话:
这篇博文记录自己思维多一点,其中很多方法的具体实现效果都还没写。现在边学习jquery边复习前面学过的Javascript,越来越觉得Javascript强大了(其实是自己弱爆了),好多东西都值得去深究,越来越觉得这个东西有意思了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的图片幻灯展示源码
Jul 15 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
文档对象模型DOM通俗讲解
Nov 01 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
sliderToggle在写jquery的计时器setTimeouter中不生效
May 26 Javascript
jQuery添加删除DOM元素方法详解
Jan 18 Javascript
基于angularjs实现图片放大镜效果
Aug 31 Javascript
老生常谈Javascript中的原型和this指针
Oct 09 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
Oct 11 Javascript
JavaScript实现点击切换功能
Jan 27 Javascript
jQuery progressbar通过Ajax请求实现后台进度实时功能
Oct 11 #Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 #Javascript
Node.js的文件权限及读写flag详解
Oct 11 #Javascript
最原始的jQuery注册验证方式
Oct 11 #Javascript
js正则表达式注册页面表单验证
Oct 11 #Javascript
jQuery ajax MD5实现用户注册即时验证功能
Oct 11 #Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 #Javascript
You might like
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
php urlencode()与urldecode()函数字符编码原理详解
2011/12/06 PHP
php编写的简单页面跳转功能实现代码
2013/11/27 PHP
php去除字符串换行符示例分享
2014/02/13 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
微信小程序 删除项目工程实现步骤
2016/11/10 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
VUE实现移动端列表筛选功能
2019/08/23 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
node.js实现http服务器与浏览器之间的内容缓存操作示例
2020/02/11 Javascript
如何基于filter实现网站整体变灰功能
2020/04/17 Javascript
[02:45]DOTA2英雄基础教程 伐木机
2013/12/23 DOTA
Python访问MySQL封装的常用类实例
2014/11/11 Python
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
如何利用python查找电脑文件
2018/04/27 Python
python中的global关键字的使用方法
2019/08/20 Python
大家都说好用的Python命令行库click的使用
2019/11/07 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
python实现学生成绩测评系统
2020/06/22 Python
css3 自定义字体font-face使用介绍
2014/05/14 HTML / CSS
应届大学生自荐信格式
2013/09/21 职场文书
中秋节超市促销方案
2014/01/30 职场文书
报关专员求职信范文
2014/02/22 职场文书
小学生操行评语
2014/04/22 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
作弊检讨书
2015/01/27 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
《游戏公平》教学反思
2016/02/20 职场文书