① 用jquery實現圖片輪播怎麼寫呢求指教
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
.slideShow{
width:620px;
height:700px;/*其實就是圖片的高度*/
border:1px#eeeeeesolid;
margin:100pxauto;
position:relative;
overflow:hidden;/*此處需要將溢出框架的圖片部分隱藏*/
}
.slideShowul{
width:2500px;
position:relative;/*此處需注意relative:對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置，如果沒有這個屬性，圖片將不可左右移動*/
}
.slideShowulli{
float:left;/*讓四張圖片左浮動，形成並排的橫著布局，方便點擊按鈕時的左移動*/
width:620px;
}
.slideShow.showNav{/*用絕對定位給數字按鈕進行布局*/
position:absolute;
right:10px;
bottom:5px;
text-align:center;
font-size:12px;
line-height:20px;
}
.slideShow.showNavspan{
cursor:pointer;
display:block;
float:left;
width:20px;
height:20px;
background:#ff5a28;
margin-left:2px;
color:#fff;
}
.slideShow.showNav.active{
background:#b63e1a;
}
js代碼規范：
<scriptsrc="../../../jQuery/js/jquery-2.1.4.js"></script><scripttype="text/javascript">
$(document).ready(function(){
varslideShow=$(".slideShow"),//獲取最外層框架的名稱
ul=slideShow.find("ul"),
showNumber=slideShow.find(".showNavspan"),//獲取按鈕
oneWidth=slideShow.find("ulli").eq(0).width();//獲取每個圖片的寬度
vartimer=null;//定時器返回值，主要用於關閉定時器
variNow=0;//iNow為正在展示的圖片索引值，當用戶打開網頁時首先顯示第一張圖，即索引值為0
showNumber.on("click",function(){//為每個按鈕綁定一個點擊事件
$(this).addClass("active").siblings().removeClass("active");//按鈕點擊時為這個按鈕添加高亮狀態，並且將其他按鈕高亮狀態去掉
varindex=$(this).index();//獲取哪個按鈕被點擊，也就是找到被點擊按鈕的索引值
iNow=index;
ul.animate({"left":-oneWidth*iNow,//注意此處用到left屬性，所以ul的樣式裡面需要設置position:relative;讓ul左移N個圖片大小的寬度，N根據被點擊的按鈕索引值iNOWx確定
})
});
functionautoplay(){
timer=setInterval(function(){//打開定時器
iNow++;//讓圖片的索引值次序加1，這樣就可以實現順序輪播圖片
if(iNow>showNumber.length-1){//當到達最後一張圖的時候，讓iNow賦值為第一張圖的索引值，輪播效果跳轉到第一張圖重新開始
iNow=0;}
showNumber.eq(iNow).trigger("click");//模擬觸發數字按鈕的click
},2000);//2000為輪播的時間
}
autoplay();
slideShow.hover(function(){clearInterval(timer);},autoplay);另外注意setInterval的用法比較關鍵。
})
</script>
主體代碼：
[html]viewplainprint?
<body>
<divclass="slideShow">
<!--圖片布局開始-->
<ul>
<li><ahref="#"><imgsrc="images/view/111.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/112.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/113.jpg"/></a></li>
<li><ahref="#"><imgsrc="images/view/114.jpg"/></a></li>
</ul>
<!--圖片布局結束-->
<!--按鈕布局開始-->
<divclass="showNav">
<spanclass="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<!--按鈕布局結束-->
</div>
</body>
② 求解淘寶店鋪全屏海報圖片輪播css代碼
<div class="J_TWidget mypoper" data-widget-config="{'effect': 'fade','circular': true ,'contentCls':'sj-t','navCls':'sj-n','autoplay':'true'}" data-widget-type="Tabs" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;height:600px;overflow:hidden;padding-top:0px;">
<div class="sj-t">
<div class="J_TWidget" data-widget-config="{'contentCls': 'sj-content','navCls': 'sj-n','triggerType': 'click','effect': 'fade','steps': 1,'autoplay': true,'circular': true ,'prevBtnCls':'prev','nextBtnCls':'next'}" data-widget-type="Carousel">
<div class="pa2">
<div class="J_TWidget" data-widget-config="{'trigger':'.sj-content', 'align':{'node':'.mypoper', 'offset':[0,0], 'points':['cl','cl'] } }" data-widget-type="Popup" style="width:950px;display:none;">
<div class="ks-contentbox" style="padding-bottom:0px;margin:0px;padding-left:0px;width:950px;padding-right:0px;padding-top:0px;left:0px;">
<div class="prev" style="float:left;margin-left:50px;">
<img class="J_TWidget" data-ks-lazyload="" data-widget-config="{'png':true,'png_tag':true}" data-widget-type="Compatible" style="height:1px;width:1px;" /></div>
<div class="next" style="float:right;margin-right:50px;">
<img class="J_TWidget" data-ks-lazyload="" data-widget-config="{'png':true,'png_tag':true}" data-widget-type="Compatible" style="height:1px;width:1px;" /></div>
</div>
</div>
<ul class="sj-content" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1440px;padding-right:0px;height:600px;overflow:hidden;padding-top:0px;">
<li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:1440px;padding-right:0px;height:600px;padding-top:0px;left:-250px;">
<a target="_blank"><img data-ks-lazyload="
圖片地址" /></a></li>
<li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:440px;padding-right:0px;height:600px;padding-top:0px;left:-250px;">
<a target="_blank"><img data-ks-lazyload="
圖片地址" /></a></li>
</ul>
</div>
<div style="width:1920px;display:none;height:0px;overflow:hidden;">
<ul class="sj-t" style="padding-bottom:0px;margin:0px;padding-left:0px;width:1440px;padding-right:0px;height:50px;padding-top:0px;">
<li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:315px;padding-right:0px;background:black;float:left;height:600px;padding-top:0px;">
</li>
<li style="padding-bottom:0px;list-style-type:none;margin:0px;padding-left:0px;width:315px;padding-right:0px;background:#F8C;float:left;height:8600px;padding-top:0px;">
</li>
</ul>
</div>
<ul class="sj-n" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;display:none;height:1px;padding-top:0px;">
單詞解釋： width:1440px 這個是圖片寬度，親們可以自己設置多少。
height:600px 這個是圖片高度，也是親們自己設置。
left:-250px 這個是水平位置，圖片插入進去沒居中的，親們就慢慢增加或者減少數字，就可以調到居中的哈。有什麼問題再密我。
③ JS代碼實現的圖片輪播,怎麼使下面的數字12345的框框變成圓形的
下面的數字其實是一個小列表ulli,你可以把li設置出邊框設置border-radius屬性為50%,就能實現圓圈效果了.
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<style>
li{border:solid1pxpurple;border-radius:50%;magin-right:10px}
</style>
//即可實現數字邊框變成圓形
④ 怎麼樣才能用DW的設計窗口直接做多張圖片橫向輪播啊本人只懂圖片不懂代碼啊！求指教啊
試試這個幻燈片切換
有12345數字一起切換
滑鼠點一下數字會變換到另一張圖片，不點就會自動換
裡面有教程和源碼