原生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 ajax 登录验证实现代码
Sep 23 Javascript
js处理表格对table进行修饰
May 26 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
Vue 与 Vuex 的第一次接触遇到的坑
Aug 16 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 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
用ODBC的分页显示
2006/10/09 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
php常用经典函数集锦【数组、字符串、栈、队列、排序等】
2019/08/23 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
JS面向对象编程 for Cookie
2010/09/19 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
ionic4+angular7+cordova上传图片功能的实例代码
2019/06/19 Javascript
React实现todolist功能
2020/12/28 Javascript
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
深入浅析python的第三方库pandas
2020/02/13 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
python switch 实现多分支选择功能
2020/12/21 Python
python中doctest库实例用法
2020/12/31 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
猎人靴英国官网:Hunter Boots
2017/02/02 全球购物
Smallable英国家庭概念店:设计师童装及家居装饰
2017/07/05 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
餐厅总厨求职信
2014/03/04 职场文书
家长会演讲稿
2014/04/26 职场文书
护士感人事迹
2014/05/01 职场文书
农村老人去世追悼词
2015/06/23 职场文书
欢迎新生标语2015
2015/07/16 职场文书
职工宿舍管理制度
2015/08/05 职场文书
开网店计划分析
2019/07/30 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
springboot如何初始化执行sql语句
2021/06/22 Java/Android