效果图

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实现图片轮播的更多相关文章
	

    
						
  1. 原生js实现图片轮播思路分析
		
    一.复习原生js实现图片轮播 1.要点 自动轮播 点击小圆圈按钮,显示相应图片 点击左右箭头,实现向前向后轮播图片 2.实现思路 <div id="container"> ...
    
		
    2. 
						
  2. 纯js写图片轮播插件
		
    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
    
		
    3. 
						
  3. 用JS做图片轮播
		
    脚本之家 首页应用手游攻略教程 ﹤首页 >> 网络编程 >> JavaScript >> 网页特效 >> 图象特效 js 图片轮播(5张图片) 作者:m ...
    
		
    4. 
						
  4. js加强版图片轮播
		
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
    
		
    5. 
						
  5. 原生js实现图片轮播效果
		
    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html>  ...
    
		
    6. 
						
  6. html中使用JS实现图片轮播效果
		
    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
    
		
    7. 
						
  7. 使用JS实现图片轮播（前后首尾相接）
		
    最近各种跑面试,终于还是被问到这个,一脑子浆糊,当时没想出来首尾相接怎么搞,回来之后研究了一波,终于搞出来了,不多说,直接看代码 代码参考了一位已经写好了图片轮播功能的(在此表示感谢),但是没有首尾相 ...
    
		
    8. 
						
  8. 使用JS实现图片轮播滚动跑马灯效果
		
    我的第一篇文章.哈哈.有点小鸡冻.  之前在百度搜索"图片轮播"."图片滚动",结果都是那种可以左右切换的.也是我们最常见的那种.可能是搜索 关键字的问题吧.  ...
    
		
    9. 
								
  9. 原生JS实现图片轮播
		
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Docker中images无法使用apt-get update解决方案
			
    问题描述:使用apt-get update一直fail 原因:DNS设置错误 解决办法: nm-tool #查看DNS后面的数(IPv4),将后面的数copy下来 sudo nano /etc/def ...
    
			
    2. 
						
  2. JSPatch 中 defineClass 中覆盖方法的使用
			
    今天研究了一下JSPatch,发现好神奇好奇妙,感觉这几天我都会乐此不彼的去研究这个高大上的东西. 出处来着:https://github.com/bang590/JSPatch 简单介绍一下这个 d ...
    
			
    3. 
						
  3. GitHub for Windows 內建 Git Shell 執行時顏色所代表的意義
			
    在使用指令列版控的過程中,經常有機會用到 Git Shell 這套優異的 Git 版控環境,一來他使用 Windows PowerShell 為核心,其訊息顯示與輸入都支援 Unicode,比較不會有 ...
    
			
    4. 
						
  4. txt文本变成html
			
    file_name = 'x.txt' f = open(file_name,'r') file_result = 'x.html' str_head = " LINE CI UTIL&qu ...
    
			
    5. 
						
  5. java-sql注入攻击
			
    注射式攻击的原理 SQL注射能使攻击者绕过认证机制,完全控制远程服务器上的数据库.SQL是结构化查询语言的简称,它是访问数据库的事实标准.目前,大多数Web应用都使用SQL数据库来存放应用程序的数据. ...
    
			
    6. 
						
  6. 【noip 2016】 蚯蚓（earthworm）
			
    100分程序,写了2天+1小时 →题目在这里← 大神就是厉害--写的程序居然看都看不懂,还有就是cena上过了但是luogu上一直是恶心的TLE 首先是考虑p=0时,数组大小开到了1100000,然后 ...
    
			
    7. 
						
  7. C++哈夫曼树编码和译码的实现
			
    一．背景介绍: 给定n个权值作为n个叶子结点,构造一棵二叉树,若带权路径长度达到最小,称这样的二叉树为最优二叉树,也称为哈夫曼树(Huffman Tree).哈夫曼树是带权路径长度最短的树,权值较大的 ...
    
			
    8. 
						
  8. js中的caller和callee属性
			
    caller返回一个对函数的引用,该函数调用了当前函数. functionName.caller functionName 对象是所执行函数的名称. 说明对于函数来说,caller 属性只有在函数执行 ...
    
			
    9. 
						
  9. Mybatis generator的使用
			
    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration ...
    
			
    10. 
						
  10. Powershell 开启远程桌面
			
    function Set-RemoteDesktop {   while($InNumber -ne 6)   {   Write-Host " ###################### ...
    
			
    11.