js实现图片轮播
效果图
1.html代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="/stylesheets/common.css"> <link rel="stylesheet" type="text/css" href="/stylesheets/base.css"> <script type="text/javascript" src="/javascripts/jquery.js" charset="UTF-8"></script> <script type="text/javascript" src="/javascripts/tony_tab.js"></script> </head> <body> <!--焦点图--> <div class="fouce fl"> <div class="focus"> <ul style=" width:1440px;left:0px;"> <li><a href=" /></a><h3><a href="#" title="标题1">标题1标题1标题1标题1标题1</a></h3></li> <li><a href=" /></a><h3><a href="#" title="标题1">标题2标题2标题2标题2标题2</a></h3></li> <li><a href=" /></a><h3><a href="#" title="标题1">标题3标题3标题3标题3标题3</a></h3></li> <li><a href=" /></a><h3><a href="#" title="标题1">标题4标题4标题4标题4标题4</a></h3></li> </ul> </div> </div> </body> <script type="text/javascript"> jQuery(function() { $('.focus').slideFocus(); }); </script> </html>
2.调用的js(tony_tab.js)
/** * Created by zhangfanying on 2016/2/1. */ jQuery.fn.extend({ slideFocus: function(){ var This = $(this); var sWidth = $(This).width(), len=$(This).find('ul li').length, index = , Timer; // btn event var btn = "<div class='bullet-pagination'>"; ; i < len; i++) { btn += "<a class='bullet'></a>"; }; btn += "</div><div class='preNext pre'></div><div class='preNext next'></div>"; $(This).append(btn); $(This).find().addClass('active'); $(This).find('.bullet-pagination a').mouseover(function(){ index = $(This).find('.bullet-pagination a').index(this); Tony(index); }); $(This).find('.next').click(function(){ index++; ;} Tony(index); }); $(This).find('.pre').click(function(){ index--; ){index = len - ;} Tony(index); }); // start setInterval $(This).find('ul').css("width",sWidth * (len)); $(This).hover(function(){ clearInterval(Timer); show($(This).find('.preNext')); },function(){ hide($(This).find('.preNext')); Timer=setInterval(function(){ Tony(index); index++; ;} }, ) }).trigger("mouseleave"); function Tony(index){ var new_width = -index * sWidth; $(This).find(); $(This).find('.bullet-pagination a').stop(true,false).eq(index).addClass('active').siblings().removeClass('active'); }; // show hide function show(obj){ $(obj).stop(true,false).fadeIn();} function hide(obj){ $(obj).stop(true,false).fadeOut();} } });
3.样式 common.css
.fouce{ position:relative; overflow:hidden; height:270px; width:360px;} .fouce ul{ position:absolute;} .fouce ul li{ float:left; } .fouce ul li.on{ display:block;} .fouce ul li a.img{ display:block; height:240px;} .fouce ul li a img{ border:0px;} .fouce ul li h3{ height:30px; line-height:30px; background-color:#ededed; text-align:center; font-size:14px;} .fouce .bullet-pagination{ position:absolute; bottom:40px;}.next{ background:url(../images/web/news_arr_r.png) no-repeat left center; right:0px;}
4.样式base.css
*{padding:;margin:;list-style:none;} body,html,input{font:12px/;} body{background:#f1f1f1;} body,html{ height:%;} .fl{ float:left;}
js实现图片轮播的更多相关文章
- 原生js实现图片轮播思路分析
一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
- 纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
- 用JS做图片轮播
脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...
- js加强版图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生js实现图片轮播效果
思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...
- html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
- 使用JS实现图片轮播(前后首尾相接)
最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...
- 使用JS实现图片轮播滚动跑马灯效果
我的第一篇文章.哈哈.有点小鸡冻. 之前在百度搜索"图片轮播"."图片滚动",结果都是那种可以左右切换的.也是我们最常见的那种.可能是搜索 关键字的问题吧. ...
- 原生JS实现图片轮播
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- bzoj4491奇技淫巧线段树
20行的归并+10行的线段树(现在线段树真是越写越短了)+10行主程序(连主程序都缩过行) = =丧心病狂 struct里连开10个,用大括号直接初始化真是爽翻了 #include <cstd ...
- swift初体验
swift是一门类型安全的语言,同样也是基于c语言 那么c语言的一些类型也是实用的,不同的是:swift声明变量和常量是不一样的 let:用来修饰常量:var用来修饰变量 e.g: let num=1 ...
- 【异常】INFO: TopologyManager: EndpointListener changed ...
5月份做云部署,在调试CSS系统时,出现启动系统时,卡死情况,后台日志如下: May 03, 2016 2:34:52 AM org.apache.cxf.dosgi.topologymanager. ...
- js基础
JavaScript组成: ◆ECMASCript 语法标准◆DOM JS操作网页(api) ◆BOM 操作浏览器的api JavaScript特点: ◆简单易用 == ...
- windows service 1053错误 启动失败
做项目移植的时候发现一个项目的window service启动失败,最后试出来是启动时间超时 解决办法是给window service设置一个长一点的等待时间,步骤如下: 启动,输入regedit启动 ...
- Windows多线程多任务设计初步(转)
Windows多线程多任务设计初步 [前言:]当前流行的Windows操作系统,它能同时运行几个程序(独立运行的程序又称之为进程),对于同一个程序,它又可以分成若干个独立的执行流,我们称之为线程,线程 ...
- [IOS]swift 使用AVOS的API
避免写后台代码,但保证app能够有后台,使用了AVOS这个产品来帮助自己的app联网,AVOS是很强大的云服务,基本原理和Parse差不多,只是parse在国外可能对国内用户联网速度上有点限制. 下面 ...
- 简单的jquery选项卡效果
html部分 <ul class="tab"> <li>最新</li> <li class="cur">热门&l ...
- Jenkins中构建Testcomplete项目的方法介绍
Jenkins的部署在上一篇随笔中已经和大家介绍了,下面我们介绍一下再Jenkins中构建testcomplete项目.我这里使用的是Testcomplete11,下面详细介绍一下构建步骤. 1.Je ...
- TP5与TP3.X对比
首先声明本章节并非是指导升级旧的项目到5.0,而是为了使用3.X版本的开发者更快的熟悉并上手这个全新的版本.同时也强烈建议开发者抛弃之前旧的思维模式,因为5.0是一个全新的颠覆重构版本. 需要摒弃的3 ...