完美实现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 相关文章推荐
JavaScript 面向对象编程(1) 基础
May 18 Javascript
js 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
jQuery中eq()方法用法实例
Jan 05 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
vue中的provide/inject的学习使用
May 09 Javascript
详解javascript中的变量提升和函数提升
May 24 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
简单了解JS打开url的方法
Feb 21 Javascript
利用 JavaScript 构建命令行应用
Nov 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
Codeigniter注册登录代码示例
2014/06/12 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
js获取html参数及向swf传递参数应用介绍
2013/02/18 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
封装了jQuery的Ajax请求全局配置
2015/02/05 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
基于jQuery实现仿QQ空间送礼物功能代码
2016/05/24 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
AngularJS自定义指令详解(有分页插件代码)
2017/06/12 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
2017/08/24 jQuery
详解Vue前端对axios的封装和使用
2019/04/01 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
小程序实现tab标签页
2020/11/16 Javascript
python实现代码行数统计示例分享
2014/02/10 Python
python清理子进程机制剖析
2017/11/23 Python
djang常用查询SQL语句的使用代码
2019/02/15 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
Django-migrate报错问题解决方案
2020/04/21 Python
python中id函数运行方式
2020/07/03 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
python将数据插入数据库的代码分享
2020/08/16 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
python实现扫雷游戏的示例
2020/10/20 Python
习总书记三严三实学习心得体会
2014/10/13 职场文书
大学辅导员述职报告
2015/01/10 职场文书
课外活动总结
2015/02/04 职场文书
学校国庆节活动总结
2015/03/23 职场文书
银行客户经理岗位职责
2015/04/09 职场文书
2015年七年级班主任工作总结
2015/05/21 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
golang内置函数len的小技巧
2021/07/25 Golang
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis