完美实现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 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
jquery的map与get方法详解
Nov 04 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
基于JavaScript代码实现随机漂浮图片广告
Jan 05 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
Apr 19 Javascript
JavaScript插件Tab选项卡效果
Nov 14 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
Jul 26 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
jQuery实现雪花飘落效果
Aug 02 jQuery
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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP中include与require使用方法区别详解
2013/10/19 PHP
php常用数学函数汇总
2014/11/21 PHP
php常量详细解析
2015/10/27 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
jquery实现图片按比例缩放示例
2014/07/01 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
vue实现在进行增删改操作后刷新页面
2020/08/05 Javascript
python解决字典中的值是列表问题的方法
2013/03/04 Python
在Python中使用pngquant压缩png图片的教程
2015/04/09 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
python实现决策树分类
2018/08/30 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
基于django传递数据到后端的例子
2019/08/16 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
python numpy矩阵信息说明,shape,size,dtype
2020/05/22 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
深入了解canvas在移动端绘制模糊的问题解决
2019/04/30 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
店长职务说明书
2014/02/04 职场文书
销售人员求职的自我评价分享
2014/03/15 职场文书
感恩之星事迹材料
2014/05/03 职场文书
竞选班长演讲稿400字
2014/08/22 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
年底个人总结范文
2015/03/10 职场文书