web前端必学功法之一：轮播图

效果演示:

<style>* {margin: 0;padding: 0;}/* 去除a标签的下划线 */a {text-decoration: none;}.container {position: relative;width: 600px;height: 400px;margin: 100px auto 0 auto;box-shadow: 0 0 5px mediumpurple;overflow: hidden;}.wrap {position: absolute;width: 4200px;height: 400px;z-index: 1;}.container .wrap img {float: left;width: 600px;height: 400px;}.container .buttons {position: absolute;right: 150px;bottom: 20px;width: 200px;height: 10px;z-index: 2;}.container .buttons span {margin-left: 5px;display: inline-block;width: 20px;height: 20px;line-height: 20px;border-radius: 50px;background-color: mediumslateblue;color: white;cursor: pointer;text-align: center;}.container .buttons span.on {background-color: red;}.container .arrow {position: absolute;top: 36%;color: mediumpurple;padding: 0 12px;border-radius: 50%;font-size: 50px;z-index: 2;}.container .arrow_left {left: 10px;}.container .arrow_right {right: 10px;}.container .arrow:hover {background-color: rgba(0, 0, 0, 0.3);}
</style>

      <div class="container"><!-- 图片区域 --><div class="wrap" style="left:-600px;"><img src="img/1.jpg" /><img src="img/2.jpg" /><img src="img/3.jpg" /><img src="img/4.jpg" /><img src="img/5.jpg" /><img src="img/6.jpg" /><img src="img/7.jpg" /></div><!-- 圆点 --><div class="buttons"><span id="1">1</span><span id="2">2</span><span id="3">3</span><span id="4">4</span><span id="5">5</span></div><!-- 左右控制按钮 --><a href="javascript:void(0)" class="arrow arrow_left" onclick="preImg()">&lt;</a><a href="javascript:void(0)" class="arrow arrow_right" onclick="nextImg()">&gt;</a></div>

      <script>var wrap = document.querySelector(".wrap");var newLeft;//  上一张function preImg() {//   判断当前图片是否为最后一张if (wrap.style.left === "-3600px") {newLeft = -1200;   //是为最后一张就回到最前面一张} else {newLeft = parseInt(wrap.style.left) - 600  //不是就到上一张,因为当前wrap.style.left值是个字符串，所以就需要parseInt()}wrap.style.left = newLeft + "px";   // 新位置的值index--;    //上一张，每次图标就减去1if(index < 0){     //index最小为0index = 4;}showCurrentDot();}//  下一张function nextImg() {//   判断当前图片是否为最后一张if (wrap.style.left === "0px") {newLeft = -2400;   //是为最后一张，就回到第一张} else {newLeft = parseInt(wrap.style.left) + 600  //不是第一张就继续下一张,因为当前wrap.style.left值是个字符串，所以就需要parseInt()}wrap.style.left = newLeft + "px";   // 新位置的值index++;    //下一张，每次图标就加1if(index > 4){     //index大于4 ，说明到了最后一张index = 0;}showCurrentDot();}// 自动播放var  timer;function  autoPlay(){//定时两秒执行一次，下一章 方法调用timer = setInterval(function(){nextImg(); },2000)}autoPlay();// 鼠标悬停时，停止图片轮播//   找到当前容器，绑定一个onmouseroverdocument.querySelector(".container").onmouseover = function(){//清除定时任务clearInterval(timer);}//鼠标离开时，开始轮播图片document.querySelector(".container").onmouseleave = function(){//自动播放autoPlay();}//显示小圆点var index = 0;var  dots = document.getElementsByTagName("span");  //获取所有的小圆点function showCurrentDot(){for(var  i = 0; i < dots.length; i++){//设置圆点不选中dots[i].className = "";}//将当前所在位置的图片对应的小圆点选中dots[index].className = "on";}showCurrentDot();//点击小圆点事件for(var i = 0; i< dots.length; i++){//绑定点击事件dots[i].onclick = function(){//获取点击的圆点的位置(id属性值)var  dis = this.id;//设置wrap的left值wrap.style.left = -(dis * 600) + "px";//设置红点位置index = dis - 1;   //dis是从1开始的，但是索引是从0开始的，所以要减少1showCurrentDot();}}</script>

轮播图总结

      1.这里使用5个小圆点，用7张图片来轮播，是为了实现无缝轮播，这样看起来效果比较好一点2.它的原理：就是将图片在一行中进行平铺，把所有的图片平铺在页面中，然后进行计算偏移量，再利用定时器，定时轮播3.布局很重要。是成功的第一步。

web前端必学功法之一：轮播图相关推荐

web前端必学功法之一：用户选择爱好
web前端必学功法之一:用户选择爱好案例实现效果: 首先做这个页面效果,我们要把页面布局给写好,每个网站做好页面可以解决很大的问题. css代码,这里的页面采用Grid布局 <style> ...
web前端必学功法之一：表单校验（1）
web前端必学功法之一:表单校验案例效果: 这里的布局采用的是bootstrap布局 <div class="container" style="margin-t ...
web前端必学功法之一：留言板
web前端必学功法之一:留言板案例效果: css部分 <style>.container{width: 600px;}.mes-board{margin: 25px 0;padding: ...
web前端必学功法之一：省市联动
web前端必学功法之一:省市联动案例:js实现下面功能 **<!-- 省市联动思路分析:1.准备元素:定义省份与城市的下拉框2.绑定事件:绑定省份下拉框的change事件3.准备数据:准备数组 ...
web前端必学功法之一：秒表实现
web前端必学功法之一:秒表实现功能案例: css样式:<style>.date{width: 200px;height: 50px;background-color: black;bo ...
web前端必学功法之一：五星好评
web前端必学功法之一:五星好评案例效果: <!--思路分析:1.设置鼠标样式,当鼠标放到星星上时,修改鼠标的样式2.定义元素:通过表格的td元素来存放星星3.绑定事件:绑定每一个星星的鼠标悬 ...
web前端必学功法之一：表单校验（2）
web前端必学功法之一:表单校验(2) 这里采用另一种写法,jQuery写法,在用jQuery写法之前,一定要引入jquery.js. <div class="container&qu ...
【Web前端】【疑难杂症】轮播图图片自适应显示问题（bootstrap3轮播图）
关键代码 html <div id="header" class="carousel slide"><! ...
前端内好用插件轮播图
前端内好用插件&&轮播图文章目录前端内好用插件&&轮播图一.js辅助插件 (1)flexible适配(移动端和pc端兼容) (2)fastclick插件(解决移动 ...

web前端必学功法之一：轮播图

web前端必学功法之一：轮播图

轮播图总结

web前端必学功法之一：轮播图相关推荐

最新文章

热门文章