原生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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
Jquery之美中不足小结
Feb 16 Javascript
jQuery 事件的命名空间简单了解
Nov 22 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
Postman的下载及安装教程详解
Oct 16 Javascript
javascript中join方法实例讲解
Feb 21 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转义输出HTML到JavaScript
2015/03/27 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
thinkPHP5.0框架引入Traits功能实例分析
2017/03/18 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
Bootstrap精简教程
2015/11/27 Javascript
javascript实现简单的全选和反选功能
2016/01/05 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
2017/07/18 Javascript
利用纯JS实现像素逐渐显示的方法示例
2017/08/14 Javascript
Vue render深入开发讲解
2018/04/13 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
React父子组件间的传值的方法
2018/11/13 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
用python实现的线程池实例代码
2018/01/06 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
python自动化生成IOS的图标
2018/11/13 Python
详解python算法之冒泡排序
2019/03/05 Python
Python 读取位于包中的数据文件
2020/08/07 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
师范生实习的个人自我鉴定
2013/10/20 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
社区健康教育工作方案
2014/06/03 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
历史博物馆观后感
2015/06/05 职场文书
反腐倡廉心得体会2016
2016/01/13 职场文书
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python