华山资源网

原生Javascript和jQuery做轮播图简单例子
网络编程 2024/11/15 佚名
3 1

接触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="/UploadFiles/2021-04-02/jquery-2.1.1.min.js">


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="/UploadFiles/2021-04-02/5.jpg">


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动画的知识请参考：


Javascript动画效果一


Javascript动画效果二


Javascript动画效果三


Javascript动画效果四


jquery和Javascript方法的比较




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


后面的话：

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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com