完美实现js焦点轮播效果(一)


Posted in Javascript onMarch 07, 2017

最简单轮播形式,js中通过pic的display属性控制变换,也可通过调整Pic的margin-Left

效果如图:

完美实现js焦点轮播效果(一)

实现代码:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style type="text/css">
*{
 margin: 0;
 padding: 0;
 list-style: none;
 text-decoration: none;
}
 .wrap{
 width: 490px;
 height: 170px;
 margin: 100px auto;
 border: 1px solid #000000;
 position: relative;
 overflow: hidden;
 }
 #pic{
 width: 2450px;
 height: 170px;
 }
 #pic li{
 float: left;
 }
 #list{
 position: absolute;
 bottom: 10px;
 left:150px ;
 }
 #list li{
 float: left;
 width: 15px;
 height: 15px;
 background: #fff;
 margin: 0 10px;
 border-radius: 50%;
 cursor: pointer;
 }
 #list .on{
 background: #e27a00;
 }
 .Prev{
 top: 30px;
 left: 0;
 }
 .Next{
 top: 30px;
 right: 0;
 }
 .Prev,.Next{
 position: absolute;
 font-size: 80px;
 font-weight: bold;
 color:#fff ;
 -webkit-transition: all 0.35s ease-in-out
 }
 .Next:hover,
 .Prev:hover{
 background: #ccc;
 background: rgba(204, 204, 204, 0.4);
 }
 .show{
 display: block;
 }
 .hidden{
 display: none;
 }
 </style>
 <script type="text/javascript">
 window.onload=function(){
 var pic=document.getElementById('pic').getElementsByTagName('li');
 var list=document.getElementById('list').getElementsByTagName('li');
 var prev=document.getElementById('Prev');
 var next=document.getElementById('Next');
 var index=0;
 var timer=null;

 auto();
 for(var i=0;i<list.length;i++){
 list[i].index=i;
 list[i].onmouseover=function(){
  clearInterval(timer);
  Change(this.index);
 }
 list[i].onmouseout=function(){
  auto();
 }
 pic[i].onmouseover=function(){
  clearInterval(timer);
 }
 pic[i].onmouseout=function(){
  auto();
 }
 }
 prev.onclick=function(){
 clearInterval(timer);
 index--;
 if(index<=0){
  index=list.length-1;
 }
 Change(index);
 }
 next.onclick=function(){
 clearInterval(timer);
 index++;
 if(index>=list.length){
  index=0;
 }
 Change(index);
 }
 prev.onmousemove=function(){
 clearInterval(timer);
 }
 prev.onmouseout=function(){
 auto();
 }
 next.onmouseover=function(){
 clearInterval(timer);
 }
 next.onmouseout=function(){
 auto();
 }

 function Change(curIndex){
  for(var i=0;i<list.length;i++){
  list[i].className="";
  pic[i].className="hidden";
  }
  list[curIndex].className="on";
  pic[curIndex].className="show";
 index=curIndex;
 }
 function auto(){
 timer=setInterval(function(){
  index++;
  if(index>=list.length){
  index=0
  }
  Change(index);
 },2000);
 }
 }
 </script>
</head>
<body>
<div class="wrap" id="wrap">
 <ul id="pic">
 <li class="show"><a href="#"><img src="/54111cd9000174cd04900170.jpg" alt=""/></a></li>
 <li><a href="#"><img src="/54111dac000118af04900170.jpg" alt=""/></a></li>
 <li><a href="#"><img src="/54111d9c0001998204900170.jpg" alt=""/></a></li>
 <li><a href="#"><img src="/54111d8a0001f41704900170.jpg" alt=""/></a></li>
 <li><a href="#"><img src="/54111d7d00018ba604900170.jpg" alt=""/></a></li>
 </ul>
 <ul id="list">
 <li class="on"></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 <a href="javascript:;" class="Prev" id="Prev"><</a>
 <a href="javascript:;" class="Next" id="Next">></a>
</div>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 可排列的表实现代码
Nov 13 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
微信小程序之onLaunch与onload异步问题详解
Mar 28 Javascript
Vue实现计算器计算效果
Aug 17 Javascript
Vue2.0组件间数据传递示例
Mar 07 #Javascript
js实现网页定位导航功能
Mar 07 #Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 #Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 #Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 #Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 #Javascript
基于JavaScript实现图片剪切效果
Mar 07 #Javascript
You might like
php下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
PHP4中session登录页面的应用
2008/07/25 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
PHP函数之日期时间函数date()使用详解
2013/09/09 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
Javascript实现的分页函数
2006/12/22 Javascript
深入理解javascript动态插入技术
2013/11/12 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
jquery无限级联下拉菜单简单实例演示
2015/11/23 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
js常用DOM方法详解
2017/02/04 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
2019/04/29 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
详解Java中String JSONObject JSONArray List转换
2020/11/13 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
Python datetime时间格式化去掉前导0
2014/07/31 Python
Tornado服务器中绑定域名、虚拟主机的方法
2014/08/22 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
python中PS 图像调整算法原理之亮度调整
2019/06/28 Python
Pandas中resample方法详解
2019/07/02 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
请解释virtual关键字的含义
2015/06/17 面试题
初中校园广播稿
2014/02/02 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
新人入职感言
2015/07/31 职场文书
法制主题班会教案
2015/08/13 职场文书
Python语言内置数据类型
2022/02/24 Python