轮播特效

实现效果：下面的图标随轮播图片一起滚动，点击下面图标可以换图。

head里，样式表：

<style type="text/css">
*{ margin:0px; padding:0px;}
#tu{ width:800px; height:500px; position:relative; overflow:hidden; margin:30px auto;}
#ta{ width:4000px; height:500px; margin-left:0px;}
.lie{width:800px; height:500px; background-size:contain;}
#tu2{ width:612px; height:79px; position:relative; margin:20px auto;}
#lie1{width:90px; height:80px; position:relative; float:left; cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png); background-repeat:no-repeat;}
#lie2{width:90px; height:80px; position:relative; float:left;  cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png); background-repeat:no-repeat;}
#lie3{width:90px; height:80px; position:relative; float:left;  cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png); background-repeat:no-repeat;}
#lie4{width:90px; height:80px; position:relative; float:left;  cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png); background-repeat:no-repeat;}
#lie5{width:90px; height:80px; position:relative; float:left;  cursor:pointer; background-image:url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png); background-repeat:no-repeat;}

</style>

body里：

<div id="tu" onmouseover="pause()" onmouseout="contin()">
     <table id="ta" cellpadding="0" cellspacing="0">
        <tr height="500px">
        <td class="lie"><img src="新建文件夹/Images/tr_img_1.jpg" width="800px" /></td>
        <td class="lie"><img src="新建文件夹/Images/tr_img_2.jpg" width="800" /></td>
        <td class="lie"><img src="新建文件夹/Images/tr_img_3.jpg" width="800px"/></td>
        <td class="lie"><img src="新建文件夹/Images/tr_img_4.jpg" width="800" /></td>
        <td class="lie"><img src="新建文件夹/Images/tr_img_5.jpg" width="800" /></td>
        </tr>
     </table>

</div>
<div id="tu2">
     <div id="lie1" onclick="dianji(1)"></div>
     <div id="lie2" onclick="dianji(2)"></div>
     <div id="lie3" onclick="dianji(3)"></div>
     <div id="lie4" onclick="dianji(4)"></div>
     <div id="lie5" onclick="dianji(5)"></div>
</div>

js里：

<script language="javascript">

document.getElementById("ta").style.marginLeft="0px";
function huan()
{
    var tp=document.getElementById("ta");
    var a=parseInt(tp.style.marginLeft);
    if(a<=-3200)
    {
        tp.style.marginLeft="0px";
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01_y.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
    }
    else
    {
        tp.style.marginLeft=(a-800)+"px";
        if(a==-800)
        {dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03_y.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";}
        if(a==-1600)
        {dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04_y.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";}
        if(a==-2400)
        {dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05_y.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";}
        if(a==0)
        {dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02_y.png)";}

    }
    id=window.setTimeout("huan()",3000);
}
var id=window.setTimeout("huan()",3000);

function pause()
{
    window.clearTimeout(id);
}
function contin()
{
    id = window.setTimeout("huan()",3000);
}

var tp=document.getElementById("ta");
var dj=new Array;
dj[0]=document.getElementById("lie1");
dj[1]=document.getElementById("lie2");
dj[2]=document.getElementById("lie3");
dj[3]=document.getElementById("lie4");
dj[4]=document.getElementById("lie5");
dj[0].style.borderColor="red";
function dianji(i)
{
    if(i==1)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01_y.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
        tp.style.marginLeft="0px";
    }
    else if(i==2)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02_y.png)";
        tp.style.marginLeft="-800px";
    }
    else if(i==3)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03_y.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
        tp.style.marginLeft="-1600px";
    }
    else if(i==4)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04_y.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
        tp.style.marginLeft="-2400px";
    }
    else if(i==5)
    {
        dj[0].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_01.png)";
        dj[2].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_03.png)";
        dj[3].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_04.png)";
        dj[4].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_05_y.png)";
        dj[1].style.backgroundImage="url(%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/Images/tr_02.png)";
        tp.style.marginLeft="-3200px";
    }
}

</script>
时间： 2024-10-01 00:17:43

轮播特效的相关文章

20款带左右箭头的焦点图片轮播特效代码

20款带左右箭头的焦点图片轮播特效代码分享 html5带倒影3D图片叠加轮播切换特效 jQuery slide图片自动轮播滚动插件 jQuery焦点图插件带按钮控制图片轮播滚动代码 jquery仿hao123带新闻标题图片轮播滚动效果 jQuery仿瑞丽全屏透明遮罩图片轮播滚动代码 jQuery带网上开户表单的焦点图轮播代码 jquery左右箭头控制带缩略图片轮播切换 jQuery responsiveslides.js响应式图片轮播特效 jQuery OwlCarousel图片滚动插件世界杯图

案例：焦点图轮播特效

案例:焦点图轮播特效 案例:焦点图轮播特效 案例:固定边栏滚动特效 案例:固定边栏滚动特效 案例:弹出层效果 案例:弹出层效果 案例:分页页码制作 案例:分页页码制作案例:焦点图轮播特效,布布扣,bubuko.com

jQuery简单的轮播特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

爱奇艺首页导航轮播特效

1 <!doctype html><!--声明当前文档为html文档--> 2 <html lang="en"><!--语言为英语--> 3 <head><!--头部--> 4 <meta charset="UTF-8"><!--字符编码:utf-8国际编码 gb2312中文编码--> 5 <meta name="Keywords" conten

【图片轮播特效插件】--- 效果实现

忙了一段时间,终于能好好静下来写这篇博文了,那废话就不多说,直接开始吧. 按照上一篇对于jQuery插件的学习掌握,首先就是搭好一个合适的框架,定好插件中需要用到的属性,给其他使用者留出使用接口: 1 (function($){ 2 //各种默认的属性参数 3 var defaults = { 4 width: 400, 5 height: 200, 6 direction:'left', 7 imgs:[{ 8 src:'p0.jpg', 9 link:'http://www.cnblogs.

基于jQuery游戏网站焦点图轮播特效

基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center> <br> <div id="chinaz"> <div class="banner-btn"> <a href="javascript:;" class="prevBtn" r

纯CSS3跳动焦点广告轮播特效

1. [代码] 纯CSS3跳动焦点广告轮播特效 <!--  Author: Developed by Caleb Jacob Author Website: http://iamceege.com/ Author Contact: [email protected] Description: This is a pure CSS content slider developed to remove the shroud of mystery behind CSS3 animations and

小白项目-JavaScript实现轮播特效

小白项目-JavaScript实现轮播特效加油吧 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <link rel="stylesheet" href="css/style.css"> 7 &l

JS——网页图片轮播特效

焦点图轮播 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head> 3 <meta http-equiv="Content-T

js轮播特效

1.自动轮播 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片轮播--无限轮播</title> <style> #tuijian{ border:1px #000000 solid; width:640px; height:500px; background-repeat:no-rep