Javascript实现简单焦点图

分析：

总体思路：

所有图片其实都是经过定位、浮动等显示在同一行内的，通过改变图片容器的left值来实现一张一张移动的，再给最外层的总容器加一个overflow：hidden，每次就只能显示一张图片了，其他都被隐藏了，如下图

具体实现：

（一）html部分

包含内容：轮播图片、切换箭头(左右)、圆点切换按钮(底部)
注意问题：
-1. 轮播图片（假设有5张）排列顺序 → 5、1、2、3、4、5、1，头尾各有一张重复是为了实现循环滚动效果
-2. 在实现过程中，<img>虽然本身就能同行显示，而且已用 * 选择器去掉了所有元素的padding和margin，但由于书写代码时有回车和空字符的原因，图片之间还是有间隙，给<img>都加上左浮动可以消除间隙，这是当时遇到的一个小问题
-3. 为了方便与图片一一对应，给每个圆点按钮自定义了index属性

（二）js部分

包含内容：箭头点击切换效果、圆点按钮鼠标滑过切换效果、切换过程中的位移动画效果、页面加载后自动循环播放效果、鼠标移动到图片上停止自动播放移开后继续自动播放
注意问题：
-1. 箭头切换和圆点切换要互相配合好
-2. 自定义属性使用getAttribute( )获取
-3. 切换过程中的位移动画效果:总位移/移动次数最好整除，注意是整除而不是取整，否则会造成切换过程的最后一瞬间图片出现晃动，道理类似于”惯性”，切换过头了又倒回来的感觉
-4. 切换的优化问题：为了避免鼠标点击太快造成的切换效果错乱，每次切换前需要判断当前动画是否正在进行中，如果正在进行就暂不切换，如果没有动画正在进行就开始切换

代码展示：

(1)html代码

<body><div id="banner"><div id="imglist" style="left:-790px"><img src="data:images/banner5.jpg"><img src="data:images/banner1.jpg"><img src="data:images/banner2.jpg"><img src="data:images/banner3.jpg"><img src="data:images/banner4.jpg"><img src="data:images/banner5.jpg"><img src="data:images/banner1.jpg"></div><div id="cuts"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><i id="prev" class="arrow">&lt;</i><i id="next" class="arrow">&gt;</i></div>
</body>

(2)css样式

    <style>* {margin: 0;padding: 0;}#banner {width: 790px;height: 340px;overflow: hidden;position: relative;margin: 0 auto;top: 50px;}#imglist {width: 5530px;height: 340px;position: absolute;z-index: 90;}#imglist img {float: left;}#cuts {width: 108px;height: 12px;padding: 4px 0;line-height: 20px;position: absolute;bottom: 20px;left: 341px;z-index: 100;background: rgba(255,255,255,.3);border-top-left-radius: 12px;border-bottom-left-radius: 12px;border-top-right-radius: 12px;border-bottom-right-radius: 12px;}#cuts span {float: left;width: 12px;height: 12px;border-radius: 50%;background: #fff;margin-left: 8px;}#cuts .on {background: #DB192A;}.arrow{width: 30px;height: 60px;line-height: 60px;position: absolute;top: 140px;z-index: 100;background: rgba(0,0,0,.2);color: #fff;text-align: center;cursor: pointer;display: none;}.arrow:hover{background: rgba(0,0,0,.5);}#banner:hover .arrow {display: block;}#prev {left: 0;}#next {right:0;}</style>

(3)js代码

<script>window.onload = function (){var prev = document.querySelector("#prev");var next = document.querySelector("#next");var imglist = document.querySelector("#imglist");var cuts = document.querySelectorAll("#cuts span");var index = 1;var len = 5;var animated = false;var timer;      function animate(offset){var left = parseInt(imglist.style.left)+offset;var time = 100;var interval = 10;var speed = offset/(time/interval);function go(){ //位移动画效果animated = true;if((speed>0 && parseInt(imglist.style.left)<left) || (speed<0 && parseInt(imglist.style.left)>left)){imglist.style.left = parseInt(imglist.style.left) + speed + "px";setTimeout(go,interval);}else {imglist.style.left = left + "px";if(left>-790){imglist.style.left = -790*len + "px";}else if(left<(-790*len)){imglist.style.left ="-790px";}animated = false;}}go();}function showBtn(){ //圆点按钮切换效果for (var i = 0; i < cuts.length; i++) {if(cuts[i].className == "on"){cuts[i].className = "";break;}}cuts[index-1].className = "on";}for (var i = 0; i < cuts.length; i++) {     cuts[i].onmouseover = function(){   if(animated){return;}else if (this.className == "on"){return;}       var myIndex = parseInt(this.getAttribute("index"));//取到的index属性是字符串，所以转number;var offset = -790*(myIndex - index);animate(offset);index = myIndex;showBtn();}prev.onclick = function(){ //左箭头切换if(animated){return;}if(index == 1){index = 5;}else{index -= 1;}           animate(790);       showBtn();}next.onclick = function(){ //右箭头切换if(animated){return;}if(index == 5){index = 1;}else{index += 1;}animate(-790);showBtn();}function play(){ //自动播放timer = setInterval(function(){next.onclick();},2000);}function stop(){clearTimeout(timer);}banner.onmouseover = stop;banner.onmouseout = play;play();}
</script>

难点：
-1.箭头切换和圆点切换的相互配合
-2.位移动画效果的逻辑分析和实现过程
-3.判断动画是否正在进行的逻辑分析

Javascript实现简单焦点图相关推荐

前端全栈大佬是如何使用javaScript实现一个焦点图
效果图: 代码如下: <!DOCTYPE html> <html> <head lang="en"><meta charset=" ...
动手写一个HTML5的无限循环滚动焦点图
更多博客:http://blog.ilibing.com/ 现在每个门户网站基本上一打开都是一个大大的焦点图,各种炫酷的滚动的效果.网上也有各式各样的插件,简单好用.但是如果我们能够写一个好用的焦点图 ...
JS一起学02：函数传参、操作属性第二种方式、提取行间事件、循环、this、焦点问题、联动选择、选项卡焦点图
一.函数传参 1.函数传参:参数就是占位符----函数里定不下来的东西 var a1=function(){ alert(123); }; function a(f){ // 相当于 f=a1 ...
模仿PPLive带左右翻页的焦点图,实用
查看效果下载地址前台部分代码代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
如何仅使用HTML和JavaScript构建简单的URL缩短器
by Palash Bauri 由Palash Bauri 如何仅使用HTML和JavaScript构建简单的URL缩短器 (How to build a simple URL shortener w ...
JavaScript设计模式--简单工厂模式例子---XHR工厂
JavaScript设计模式--简单工厂模式例子---XHR工厂第一步,Ajax操作接口(目的是起一个接口检测作用) (1)引入接口文件 //定义一个静态方法来实现接口与实现类的直接检验 //静态方 ...
js实现html页面倒计30秒,javascript实现简单页面倒计时
这篇文章主要为大家详细介绍了javascript实现简单页面倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了javascript实现简单页面倒 ...
JavaScript如何简单而准确地判断复杂数据类型
javaScript如何简单而准确地判断复杂数据类型? 1:typeof 只能判断出基本数据类型例如: var a = 3; typeof a 的结果为 number var b = []; typ ...
flash加xml图片叠加焦点图，左右箭头翻页
flash加xml左右箭头翻页,叠加焦点图,具体效果如下: 源码下载: http://files.cnblogs.com/chendaoyin/flash%E5%8A%A0xml%E5%9B%BE%E ...

Javascript实现简单焦点图

总体思路：

具体实现：

（一）html部分

（二）js部分

代码展示：

Javascript实现简单焦点图相关推荐

最新文章

热门文章