养生轮播图

1、js代码实现banner图片轮播

这是我以前写过的一个，样式你改一下就OK了
<div class="fbanner widget3924">
<div id="i_focus">
<div id="i_focus_pic">
<ul id="i_focus_piclist">
<li style="display: none;">
<a href="" target="_blank" style="background: url(/templates/runlinjinguan/images/banner1.jpg) center 0 no-repeat;">

</a>
</li>
<li style="display: list-item;">
<a href="" target="_blank" style="background: url(/templates/runlinjinguan/images/banner4.jpg) center 0 no-repeat;">

</a>
</li>
<li style="display: none;">
<a href="" target="_blank" style="background: url(/templates/runlinjinguan/images/banner3.jpg) center 0 no-repeat;">

</a>
</li>
<li style="display: none;">
<a href="" target="_blank" style="background: url(/templates/runlinjinguan/images/banner2.jpg) center 0 no-repeat;">

</a>
</li>
</ul>
<div id="i_focus_opdiv">
</div>
<ul id="i_focus_btn">
<li id="p0" class="">
<span>

</span>
</li>
<li id="p0" class="i_cur">
<span>

</span>
</li>
<li id="p0" class="">
<span>

</span>
</li>
<li id="p0" class="">
<span>

</span>
</li>
</ul>
</div>
</div>
<script type="text/javascript" src="/templates/runlinjinguan/js/flash.js"></script>
<script type="text/javascript">
$("#i_focus_btn").find("li").eq(0).addClass("i_cur");
</script>
</div>

引用的js文件
// JavaScript Document
//flash js
$(document).ready(function () {
var i_curIndex = 0;
var beauBeauSlide; //函数对象
var i_curID = 0; //取得鼠标下方的对象ID
var pictureID = 0; //索引ID

$("#i_focus_piclist li").eq(0).show(); //默认
autoScroll();
$("#i_focus_btn li").hover(function (e) {
StopScrolll();
$("#i_focus_btn li").removeClass("i_cur") //所有的li去掉当前的样式加上正常的样式
$(this).addClass("i_cur"); //而本身则加上当前的样式去掉正常的样式
i_curID = $(this).attr("id"); //取当前元素的ID
pictureID = $("#i_focus_btn li").index(this);// i_curID.substring(i_curID.length - 1); //取最后一个字符
$("#i_focus_piclist li").eq(pictureID).fadeIn("slow"); //本身显示
$("#i_focus_piclist li").not($("#i_focus_piclist li")[pictureID]).hide(); //除了自身别的全部隐藏
$("#i_focus_tx li").hide();
$("#i_focus_tx li").eq(pictureID).show();

},
function () {
//当鼠标离开对象的时候获得当前的对象的ID以便能在启动自动时与其同步
i_curID = $(this).attr("id"); //取当前元素的ID
pictureID = i_curID.substring(i_curID.length - 1); //取最后一个字符
i_curIndex = pictureID;
autoScroll();
});
//自动滚动

function autoScroll() {
var myNubli = $("#i_focus_btn li").size();
if (myNubli > 1) {
$("#i_focus_btn li:last").removeClass("i_cur");
$("#i_focus_tx li:last").hide();
$("#i_focus_btn li").eq(i_curIndex).addClass("i_cur");
$("#i_focus_btn li").eq(i_curIndex - 1).removeClass("i_cur");
$("#i_focus_tx li").eq(i_curIndex).show();
$("#i_focus_tx li").eq(i_curIndex - 1).hide();
$("#i_focus_piclist li").eq(i_curIndex).fadeIn("slow");
$("#i_focus_piclist li").eq(i_curIndex - 1).hide();
i_curIndex++;
i_curIndex = i_curIndex >= myNubli ? 0 : i_curIndex;
beauBeauSlide = setTimeout(autoScroll, 5000);
}
}
function StopScrolll() //当鼠标移动到对象上面的时候停止自动滚动
{
clearTimeout(beauBeauSlide);
}
});
//第二个渐隐幻灯开始
var defaultOpts = {
interval: 3000,
fadeInTime: 800,
fadeOutTime: 500
};

var _titles = $("ul.slide-txt li");
var _titles_bg = $("ul.op li");
var _bodies = $("ul.slide-pic li");
var _count = _titles.length;
var _current = 0;
var _intervalID = null;
var stop = function () {
window.clearInterval(_intervalID);
};
var slide = function (opts) {
if (opts) {
_current = opts.current || 0;
} else {
_current = (_current >= (_count - 1)) ? 0 : (++_current);
};
_bodies.filter(":visible").fadeOut(defaultOpts.fadeOutTime,
function () {
_bodies.eq(_current).fadeIn(defaultOpts.fadeInTime);
_bodies.removeClass("cur").eq(_current).addClass("cur");
});
_titles.removeClass("cur").eq(_current).addClass("cur");
_titles_bg.removeClass("cur").eq(_current).addClass("cur");
}; //endof slide
var go = function () {
stop();
_intervalID = window.setInterval(function () {
slide();
},
defaultOpts.interval);
}; //endof go
var itemMouseOver = function (target, items) {
stop();
var i = $.inArray(target, items);
slide({
current: i
});
}; //endof itemMouseOver
_titles.hover(function () {
if ($(this).attr('class') != 'cur') {
itemMouseOver(this, _titles);
} else {
stop();
}
},
go);
//_titles_bg.hover(function() { itemMouseOver(this, _titles_bg); }, go);
_bodies.hover(stop, go);
go();
var slideX = {
_this: $('.catalog .imgbox'),
_btnLeft: $('.catalog .left'),
_btnRight: $('.catalog .right'),
init: function () {
slideX._btnLeft.click(slideX.slideLeft);
slideX._btnRight.click(slideX.slideRight);
},
slideLeft: function () {
slideX._btnLeft.unbind('click', slideX.slideLeft);
for (i = 0; i < 2; i++) {
slideX._this.find('li:last').prependTo(slideX._this);
}
slideX._this.css('marginLeft', -224);
slideX._this.animate({
'marginLeft': 0
},
500,
function () {
slideX._btnLeft.bind('click', slideX.slideLeft);
});
return false;
},
slideRight: function () {
slideX._btnRight.unbind('click', slideX.slideRight);
slideX._this.animate({
'marginLeft': -224
},
500,
function () {
slideX._this.css('marginLeft', '0');
for (i = 0; i < 2; i++) {
slideX._this.find('li:first').appendTo(slideX._this)
}
slideX._btnRight.bind('click', slideX.slideRight);
});
return false;
}
}
$(document).ready(function () {
slideX.init();
})
$(document).ready(function () {
var newTime = new Date();
var newTime = newTime.getTime();
var $imgTmp = $('#topromotion').find('img:first');
var osrc = $imgTmp.attr('src');
$imgTmp.attr('src', osrc + '?' + newTime);
});

希望对你有帮助！

2、用PS怎么做轮播图片

轮播是神马？GIF么？

GIF的话，“窗口”菜单里面有个“动画”（ps cs3)，点开后，把要播放的图片载入，一个图层一张，然后在下面的动画帧里面设置即可

3、CSS实现图片轮播

刚学 js 时 写的 图片滚动图！~

当参考吧， 如果没 价值 当我没发！

注释就算了吧！~ 麻烦我还得 从新 解读一遍代码 ，

有价值的话，自己慢慢看吧我写的 特别简单

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        *{padding:0px; margin:0px; list-style: none;}
        ul li{float: left;}
        img{display: block; float: left;}
        #butl{ width:80px; height: 220px;  background: linear-gradient(to right,#ccc, transparent); opacity: 0.9; position: absolute; left: 0px; top: 0px;  z-index: 99; line-height: 220px; text-align: center;font-size: 50px; cursor:pointer;font-family:  Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;}
        #butr{ width:80px; height: 220px; background: linear-gradient(to left,#ccc, transparent); opacity: 0.9; position: absolute; right: 0px; top: 0px;  z-index: 99; line-height: 220px; text-align: center; font-size: 50px;cursor:pointer; font-family:  Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
        var oimg_l=document.getElementById('img_left');
        var obutl=document.getElementById('butl');
        var obutr=document.getElementById('butr');
        var buts=2;
        var timer=null;
        obutl.onclick=function()
        {
            buts=-2;
        }
        obutr.onclick=function()
        {
            buts=2;
        }

        oimg_l.innerHTML=oimg_l.innerHTML+oimg_l.innerHTML;
        function sunmer(){
            oimg_l.style.left=oimg_l.offsetLeft+buts+'px';
            if(oimg_l.style.left=='-1408px'){oimg_l.style.left='0px'}
            if(oimg_l.style.left>0+'px'){oimg_l.style.left='-1408px'}
        }
        timer=setInterval(sunmer,30)
        oimg_l.onmouseover=function()
        {
            clearInterval(timer);
        }
        oimg_l.onmouseout=function()
        {
            timer=setInterval(sunmer,30)
        }    
}
    </script>
</head>
<body>

<div style=" width: 1408px; overflow: hidden; position: relative; height: 220px; background: red; margin:50px auto;">
    <div id="butl"><</div>
        <ul id="img_left"  style="position: absolute; left:0px; top: 0px; width: 2816px; z-index: 1;">
            <li><a href="#"><img src="./img2/1.jpg"></a></li>
            <li><a href="#"><img src="./img2/2.jpg"></a></li>
            <li><a href="#"><img src="./img2/3.jpg"></a></li>
            <li><a href="#"><img src="./img2/4.jpg"></a></li>
        </ul>
    <div id="butr">></div>
</div>
</body>
</html>

4、用ps 怎么做轮播图片？

ps只能做gif动态图，轮播图片一般都是用程序制作的，以前网页中都是用flash制作，现在大都用JS制作了。

5、网页设计中如何让图片轮播

网页设计中让图片轮播，需要用到的JS和比较好的div+css布局意识，主要还是需要了解left，top在css中的意思，这里我提交一段我以前写的代码；
html中的代码：

<div id="box">
<div id="woZaiHouDun" class='hide' >
<a id="btnLeft" href='javascript:void(0);'> </a>
<a id="btnRight" href='javascript:void(0);'> </a>
<ul>
<li><img width="400" height="260" src="./images/scholl/1.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/2.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/3.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/1.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/2.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/3.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/1.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/2.jpg"/></li>
<li><img width="400" height="260" src="./images/scholl/3.jpg"/></li>
</ul>
</div>

js中的代码：
ar t=null;
function woZaiHouDun(){
var oUl = document.getElementById('woZaiHouDun').getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
oUl.innerHTML += oUl.innerHTML;
oUl.style.width = aLi[0].offsetWidth*aLi.length + 'px';
var oBtnLeft = document.getElementById('btnLeft');
var oBtnRight = document.getElementById('btnRight');
var iTarget = 0;
var ispeed = -3;
oBtnLeft.onclick = function(){
ispeed = 3;
}

oBtnRight.onclick = function(){
ispeed = -3;
}
t=setInterval(function(){
iTarget = oUl.offsetLeft -ispeed;
if( iTarget < - oUl.offsetWidth/2){
oUl.style.left =0 +'px';
iTarget = oUl.offsetLeft -ispeed;
}
if( iTarget > 0){
oUl.style.left =- oUl.offsetWidth/2 +'px';
iTarget = oUl.offsetLeft -ispeed;
}
oUl.style.left =iTarget +'px';
},30)
}
这样是能实现轮播的。

6、什么是轮播图 钻石展位图

比如你打开手机淘宝app，那么出现在你面前的几张滚动的图就是轮播图，轮流播放，也叫首页焦点图，简称：手焦。一般钻展投放这个位置，点击率都还算是比较高。

7、拼多多轮播图怎么做？？

拼多多轮播图制作流程：
商家进入店铺后台后，选择店铺装修，可从中找到店铺首页装修来设置轮播图，当我们顺利的找到功能位置后，就可以开始编辑轮播图了，选择事先编辑好的符合要求的图片，再内选择产品，再选择添加新的推荐位，点击确容认，轮播图就可以展示给顾客了。

8、简单的HTML+js图片轮播?

h5代码：

<div id="wrap">
<ul id="list">
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>

<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>

css代码：

<style type="text/css">
@-webkit-keyframes move{
0%{left:-500px;}
100%{left:0;}
}
#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;
overflow: hidden;}

#list{position:absolute;left:0;top:0;padding:0;margin:0;
-webkit-animation:5s move infinite linear;width:200%;}

#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;
color:#fff;text-align: center;float:left;font:normal 50px/2.5em '微软雅黑';}

#wrap:hover #list{-webkit-animation-play-state:paused;}
</style>

(8)养生轮播图扩展资料：

轮播图就是一种网站在介绍自己的主打产品或重要信息的传播方式。说的简单点就是将承载着重要信息的几张图片，在网页的某一部位进行轮流的呈现，从而做到让浏览者很快的了解到网站想要表达的主要信息。以及各种新闻网站的头版头条都是用这种方式呈现的重要信息。

轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px、高度为512px.那么轮播的窗口大小就应该为一张图片的尺寸，即为：1024×512。之后将这5张图片0px水平相接组成一张宽度为：5120px,高度依然为：512px。最后将这张合成后的大图每次向左移动1024px即可实现轮播图。

9、HTML首页怎么加图片轮播

可以通过输入代码来操作。

10、html中如何实现图片轮播

缺少CSS样式，html中，.pic这个你也没有，根本就执行不了，兄弟，现在有很多现成的图片效果，不用自己写啊，方便又快捷