養生輪播圖

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這個你也沒有，根本就執行不了，兄弟，現在有很多現成的圖片效果，不用自己寫啊，方便又快捷