完美实现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学习笔记之jQuery的DOM操作
Dec 22 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
Feb 07 Javascript
JS编程小常识很有用
Nov 26 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
Nov 29 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
vue表单数据交互提交演示教程
Nov 13 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合并数组中相同元素的方法
2014/11/13 PHP
分享PHP守护进程类
2015/12/30 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
ES6 系列之 Generator 的自动执行的方法示例
2018/10/19 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
2020/07/30 Javascript
vue-cli中实现响应式布局的方法
2021/03/02 Vue.js
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python求离散序列导数的示例
2019/07/10 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Django获取应用下的所有models的例子
2019/08/30 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
Python 获取异常(Exception)信息的几种方法
2020/12/29 Python
Django视图类型总结
2021/02/17 Python
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
最新自我评价范文
2013/11/16 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
区域销售主管岗位职责
2014/06/15 职场文书
财务人员岗位职责
2015/02/03 职场文书
2015党建工作简报
2015/07/21 职场文书
学生会干部任命书
2015/09/21 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
java中用float时,数字后面加f,这样是为什么你知道吗
2021/09/04 Java/Android
MySQL 语句执行顺序举例解析
2022/06/05 MySQL
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android