[Web]焦点图实现篇一

网站焦点图是一种网站内容的展现形式，可简单理解为一张图片或多张图片展现在网页上就是网站焦点图。在网站很明显的位置，用图片组合播放的形式，类似焦点新闻的意思只不过加上了图片。一般多网站首页版面或频道首页版面，因为是通过图片的形式，所以有一定的吸引性、视觉吸引性。容易引起访问者的点击，据国外的设计机构调查统计，网站焦点图的点击率明显高于纯文字，转化率高于使用在文字标题5倍。https://baike.baidu.com/item/%E7%BD%91%E7%AB%99%E7%84%A6%E7%82%B9%E5%9B%BE/8282982?fr=aladdin

下面代码使用的是5张560*300的照片，如果你的照片大小不是这个尺寸的话建议修改里面的一些参数。为了更好的展示图片效果，建议使用相同尺寸的图片。

5张图片放载7次是为了按到最后一个跳到开始第一张的时候不那么明显的察觉到转换。

同时实现了无限循环播放，可以自定义播放间隔，当鼠标放在上面的时候停止自动播放，鼠标离开继续自动播放。

下面的小按钮能实现直接跳转图片。

&lt是左箭头，&gt是右箭头

细品代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>焦点图</title><style>*{margin: 0;padding: 0;text-decoration: none;}body{padding: 20px;}#container{width: 560px;height: 300px;border: 3px solid #333;overflow: hidden;position: relative;}#list{width: 3920px;height: 300px;position: absolute;z-index: 1;}#list img{float: left;}#button{position: absolute;height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 200px;}#button span{cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius: 50%;}#button .on{background: orangered;}.arrow{cursor: pointer;display: none;line-height: 35px;text-align: center;font-size: 36px;font-weight: bold;width: 40px;height: 40px;position: absolute;z-index: 2;top: 180px;background-color: rgba(0,0,0,.3);color: #fff;}.arrow:hover{background: rgba(0,0,0,.7);}#container:hover .arrow{display: block;}#prev{left: 20px;}#next{right: 20px;}</style><script type="text/javascript">window.onload = function () {var container = document.getElementById("container");var list = document.getElementById("list");var buttons = document.getElementById("button").getElementsByTagName("span");var prev = document.getElementById("prev");var next = document.getElementById("next");var index = 1;var animated = false;var timer;//显示小圆点function showButton() {for (var i = 0; i < buttons.length; i++){if (buttons[i].className == "on"){buttons[i].className = '';break;}}buttons[index-1].className = "on";}function animate(offset){animated = true;var newLeft = parseInt(list.style.left) + offset;var time = 300; //位移总时间var interval = 10;  //位移间隔时间var speed = offset / (time / interval);function go(){if ((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){list.style.left = parseInt(list.style.left) + speed + "px";setTimeout(go, interval);}else{animated = false;list.style.left = newLeft + "px";if (newLeft > -560){list.style.left = -2800 + 'px';}if (newLeft < -2800){list.style.left = -560 + "px";}}}go();}//自动播放function play(){timer = setInterval(function () {next.onclick();}, 3000);}//清除自动播放function stop(){clearTimeout(timer);}//点击下一个按钮next.onclick = function () {if (index == 5){index = 1;}else{index += 1;}showButton()if (!animated){animate(-560);}}//点击上一个按钮prev.onclick = function () {if (index == 1){index = 5;}else{index -= 1;}showButton()if (animated == false){animate(560);}}for (var i = 0; i < buttons.length; i++){buttons[i].onclick = function () {if (this.className == "on"){return ;}var myIndex = parseInt(this.getAttribute('index'));var offset = -560 * (myIndex - index);animate(offset);index = myIndex;showButton();}}container.onmouseover = stop;container.onmouseout = play;play();}</script>
</head>
<body><div id="container"><div id="list" style="left: -560px"><img src="data:images/5a.jpg" alt=""><img src="data:images/1a.jpg" alt=""><img src="data:images/2a.jpg" alt=""><img src="data:images/3a.jpg" alt=""><img src="data:images/4a.jpg" alt=""><img src="data:images/5a.jpg" alt=""><img src="data:images/1a.jpg" alt=""></div><div id="button"><span index="1" class="on"></span><span index="2"></span><span index="3"></span><span index="4"></span><span index="5"></span></div><a class="arrow" id="prev">&lt</a><a class="arrow" id="next">&gt</a></div></body>
</html>

[Web]焦点图实现篇一相关推荐

educoder头歌Web实训 web课——综合应用案例：动态焦点图页面的制作
educoder头歌Web实训太原理工web课--综合应用案例:拼图页面的制作[全网更新最快]_玛卡巴卡的博客-CSDN博客第1关:动态焦点图页面的样式设计任务描述本关任务: 完成动态焦点图 ...
Spring Boot：（四）开发Web应用之JSP篇
Spring Boot:(四)开发Web应用之JSP篇前言上一篇介绍了Spring Boot中使用Thymeleaf模板引擎,今天来介绍一下如何使用SpringBoot官方不推荐的jsp,虽然难度 ...
Spring Boot：（三）开发Web应用之Thymeleaf篇
Spring Boot:(三)开发Web应用之Thymeleaf篇前言 Web开发是我们平时开发中至关重要的,这里就来介绍一下Spring Boot对Web开发的支持. 正文 Spring Boot ...
Spring Boot（20）---开发Web应用之JSP篇
Spring Boot(20)---开发Web应用之JSP篇前言上一篇介绍了Spring Boot中使用Thymeleaf模板引擎,今天来介绍一下如何使用SpringBoot官方不推荐的jsp,虽 ...
Spring Boot（19）---开发Web应用之Thymeleaf篇
Spring Boot(19)---开发Web应用之Thymeleaf篇前言 Web开发是我们平时开发中至关重要的,这里就来介绍一下Spring Boot对Web开发的支持. 正文 Spring B ...
web前端研发工具篇
web前端研发工具篇一.常见前端开发IDE 1.Visual Studio Code 2.hbuilder 3.sublime text3 4.WebStorm 5.Atom 6.Dreamweav ...
python——图片爬虫：爬取爱女神网站(www.znzhi.net)上的妹子图进阶篇
在上一篇博客中:python--图片爬虫:爬取爱女神网站(www.znzhi.net)上的妹子图基础篇我讲解了图片爬虫的基本步骤,并实现了爬虫代码在本篇中,我将带领大家对基础篇中的代码进行改善, ...
软件方法（下）分析和设计第9章分析之分析类图——案例篇（20211228更新）
软件方法(下)分析和设计第8章分析之分析类图--知识篇(20211227更新) 鸳鸯扣,宜结不宜解 <身似摇红烛影>,词:唐涤生,曲:王粤生,唱:红线女,1954 可到此处下载本文档最 ...
SIGIR‘22 推荐系统论文之图网络篇
2022推荐系统论文梳理系列推荐系统相关顶会整理 IJCAI'22 推荐系统论文梳理 ICML/ICLR'22 推荐系统论文梳理 WWW'22 推荐系统论文之序列推荐篇 WWW'22 推荐系统论文之 ...

[Web]焦点图实现篇一

[Web]焦点图实现篇一相关推荐

最新文章

热门文章

[Web]焦点图实现 篇一

[Web]焦点图实现 篇一相关推荐

最新文章

热门文章

[Web]焦点图实现篇一

[Web]焦点图实现篇一相关推荐